React错误边界是React中引入的一个功能，可让您捕获在渲染，生命周期方法和整个组件树的构造函数中发生的错误。使用错误边界，您可以防止错误崩溃整个应用程序，而是显示一个后备UI。当前仅支持错误边界作为REACT中的类组件，因此，如果您使用的挂钩，则可能需要包括一个集体组件以进行错误处理。

错误边界通过包装要监视错误的组件来工作。当这些组件之一或其任何后代中发生错误时，错误边界组件会捕获错误并显示后备UI而不是崩溃的组件树。

要在渲染过程中捕获错误，请用错误边界组件处理要处理错误的组件。这是一个示例：

<ErrorBoundary errorComponent={ClientError}>
                <Component {...pageProps} />
              </ErrorBoundary>

在此示例中，如果在渲染过程中发生错误，则错误边界组件将捕获错误并改为显示后备UI。

import React, { Component, ErrorInfo } from "react";

interface ErrorBoundaryProps {
  errorComponent: () => JSX.Element;
  children: React.ReactNode;
}

interface ErrorBoundaryState {
  hasError: boolean;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError(error: unknown) {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    //TODO: Integrate Datadog
    console.error("Error Boundary Caught an error: ", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <this.props.errorComponent />;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

在上面的示例中，有一个称为errorboundary的反应组件。它的目的是捕获其子组件中发生的任何错误，并显示后备UI而不是崩溃的组件树。

errorboundary类具有两个接口。 errorBoundaryProps 接口定义了错误围栏接受的道具，其中包括错误组合道具和儿童道具。 errorBoundaryState 接口定义了errorboundary的状态，即是否发生了错误。

errorboundary类具有将状态初始化为 haserror的构造函数：false。

errorboundary类还具有两种处理错误的方法。静态 getDerivedStateFromError（）方法在从其任何子组件中丢弃错误时，都会调用。它返回一个对象，该对象更新了错误的状态，以表明发生了错误。

componentDidcatch（）方法在从其任何子组件中丢弃了错误后调用。在此方法中，开发人员可以添加任何必要的代码来处理错误，例如记录或向外部服务报告错误。在此代码段中，该方法将错误和错误info记录到控制台。

最后，Render（）方法检查是否通过查看Haserror状态发生了错误。如果发生了错误，它将呈现出作为道具传递的错误component。如果未发生错误，它会导致其子女道具，这是它正在包装的子分量树。

此组件对于在生产环境中捕获错误非常有用。通常建议在应用程序的根部使用至少一个错误边界（例如，app.js文件）。这将阻止用户看到空白的HTML页面，也许会看到一个不错的/自定义的后备UI。

记住，就像生活中一样，有时我们的反应应用中也会出错。但是有了错误的围栏，我们可以捕获这些错误，并确保它们不会使整个房子失望！因此，请继续并用错误包装您的组件，并放心，即使您的代码抛出了一些阴影，您的应用程序也会保持光彩！;）