React 错误边界

错误捕获

错误边界是一种 React 组件，这种组件可以捕获并打印发生在其子组件树任何位置的 JavaScript 错误，并且，它会渲染出备用 UI，而不是渲染那些崩溃了的子组件树。

简单来讲，就是用于：子组件发生错误时，渲染备用UI的组件。

只有 class 组件才可以成为错误边界组件。

大多数情况只需要声明一个错误边界组件，在整个应用去使用。
错误边界的粒度根据需求来定。按照理解，比如有一个经典的左右布局，左侧导航栏，右侧内容栏；应该将内容通过“错误边界组件”包裹，当内容发生崩溃，不会影响到导航栏。

用法

可以定义个公共组件，在需要的地方使用这个组件将子组件包裹。

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) {
      // 渲染错误视图
      return <h1>Something went wrong.</h1>;
    }

    // 渲染正确视图
    return this.props.children; 
  }
}
复制代码

在某组件中使用：

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
复制代码

其它

文档balabala：

注意

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

事件处理（了解更多）
异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
服务端渲染
它自身抛出来的错误（并非它的子组件）

异步代码、事件中的错误可以通过try {} catch(e) {}来处理：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      hasError: false
    };
  }
  
  onClick(e) {
    tru {
      // TODO
    } catch(err) {
      this.setState({ hasError: true })
    }
  }
  
  render() {
    const { hasError } = this.state;
    if (hasError) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}
复制代码