Vite项目中React Error Boundary无法捕获错误的问题排查

• React 类组件形式的ErrorBoundary存在明确的捕获边界，无法捕获事件处理器（如onClick、onInput这类用户交互绑定的回调函数）中抛出的错误。你当前测试用的错误是写在按钮的onClick回调里，属于事件触发阶段的错误，本身就不会进入ErrorBoundary的错误处理逻辑，自然不会触发getDerivedStateFromError和componentDidCatch。

ErrorBoundary默认仅能捕获以下场景抛出的错误：子组件渲染流程错误、子组件生命周期执行错误、子组件构造函数错误、渲染链路相关的setState触发的错误。以下场景的错误无法被ErrorBoundary捕获：事件处理器内部错误、异步回调（setTimeout、Promise等）错误、服务端渲染错误、ErrorBoundary组件自身抛出的错误。

• 你的代码还存在一处语法问题：ErrorBoundary渲染降级UI时，按钮onClick里的console.log("Error Found)缺少闭合引号，就算触发错误降级，这部分代码也会报语法错误。
• 补充：Vite开发环境默认自带全局错误遮罩层，当代码抛错时会先弹出遮罩覆盖页面，点击遮罩关闭按钮才能看到ErrorBoundary渲染的降级内容，不要把这个遮罩误判为ErrorBoundary不生效。

1. 区分错误场景处理：
   • 要验证ErrorBoundary的捕获能力，将错误放到子组件的渲染阶段抛出即可正常触发，比如写一个渲染时直接抛错的测试组件放在ErrorBoundary内部。
   • 事件处理器、异步回调里的错误，需要在对应逻辑内部自行写try/catch捕获处理，需要统一上报的话可以在catch块里调用错误上报接口，需要触发降级UI的话可以通过状态管理主动标记错误状态。
2. 修正代码里的语法错误，补全缺失的引号。

修正后的参考代码 #

可正常触发ErrorBoundary的测试用例 #

import './App.css';
// 渲染时抛错的测试组件，错误可被ErrorBoundary捕获
function BuggyTestComponent() {
  throw new Error('渲染阶段抛出的测试错误');
  return <div>正常内容</div>
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <ErrorBoundary>
          {/* 这个组件的错误会被正常捕获 */}
          <BuggyTestComponent />
          <button
            onClick={() => {
              // 事件回调内的错误自行捕获
              try {
                throw new Error('点击事件触发的错误');
              } catch (err) {
                console.error('事件错误捕获', err);
                // 这里可以做错误提示、上报等逻辑
                alert('操作出现异常');
              }
            }}
          >
            Click Me
          </button>
        </ErrorBoundary>
      </header>
    </div>
  );
}

export default App;

ErrorBoundary语法修正片段 #

// 替换原render方法里的降级UI部分
if (this.state.hasError) {
  console.log('errors found', this.state.hasError);
  return (
    <button
      onClick={() => console.log("Error Found")}
    >
      Report feedback
    </button>
  );
}

内容的提问来源于stack exchange，提问作者Sikander Ahmad