Reactjs 错误边界优雅处理方法demo

Reactjs 错误边界是ReactJS 16一个新的特性。它可以让我们在组件内部，通过生命周期函数来捕获JavaScript错误。错误边界能够捕获组件树内一个未被捕获的JavaScript异常，并且在渲染发生错误时，提供优雅的兜底方案，而不是整个组件树崩溃。

创建错误边界

创建错误边界非常简单，只需创建一个类实现 componentDidCatch 方法即可。

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

  componentDidCatch(error, info) {
    // 将错误捕获记录到日志中
    logErrorToMyService(error, info);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 组件错误处理逻辑
      return <h1>出现错误，请稍后重试。</h1>;
    }
    return this.props.children;
  }
}

使用上述方式创建错误边界后，只需要将需要进行错误边界捕获的组件包裹在 <ErrorBoundary> 组件中即可。

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

错误边界的限制

• 错误边界无法捕获以下场景中的错误：事件处理程序、异步代码、服务端渲染、它自身抛出来的错误（即没有从下层组件中抛出任何错误）。

示例说明一：基本使用

下面是一个简单示例，通过错误边界组件包裹了一个可能抛出错误的组件，当该组件抛出错误时，错误边界组件捕获错误并进行处理。

class ErrorDemo extends React.Component {
  render() {
    return (
      <main>
        <h1>ReactJS错误边界演示</h1>
        <ErrorBoundary>
          <ErrorComponent />
        </ErrorBoundary>
      </main>
    );
  }
}

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

  handleClick = () => {
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      throw new Error('发生错误');
    }
    return (
      <button onClick={this.handleClick}>模拟错误</button>
    );
  }
}

上述示例中，当用户点击模拟错误按钮时，ErrorComponent 抛出异常，ErrorBoundary 捕获到错误并展示了友好的错误提示页面。

示例说明二：组合使用

错误边界组件也可以嵌套组合使用，以达到多重错误处理的效果。

class MultiBoundaryDemo extends React.Component {
  render() {
    return (
      <main>
        <h1>ReactJS多重错误边界演示</h1>
        <ErrorBoundary>
          <ErrorBoundary>
            <ErrorComponent />
          </ErrorBoundary>
        </ErrorBoundary>
      </main>
    );
  }
}

上述示例中，使用了两个嵌套的 ErrorBoundary 组件，当 ErrorComponent 抛出异常时，内部的 ErrorBoundary 组件无法捕获到错误，从而将错误抛到了外部父级 ErrorBoundary 组件中进行处理。