Create React App中ErrorBoundary提示一闪而过，componentDidCatch未触发

嘿，我来帮你拆解这个问题～ 你遇到的情况其实是Create React App（CRA）开发模式下的默认行为，不是你的代码写错了哦，让我慢慢给你解释：

为什么会出现完整错误栈？ #

CRA在开发环境中内置了一个错误叠加层（Error Overlay），它的优先级很高——当你的组件抛出错误时，ErrorBoundary确实会捕获到错误并显示你的提示，但这个叠加层会立刻弹出来覆盖它，给你展示详细的错误栈信息，方便你调试代码。这就是为什么你的"Sorry, an error occurred"只显示一秒就被替换了。

为什么componentDidCatch的日志没打印？ #

其实它大概率是执行了的！你可以仔细看看浏览器控制台——React在开发模式下，会在捕获错误后重新抛出错误，让叠加层能获取到错误信息，这可能会让你的日志被后面的错误输出淹没，你得往上翻一翻控制台记录。如果确实没打印，可以检查下：

• ErrorBoundary组件是否正确导入并包裹了Foo组件（从你的代码看是没问题的）
• 有没有其他更高层级的ErrorBoundary提前捕获了错误？

怎么验证ErrorBoundary的效果？ #

有两种方式可以看到你的ErrorBoundary正常工作：

1. 关闭错误叠加层：在弹出的错误叠加层右上角，点击那个关闭按钮（×），就能看到你的ErrorBoundary提示了。
2. 生产模式测试：执行npm run build构建项目，然后用serve build（需要先全局安装serve：npm install -g serve）启动生产环境的服务，此时错误叠加层不会出现，你的ErrorBoundary提示会稳定显示。

额外优化建议 #

虽然你的代码逻辑没问题，但可以稍微优化下：

• componentDidCatch里更新state不需要展开之前的state，直接写this.setState({ hasError: true })就可以了，因为你只修改hasError这一个状态。
• 如果需要更规范的错误处理，可以结合static getDerivedStateFromError来更新状态，用componentDidCatch专门做错误日志记录，比如：

static getDerivedStateFromError(error) {
  return { hasError: true };
}

componentDidCatch(error, info) {
  console.log("Catching an error:", error, info);
  // 这里可以把错误上报到日志系统
}

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