如何检测 Angular 应用程序中与 rxjs 相关的内存泄漏

Question

是否有任何工具或技术可以检测 "left behind" 或 "currently alive" 可观察对象、订阅。

最近刚发现一个非常严重的内存泄漏，其中组件由于缺少 "unsubscribe" 调用而保持活动状态。我读到了 "takeUntil" 方法，这似乎很不错。

但是我仍然想知道是否有任何工具（浏览器扩展等）。据我所知，Augury 不包括这个区域。

非常感谢所有意见。

Answer 1

免责声明：我是下面提到的工具的作者。

这可以通过保留添加新订阅的列表，并在取消订阅后从该列表中删除订阅来实现。

麻烦的部分是观察订阅。实现这一点的一种直接方法是通过猴子修补 Observable#subscribe() 方法，即替换 Observable 原型方法。

这是 observable-profiler 的总体方法，它是一种开发工具，可以挂接到 Observable 库（即 rxjs）并在控制台中打印泄漏订阅。

使用分析器的一种简单方法是在应用启动后开始跟踪，然后在一段时间后停止跟踪：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Observable } from 'rxjs';
import { setup, track, printSubscribers } from 'observable-profiler';

setup(Observable);
platformBrowserDynamic([])
    .bootstrapModule(AppModule)
    .then(ref => {
        track();
        window.stopProfiler = () => {
            ref.destroy();
            const subscribers = track(false);
            printSubscribers({
                subscribers,
            });
        }
    });

一旦你想要一个报告，只需在 devtools 控制台中调用 stopProfiler()。

如何检测 Angular 应用程序中与 rxjs 相关的内存泄漏

How to detect rxjs related memory leaks in Angular apps

javascript

rxjs

typescript

angular

rxjs6