《十四》React 中的错误边界

错误边界：Error Boundary。是一种 React 组件，用来捕获后代组件错误并渲染除备用页面。

只有类组件才可以成为错误边界。如果一个类组件中定义了 static getDerivedStateFromError()或componentDidCatch()这两个生命周期方法中的任意一个或两个时，那么它就变成了一个错误边界。当抛出错误后，要使用static getDerivedStateFromError()渲染备用 UI，使用componentDidCatch()打印错误日志。

错误边界在整个组件树的构造函数、 render() 渲染期间和生命周期方法中捕获错误。无法捕获以下场景中产生的错误：事件处理、异步代码、服务端渲染、它自身抛出的错误而不是它的子组件。

错误边界的工作方式类似于 JS 中的 catch{} ，不同之处在于错误边界只针对 React 组件。
如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JS 中 catch{} 的工作机制。
错误边界只适用于生产环境，不适用于开发环境。

// 定义错误边界组件
class ErrorBoundary extends React.Component {
  // 用于标识子组件是否产生错误
  state = { hasError: false } 
  
  // 只要这个错误边界组件包裹的后代组件发生错误，就会触发这个钩子，发生的错误信息会作为参数传入
  static getDerivedStateFromError(error) {
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    // 可以将错误日志上报给服务器
    ...
  }

  render() {
    if (this.state.hasError) {
      // 可以自定义降级后的 UI 并渲染
      return <h1>发生错误了...</h1>
    }

    return this.props.children;
  }
}

// 使用错误边界组件：可以当做一个常规组件去使用
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>