如何全局监控RxJS订阅以检测浏览器应用内存泄漏？

问题分析 #

你当前通过包装Observable.subscribe和Subscription.unsubscribe原型的方式出现计数器不准甚至负数，核心原因就是**unsubscribe是幂等设计**——RxJS允许重复调用该方法但不会抛出错误，这直接导致你的计数器被重复递减。

无需修改生产代码的解决方案 #

1. 优化原型包装方案（避免重复计数） #

给每个Subscription实例添加唯一标识，跟踪单个订阅的生命周期，确保每个订阅只被计数一次：

const activeSubscriptions = new Map<string, Subscription>();
let idCounter = 0;

// 保存原始subscribe方法
Object.defineProperty(Observable.prototype, '__originalSubscribe', {
  value: Observable.prototype.subscribe,
  writable: true,
  configurable: true
});

// 重写subscribe方法
Observable.prototype.subscribe = function<T>(
  observerOrNext?: Partial<Observer<T>> | ((value: T) => void)
): Subscription {
  const sub = (this as Observable<T>)['__originalSubscribe'](observerOrNext);
  const subId = `sub-${idCounter++}`;
  activeSubscriptions.set(subId, sub);
  
  // 给当前订阅实例单独绑定unsubscribe逻辑，不污染原型
  const originalUnsubscribe = sub.unsubscribe;
  sub.unsubscribe = () => {
    if (activeSubscriptions.has(subId)) {
      originalUnsubscribe.call(sub);
      activeSubscriptions.delete(subId);
    }
  };
  
  console.log('当前活跃订阅数:', activeSubscriptions.size);
  return sub;
};

该方案通过实例级的unsubscribe覆盖，避免了原型方法被重复调用导致的计数错误。

2. TypeScript转换器方案（编译期注入监控） #

编写TS转换器，在编译阶段自动给所有subscribe调用添加跟踪逻辑，完全不侵入生产代码：

import * as ts from 'typescript';

export function createRxJSTrackerTransformer(): ts.TransformerFactory<ts.SourceFile> {
  return (context) => {
    const visitor: ts.Visitor = (node) => {
      // 识别Observable.subscribe调用节点
      if (ts.isCallExpression(node) && 
          ts.isPropertyAccessExpression(node.expression) && 
          node.expression.name.text === 'subscribe') {
        // 生成订阅跟踪代码（可扩展为记录调用栈、订阅ID等）
        const trackStmt = ts.createExpressionStatement(
          ts.createCall(
            ts.createPropertyAccess(ts.createIdentifier('console'), 'log'),
            undefined,
            [ts.createStringLiteral(`订阅创建: ${node.getFullText().trim()}`)]
          )
        );
        // 将跟踪代码与原调用合并
        return ts.createBlock([trackStmt, node], true);
      }
      return ts.visitEachChild(node, visitor, context);
    };
    return (sourceFile) => ts.visitNode(sourceFile, visitor);
  };
}

在tsconfig.json的compilerOptions.transformers中配置该转换器，编译时自动注入监控逻辑。

3. 轻量级全局监控工具 #

封装单例工具类管理所有活跃订阅，支持快照导出、调用栈记录等功能：

class SubscriptionTracker {
  private activeSubs = new Map<string, { sub: Subscription; stack: string }>();
  private idCounter = 0;

  track(sub: Subscription): void {
    const subId = `sub-${this.idCounter++}`;
    this.activeSubs.set(subId, {
      sub,
      stack: new Error().stack || ''
    });

    const originalUnsubscribe = sub.unsubscribe;
    sub.unsubscribe = () => {
      if (this.activeSubs.has(subId)) {
        originalUnsubscribe.call(sub);
        this.activeSubs.delete(subId);
      }
    };
  }

  getActiveSubsSnapshot(): Array<{ id: string; stack: string }> {
    return Array.from(this.activeSubs.entries()).map(([id, data]) => ({
      id,
      stack: data.stack
    }));
  }
}

// 全局实例
const tracker = new SubscriptionTracker();

// 绑定到Observable原型
Object.defineProperty(Observable.prototype, '__originalSubscribe', {
  value: Observable.prototype.subscribe
});
Observable.prototype.subscribe = function<T>(...args): Subscription {
  const sub = (this as Observable<T>)['__originalSubscribe'](...args);
  tracker.track(sub);
  console.log('活跃订阅数:', tracker.getActiveSubsSnapshot().length);
  return sub;
};

额外排查技巧 #

• 使用浏览器DevTools的内存快照功能，对比操作前后的Subscription实例数量，确认泄漏存在
• 保存订阅创建时的调用栈，泄漏时可直接定位到代码中未取消订阅的位置
• 重点排查长期订阅场景：如路由守卫、WebSocket连接、全局状态监听等，这类场景最容易因未取消订阅引发泄漏

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