Angular 앱에서 rxjs 관련 메모리 누수를 감지하는 방법

Angular 앱에서 rxjs 관련 메모리 누수를 감지하는 방법

관찰 가능한 구독을 "남겼음" 또는 "현재 활성 상태"로 탐지할 수 있는 도구 또는 기술이 있습니까?

최근에 "가입 취소" 호출이 누락되어 구성 요소가 활성화된 상태로 유지되는 상당히 심각한 메모리 누수를 발견했습니다.저는 "takeUntil" 접근법에 대해 읽었는데 꽤 괜찮은 것 같습니다.https://stackoverflow.com/a/41177163/2050306

하지만 저는 여전히 그것을 위한 도구(브라우저 확장 등)가 있는지 궁금합니다.제가 알기로는 8월은 이 지역을 포함하지 않습니다.

모든 의견을 주셔서 대단히 감사합니다.

고지 사항:저는 아래에 언급한 도구의 작성자입니다.

이 작업은 새 헤드라인 등록이 추가되는 목록을 유지하고 구독을 취소한 후 이 목록에서 헤드라인 등록을 제거하여 수행할 수 있습니다.

문제가 되는 부분은 구독을 관찰하는 것입니다.이를 달성하기 위한 간단한 방법은 원숭이 패치입니다.Observable#subscribe()방법, 즉 관찰 가능한 프로토타입 방법을 대체합니다.

이것은 관찰 가능한 라이브러리(즉, 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,
            });
        }
    });

그냥 전화하세요.stopProfiler()보고서를 원하는 경우 devtools 콘솔에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/54658614/how-to-detect-rxjs-related-memory-leaks-in-angular-apps