什么是 React 错误边界？

定义

React错误边界（Error Boundary）是React组件的一种特殊机制，用于捕获并处理子组件在渲染过程中抛出的JavaScript错误，从而防止整个组件树崩溃，保持应用的稳定性和可靠性。

在React中，当一个JavaScript错误没有被捕获时，整个组件树将会卸载，并且显示一个错误信息，这可能导致用户看到空白页面或者其他异常情况，影响用户体验和应用的可用性。为了解决这个问题，React引入了错误边界的概念，允许开发者将错误的影响限制在错误边界组件内部，从而不影响整个应用的运行。

需要注意的是，错误边界只能捕获其子组件抛出的错误，并不能捕获在错误边界本身中发生的错误或异步错误（例如setTimeout中的错误）。因此，在编写错误边界时，应该将其放置在尽可能高的位置，以覆盖更多的子组件。

用法

当使用类组件创建错误边界时，可以通过实现componentDidCatch和getDerivedStateFromError生命周期方法来处理错误。

下面是一个示例，展示了如何在类组件中使用错误边界的生命周期方法：

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  componentDidCatch(error, errorInfo) {
    // 在这里处理错误，比如打印错误信息或者发送给错误日志收集服务
    console.error(error, errorInfo);
    this.setState({
      hasError: true,
      error: error,
      errorInfo: errorInfo,
    });
  }

  static getDerivedStateFromError(error) {
    // 在这里派生更新的状态，并显示备用的UI界面
    return {
      hasError: true,
      error: error,
    };
  }

  render() {
    if (this.state.hasError) {
      // 当发生错误时，返回备用的UI界面
      return (
        <div>
          <h1>Oops! Something went wrong.</h1>
          <p>{this.state.error && this.state.error.toString()}</p>
          <p>Component Stack Trace:</p>
          <pre>{this.state.errorInfo && this.state.errorInfo.componentStack}</pre>
        </div>
      );
    }
    // 正常情况下渲染子组件
    return this.props.children;
  }
}

class MyComponent extends Component {
  render() {
    // 当 count 的值等于 5 时，抛出一个错误
    if (this.props.count === 5) {
      throw new Error('Oops! Count is 5');
    }
    return <div>{this.props.count}</div>;
  }
}

export default class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <MyComponent count={3} /> {/* 正常情况 */}
      </ErrorBoundary>
      <ErrorBoundary>
        <MyComponent count={5} /> {/* 触发错误 */}
      </ErrorBoundary>
    );
  }
}

在上面的示例中，我们定义了一个ErrorBoundary类组件作为错误边界，实现了componentDidCatch和getDerivedStateFromError生命周期方法。

componentDidCatch方法在子组件抛出错误时被调用，并接收error和errorInfo参数。在这个示例中，我们将错误信息存储在组件的状态中，并设置hasError为true，用于显示备用的UI界面。
getDerivedStateFromError方法在componentDidCatch之前调用，它用于派生更新的状态。在这个示例中，我们只设置hasError为true。

然后，我们创建一个名为MyComponent的类组件，用于展示props.count的值。当count的值等于5时，我们故意抛出一个错误。

在App组件中，我们使用两个ErrorBoundary组件包裹MyComponent组件，分别传递count为3和5。当count为3时，组件正常渲染，不会触发错误边界的显示。而当count为5时，由于我们在MyComponent中故意抛出了错误，错误边界的componentDidCatch和getDerivedStateFromError方法会被触发，从而显示备用的UI界面，以防止整个组件树崩溃。

总结来说，componentDidCatch用于捕获组件的子组件发生的错误，并处理这些错误，而getDerivedStateFromError用于派生更新的状态以显示备用的UI界面。通过这两个生命周期方法，我们可以创建一个稳健的错误边界组件，保护整个应用免受错误的影响。

捕获错误类型

错误边界可以捕获以下类型的错误：

组件渲染错误：当组件的render方法中发生错误时，错误边界可以捕获并处理这些错误。
子组件错误：错误边界可以捕获其子组件中抛出的错误。即，如果在错误边界的子组件树中发生错误，错误边界可以将错误捕获，并阻止错误继续向上冒泡，从而防止整个组件树崩溃。
生命周期方法中的错误：错误边界可以捕获组件的生命周期方法中发生的错误，如componentDidMount、componentDidUpdate等。

但是，错误边界不能捕获以下类型的错误：

自身的错误：错误边界不能捕获自身在生命周期方法中的错误，包括componentDidCatch方法内部的错误。如果错误边界本身发生错误，它无法捕获和处理自己的错误。
事件处理函数中的错误：错误边界不能捕获在事件处理函数（如点击事件、表单提交事件等）中发生的错误。因为这些事件处理函数并不是在组件渲染过程中直接执行的，所以错误边界对其无法进行捕获。
异步代码中的错误：错误边界无法捕获在异步代码（如setTimeout、Promise等）中发生的错误。因为异步代码是在当前组件渲染完毕后才执行的，错误边界的捕获范围不包括异步代码。

总的来说，错误边界可以捕获组件渲染过程中及其子组件中的错误，但不能捕获其自身、事件处理函数中以及异步代码中的错误。当使用错误边界时，需要注意其局限性，合理选择错误边界的位置和使用场景，以确保应用的稳定性和可靠性。