ReactJS error overlay触发规则疑问：已捕获错误为何仍会弹出？

错误弹窗的触发逻辑 #

Create React App 开发环境的错误弹窗（error overlay）仅监听全局的error（同步未捕获错误）和unhandledrejection（Promise未处理拒绝）事件触发，和错误本身的类型没有必然关联。

你遇到的两种错误表现不一致，核心原因是两者的抛出上下文和后续处理链的差异：

• 你手动throw的错误，大概率是在中间件处理完错误逻辑后，又将错误重新抛出，且上层调用API的代码没有写对应catch块捕获这个返回的rejected Promise，最终触发了全局unhandledrejection事件，所以弹窗触发。
• response.json()抛出的语法错误，是fetch API原生逻辑内部产生的reject，你在中间件的catch块捕获处理后没有继续抛出，没有产生未处理的Promise拒绝，因此不会触发全局事件，自然不会弹窗。
  你主动抛出SyntaxError也会触发弹窗，也符合上面的逻辑：只要产生了未被业务代码捕获的Promise拒绝/同步错误，就会触发全局事件弹出overlay。

生产环境是否有风险 #

完全不需要担心生产环境会受这个现象影响：

• error overlay是开发环境专属的工具模块，生产构建时不会被打包进代码。
• 只要你已经确认所有API错误都被中间件捕获，且有对应的用户提示逻辑，不管开发环境弹窗是否弹出，生产环境都不会因为这些异步请求错误崩溃。异步代码中未被捕获的错误，在生产环境最多只会在控制台打印警告，不会导致页面白屏或者功能不可用。

是否需要处理这个问题 #

看开发体验需求即可：

• 如果频繁弹窗影响开发效率，只需要检查API中间件的catch逻辑：如果不需要上层调用方额外处理错误，就不要在catch块末尾重新抛出错误；如果需要保留抛出逻辑，就在上层调用API的地方补充空catch块即可。
• 如果不介意手动关闭弹窗，完全可以不做任何处理，不会对功能或者生产环境产生任何负面影响。

你观察到的JSON.parse错误不触发弹窗、其他自定义错误触发弹窗属于预期内的行为，并不是代码有隐藏问题的信号。

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