面试题：React错误边界在捕获错误方面有哪些常见局限性

Question

请阐述React错误边界在捕获组件错误时，通常会遇到哪些无法捕获的情况。

Answer 1

• 事件处理中的错误：React错误边界无法捕获事件处理函数内部的错误。因为事件处理函数并非由React直接调用，而是由DOM事件系统触发，所以错误边界无法处理这些错误。例如：

class MyComponent extends React.Component {
  handleClick = () => {
    throw new Error('Click error');
  }
  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

在上述代码中，handleClick 函数内抛出的错误，错误边界无法捕获。

• 异步代码中的错误：如 setTimeout、Promise 等异步操作中的错误，错误边界同样无法捕获。这是因为异步代码的执行时机和调用栈与正常的React渲染过程不同。例如：

class MyComponent extends React.Component {
  componentDidMount() {
    setTimeout(() => {
      throw new Error('Timeout error');
    }, 1000);
  }
  render() {
    return <div>My Component</div>;
  }
}

这里 setTimeout 回调函数内抛出的错误，错误边界不能捕获。

• 服务端渲染（SSR）中的错误：React错误边界无法捕获服务端渲染过程中抛出的错误。因为服务端渲染和客户端渲染的环境及机制存在差异，目前React的错误边界机制并不适用于服务端渲染场景。
• 错误边界自身的错误：错误边界本身如果出现错误，它自身无法捕获。例如，componentDidCatch 方法内部抛出错误，这个错误不能被当前错误边界捕获，可能会导致应用崩溃。

class MyErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 模拟在componentDidCatch内部抛出错误
    throw new Error('Error in error boundary');
  }
  render() {
    return this.props.children;
  }
}