React 第二十三章 使用错误边界捕获渲染错误

在 React 中，错误边界是一种能够捕获并处理渲染错误的机制。当渲染期间发生错误时，React 会中止渲染并显示错误信息，以防止错误的影响传播到整个应用程序。

使用错误边界有助于提高应用程序的可靠性和稳定性。在处理大型复杂应用程序时尤为重要，因为单个组件的错误可能会导致整个应用程序的崩溃。

要使用错误边界，需要创建一个继承自 React.Component 的类组件，并实现 static getDerivedStateFromError(error) 或者 componentDidCatch(error, errorInfo) 生命周期方法。

getDerivedStateFromError和 componentDidCatch区别

• getDerivedStateFromError 静态方法

  • 运行时间点：渲染子组件的过程中，发生错误之后，在更新页面之前（整个应用没有崩溃，直接渲染降级 UI）
  • 注意：只有子组件发生错误，才会运行该函数
  • 该函数返回一个对象，React 会将该对象的属性覆盖掉当前组件的 state
  • 参数：错误对象
  • 通常，该函数用于改变状态

• componentDidCatch 实例方法

  • 运行时间点：渲染子组件的过程中，发生错误，更新页面之后（整个应用已经崩溃了，之后再重新渲染整个应用，当然会排除有问题的那一部分UI，那一部分渲染降级UI），由于其运行时间点比较靠后，因此不太会在该函数中改变状态
  • 通常，该函数用于记录错误消息

下面是一个简单的错误边界组件的例子：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 在这里可以记录错误信息或发送错误报告
    console.error(error);
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>出错了！</h1>;
    }
    return this.props.children;
  }
}

// 使用错误边界包裹子组件
function App() {
  return (
    <div>
      <h1>我的应用程序</h1>
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    </div>
  );
}

在上面的例子中，如果 MyComponent 组件抛出错误，错误边界组件会捕获错误并显示一条友好的错误信息。这样可以防止错误影响到整个应用程序的渲染。

注意
错误边界组件主要是用来捕获 UI 渲染时的错误，因此如下场景中错误是无法捕获的

• 事件处理
• 异步代码
• 服务端渲染
• 它自身抛出来的错误

总之，错误边界组件仅能过处理渲染子组件期间的同步错误。