React Error Boundary间歇性用通用错误消息屏蔽真实错误

1. 处理异步代码中的错误 #

React 16.x的Error Boundary默认不捕获异步操作（如setTimeout、fetch、Promise回调）内的错误。如果错误出现在异步逻辑中，需要手动用try/catch包裹，并将错误重新抛出到同步上下文：

async fetchData() {
  try {
    const res = await fetch('/api/data');
    const data = await res.json();
    // 数据处理逻辑
  } catch (err) {
    // 重新抛出错误，让Error Boundary捕获
    throw err;
  }
}

2. 升级React版本 #

React 16.12.0存在一些Error Boundary的已知缺陷，后续的17.x、18.x版本修复了生产环境下错误信息丢失的问题。如果项目依赖允许，升级到稳定的新版本能直接解决这类间歇性问题。

3. 确保错误对象的完整性 #

部分场景下浏览器会包装原始错误，导致message丢失。可以在组件内抛出错误时，手动构造完整的错误对象：

try {
  // 可能触发错误的代码
} catch (originalErr) {
  const wrappedErr = new Error(originalErr.message);
  wrappedErr.stack = originalErr.stack;
  throw wrappedErr;
}

4. 排除浏览器DevTools干扰 #

即使在生产环境测试，若浏览器DevTools开启了"Pause on exceptions"选项，可能会干扰React的错误捕获逻辑。关闭该选项后重新测试，避免错误信息被篡改。

5. 检查Error Boundary的覆盖范围 #

确保Error Boundary包裹了所有可能抛出错误的组件，包括动态加载的组件（如React.lazy加载的组件）。如果错误发生在边界未覆盖的区域，会触发React的默认错误处理，导致通用错误消息出现。

内容的提问来源于stack exchange，提问作者Brennan Mann