ErrorBoundary 无法捕获的异常

[981377660LMT]

ErrorBoundary（错误边界）在React中用于捕获其子组件树中的JavaScript错误，并显示一个备用UI，而不是让整个组件树崩溃。具体来说，ErrorBoundary 可以捕获以下类型的错误：

1. 渲染过程中的错误

ErrorBoundary 可以捕获在组件的渲染过程中发生的错误。这包括在render方法中抛出的错误。

class MyComponent extends React.Component {
  render() {
    // 这里的错误会被 ErrorBoundary 捕获
    throw new Error('Render error');
    return <div>Hello World</div>;
  }
}

2. 生命周期方法中的错误

ErrorBoundary 可以捕获在组件的生命周期方法中抛出的错误。这包括componentDidMount、componentDidUpdate、componentWillUnmount等方法中的错误。

class MyComponent extends React.Component {
  componentDidMount() {
    // 这里的错误会被 ErrorBoundary 捕获
    throw new Error('Lifecycle error');
  }

  render() {
    return <div>Hello World</div>;
  }
}

3. 构造函数中的错误

ErrorBoundary 可以捕获在组件的构造函数中抛出的错误。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 这里的错误会被 ErrorBoundary 捕获
    throw new Error('Constructor error');
  }

  render() {
    return <div>Hello World</div>;
  }
}

4. 子组件中的错误

ErrorBoundary 可以捕获其子组件树中的任何错误。这意味着如果子组件中发生错误，ErrorBoundary 也能捕获到。

class ParentComponent extends React.Component {
  render() {
    return (
      <ErrorBoundary>
        <ChildComponent />
      </ErrorBoundary>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    // 这里的错误会被 ErrorBoundary 捕获
    throw new Error('Child component error');
    return <div>Hello from Child</div>;
  }
}

不能捕获的错误

尽管ErrorBoundary功能强大，但它不能捕获以下类型的错误：

1. 事件处理器中的错误：ErrorBoundary 无法捕获事件处理器内部抛出的错误。这些错误需要在事件处理器内部手动捕获和处理。

class MyComponent extends React.Component {
  handleClick = () => {
    // 这里的错误不会被 ErrorBoundary 捕获
    throw new Error('Event handler error');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

2. 异步代码中的错误：例如，setTimeout、requestAnimationFrame 回调函数中的错误，以及使用 Promise 的异步操作中未被捕获的错误，ErrorBoundary 也无法捕获。

class MyComponent extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      // 这里的错误不会被 ErrorBoundary 捕获
      throw new Error('Async error');
    }, 1000);
  }

  render() {
    return <div>Hello World</div>;
  }
}

3. 服务端渲染(SSR)中的错误：ErrorBoundary 仅在客户端渲染中有效。在服务端渲染过程中发生的错误需要通过其他方式处理。

4. 错误边界自身抛出的错误：如果 ErrorBoundary 组件自身抛出错误，或者其 render 方法、生命周期方法（constructor、getDerivedStateFromError、componentDidCatch）中抛出错误，这些错误不会被当前的 ErrorBoundary 捕获。

5. 加载错误边界组件时的错误：如果在加载 ErrorBoundary 组件的过程中发生了错误（例如，通过动态 import() 加载组件时），这些错误也无法被捕获。

通过了解ErrorBoundary的工作原理和限制，可以更好地设计和调试React应用，确保在错误发生时提供良好的用户体验。