升级最新CRA与Node 18后出现随机未捕获运行时错误

解决方案 #

1. 定位Cancel对象来源

Cancel对象一般来自异步操作的取消逻辑：比如axios请求取消、AbortController终止fetch请求、React Router快速切换路由时的导航取消。先排查项目中这类场景。

2. 全局过滤Cancel类型的未捕获Promise拒绝

在项目入口文件（如src/index.js）添加以下代码，阻止Cancel触发错误提示：

window.addEventListener('unhandledrejection', (event) => {
  // 根据项目中Cancel对象的实际特征调整判断条件
  const isCancel = event.reason && (event.reason.name === 'Cancel' || String(event.reason) === 'Cancel');
  if (isCancel) {
    event.preventDefault(); // 阻止错误覆盖层弹出
  }
});

3. 让Cancel对象继承Error（若为自定义Cancel）

如果是项目里自己实现的Cancel类，修改为继承Error，这样CRA的错误处理能正确识别并更友好处理：

class Cancel extends Error {
  constructor(message = 'Cancel') {
    super(message);
    this.name = 'Cancel';
  }
}

4. 自定义CRA的错误捕获逻辑（CRA 5+适用）

通过覆盖CRA提供的错误处理钩子，过滤Cancel错误：

if (process.env.NODE_ENV === 'development') {
  // 覆盖默认的错误捕获逻辑
  if (window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
    const originalCatch = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.catchRuntimeError;
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.catchRuntimeError = (error) => {
      // 过滤Cancel错误
      if (error?.message === 'Cancel' || error?.name === 'Cancel') {
        return false; // 返回false不显示错误提示
      }
      return originalCatch?.(error);
    };
  }
}

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