React 错误边界

前言

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念：错误边界。

错误边界的作用

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误。并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

错误边界无法捕获的错误

错误边界无法捕获以下场景中产生的错误：

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

如何使用错误边界

如果一个 class 组件中定义了 static getDerivedStateFromError() 或者 componentDidCatch()这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，使用 static getDerivedStateFromError() 渲染备用 UI，使用 componentDidCatch() 打印错误信息：

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

  static getDerivedStateFromError(error) {    
      // 更新 state 使下一次渲染能够显示降级后的 UI    
      return { hasError: true }; 
  }
  
  componentDidCatch(error, errorInfo) {    
      // 你同样可以将错误日志上报给服务器    
      logErrorToMyService(error, errorInfo);  
  }
  
  render() {
    if (this.state.hasError) {      
        // 你可以自定义降级后的 UI 并渲染      
        return <h1>Something went wrong.</h1>;   
    }
    return this.props.children; 
  }
}

然后可以将它作为一个常规组件去使用：

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

错误边界的工作方式类似于 JavaScript 的 catch()，不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为错误边界组件。大多数情况下，只需要声明一次错误边界组件， 并在整个应用中使用它。

错误边界仅可以捕获其子组件的错误，它无法捕获自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中 的 catch() 工作机制。

错误边界无法捕获事件处理器内部的错误。React 不需要错误边界来捕获事件处理器中的错误。与 render 方法和生命周期方法不同，事件处理器不会在渲染期间触发。因此，如果它们抛出异常，React 仍然能够知道需要在屏幕上显示什么。如果需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch 语句即可。

错误边界应该放在哪

错误边界的粒度由我们来决定，可以将其包装在最顶层的路由组件并为用户展示一个 “Something went wrong” 的错误信息，就像服务端框架经常处理崩溃一样。也可以将单独的组件包裹到错误边界中以保护应用其他部分不崩溃。

未捕获错误的新行为

自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载，因为把一个错误的 UI 留在那比完全移除它要更糟糕。

最后

如果文中有错误或者不足之处，欢迎大家在评论区指正。

你的点赞是对我莫大的鼓励！感谢阅读~