React 错误边界

什么是错误边界

错误边界是一种特殊的组件，可以用来捕获并打印发生在其子组件树任何位置的JavaScript错误，并渲染出备用UI。
错误边界会在渲染期间，声明周期方法，和整组件树的构造函数中捕获错误。所以错误边界无法捕获以下场景中产生的错误：

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

错误边界类似于JavaScript的catch，但是它只针对react

为什么要用错误边界

错误边界可以解决部分UI的JavaScript错误会导致整个应用崩溃的问题。
自 React 16 起，任何未被错误边界捕获的错误将会导致整个 React 组件树被卸载，使用错误边界可以提供更好的用户体验

怎么使用

基础用法

在class组件中定义static getDerivedStateFromError()或componentDidCatch()着两个声明周期方法中的任意一个（或两个），该组件就成为了一个错误边界。

• getDerivedStateFromError() 用来处理错误
• 使用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>

错误边界可以搭配错误监控来记录生产环境产生的错误

什么时候，什么地点用

在任意react组件外来包裹错误边界，以保护边界外的内容不崩溃

相关知识

• 在开发环境下React16会将渲染期间发生的所有错误打印到控制台，并且还提供了组件栈追踪：

• try/catch

try / catch 仅能用于命令式代码（imperative code）,但是react组件是声明式的，所以需要错误边界来捕捉错误