Angular 9升级后生产构建报循环结构转JSON错误

看起来你遇到的问题核心是循环引用对象被尝试用JSON.stringify()序列化，从报错信息里的_zoneDelegate和zone能看出，这个循环来自Angular的Zone.js相关对象，通常出现在全局错误处理、日志上报（比如你用的Sentry）或者Firebase依赖的集成代码里。

下面是具体的排查和修复步骤：

1. 定位错误触发点 #

生产环境的压缩代码不好定位具体位置，你可以先开启source map重新构建，方便找到对应的源码行：

ng build --prod --configuration production --source-map

构建完成后在Chrome控制台点击报错的main-es2015...js行号，就能跳转到具体代码位置——大概率是在自定义错误处理器或者Sentry的错误上报逻辑里，尝试把包含Zone实例、组件上下文或者Firebase SDK对象的内容直接序列化了。

2. 常见问题场景&修复方案 #

场景1：自定义ErrorHandler里的错误序列化 #

如果项目里自定义了Angular的ErrorHandler，检查是不是在处理错误时直接把Error对象或者关联的error.context整个传给了JSON.stringify。Zone.js的对象本身存在循环引用，不能直接序列化。

修复：只提取需要的字段，比如：

@Injectable()
export class CustomErrorHandler extends ErrorHandler {
  handleError(error: any) {
    // 不要直接stringify整个error对象
    const errorInfo = {
      message: error.message,
      stack: error.stack,
      // 只提取你需要的具体字段，避免包含Zone或其他循环引用对象
      details: error.details ? JSON.stringify(error.details) : null
    };
    // 再把errorInfo传给上报或日志逻辑
    super.handleError(error);
  }
}

场景2：Firebase依赖升级后的对象序列化 #

升级Firebase后，某些SDK返回的对象（比如Auth的User实例、Firestore的DocumentSnapshot）包含内部循环引用，如果你在代码里尝试把这些对象直接序列化（比如存到localStorage、日志上报），就会触发这个错误。

修复：只提取纯数据部分，比如：

// 错误写法：直接序列化Firebase User对象
JSON.stringify(user); 

// 正确写法：提取需要的字段
const userData = {
  uid: user.uid,
  email: user.email,
  displayName: user.displayName
};
JSON.stringify(userData);

场景3：Sentry集成的配置问题 #

结合你提到的Sentry截图，大概率是Sentry在上报错误时尝试序列化了带循环引用的对象。检查Sentry的Angular集成代码，比如beforeSend钩子，是不是不小心处理了包含Zone的上下文对象。

修复：在Sentry配置里过滤掉循环引用的属性，或者只传递必要的错误信息：

Sentry.init({
  dsn: 'your-dsn',
  beforeSend(event) {
    // 移除可能包含循环引用的上下文字段
    delete event.contexts?.zone;
    // 或者只保留关键信息
    return event;
  }
});

3. 额外排查点 #

• 检查angular.json的production配置，虽然你禁用了Ivy，但可以尝试临时关闭buildOptimizer和aot，看看是不是构建优化导致的隐藏问题：

  "production": {
    "buildOptimizer": false,
    "aot": false,
    "ivy": false
  }
  

  如果关闭后正常，再逐步开启排查是哪个优化步骤出了问题。

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