调试Angular应用时如何查看所有未完成的Observables

官方调试工具支持 #

目前RxJS官方提供的RxJS DevTools浏览器扩展可以直接实现该需求，支持Chrome、Edge主流浏览器，无需额外复杂配置：

1. 开发环境下项目入口引入以下代码开启调试模式：
   import { setRxjsDevMode } from 'rxjs'; setRxjsDevMode(true);
2. 启动应用后打开扩展面板，即可看到全量Observable的运行状态，可筛选仅展示*活跃（未完成、未取消订阅）*的实例，还能查看每个Observable的订阅调用栈、已推送值、订阅者数量等信息，快速定位泄漏的订阅来源。

自定义全局追踪方案 #

如果不想依赖扩展，也可以通过给Observable打补丁的方式手动实现全局状态追踪，仅需要在开发环境的入口文件引入以下代码：

import { Observable, Subscription } from 'rxjs';

// 存储所有活跃Observable的信息
const activeObservables = new Map<string, {
  instance: Observable<unknown>,
  subscribeStack: string,
  createTime: number
}>();

// 劫持原订阅逻辑
const originSubscribe = Observable.prototype.subscribe;
Observable.prototype.subscribe = function (...args) {
  const subId = crypto.randomUUID();
  // 记录订阅调用栈，方便定位泄漏位置
  const subscribeStack = new Error('订阅调用栈').stack || '';
  activeObservables.set(subId, {
    instance: this,
    subscribeStack,
    createTime: Date.now()
  });

  const subscription = originSubscribe.apply(this, args) as Subscription;
  
  // 劫持取消订阅/完成逻辑，移除活跃记录
  const originUnsubscribe = subscription.unsubscribe;
  subscription.unsubscribe = function () {
    activeObservables.delete(subId);
    originUnsubscribe.apply(this, arguments);
  };

  // 监听流结束事件（complete/error触发的自动结束）
  subscription.add(() => activeObservables.delete(subId));
  return subscription;
};

// 挂载全局方法，随时在控制台调用查看未完成的Observable
declare global {
  interface Window {
    getActiveObservables: () => Array<{instance: Observable<unknown>, subscribeStack: string, createTime: number}>
  }
}
window.getActiveObservables = () => Array.from(activeObservables.values());

需要排查泄漏时，直接在浏览器控制台执行getActiveObservables()即可获取当前所有未完成的Observable列表，查看每个实例的subscribeStack属性就能直接定位到对应订阅的代码位置。

Angular 场景下的订阅泄漏规避建议 #

• 优先使用Angular内置的async管道消费Observable，框架会自动在组件销毁时取消订阅，完全避免手动管理的泄漏风险
• 手动订阅的场景统一使用takeUntil(this.destroy$)的写法，在组件ngOnDestroy钩子中触发destroy$发射值，批量取消当前组件所有关联订阅
• 开发环境开启RxJS严格模式，可提前捕获未处理的订阅错误和潜在泄漏风险

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