feat(lens): a prototype for tracking leaked event listener in memory lens

Summary: This diff introduces a new prototype feature in Memory Lens for detecting event listener memory leaks. It achieves this by monkey-patching the `Element.prototype.addEventListener` and `Element.prototype.removeEventListener` methods to intercept event listener registrations and removals. The implementation maintains an internal mapping of DOM elements to their registered callbacks and tracks whether each element remains connected to the DOM. If a DOM element becomes detached but still has active event listeners that were never removed, the detector flags it as a potential memory leak. This helps identify scenarios where event listeners are not properly cleaned up, which can prevent garbage collection and lead to increased memory usage over time.

Differential Revision: D74155636

fbshipit-source-id: 12e28d780c577f4f6ffcbb837f2167b160483586

Author: JacksonGL

packages/lens/src/core/event-listener-tracker.ts

@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @oncall memory_lab
+ */
+import type {Fiber} from 'react-reconciler';
+import {getFiberNodeFromElement} from '../utils/react-fiber-utils';
+import {WeakMapPlus} from '../utils/weak-ref-utils';
+
+type EventListenerEntry = {
+  type: string;
+  cb: WeakRef<EventListenerOrEventListenerObject>;
+  options?: boolean | AddEventListenerOptions;
+  fiber?: WeakRef<Fiber>;
+};
+
+type DetachedListenerGroup = {
+  type: string;
+  count: number;
+  entries: WeakRef<EventListenerEntry>[];
+};
+
+export class EventListenerTracker {
+  private static instance: EventListenerTracker | null = null;
+  #listenerMap: WeakMapPlus<EventTarget, EventListenerEntry[]>;
+  #detachedListeners: Map<string, DetachedListenerGroup[]>;
+  #originalAddEventListener: typeof EventTarget.prototype.addEventListener;
+  #originalRemoveEventListener: typeof EventTarget.prototype.removeEventListener;
+
+  private constructor() {
+    this.#listenerMap = new WeakMapPlus({fallback: 'noop', cleanupMs: 100});
+    this.#detachedListeners = new Map();
+    this.#originalAddEventListener = EventTarget.prototype.addEventListener;
+    this.#originalRemoveEventListener =
+      EventTarget.prototype.removeEventListener;
+    this.#patchEventListeners();
+  }
+
+  static getInstance(): EventListenerTracker {
+    if (!EventListenerTracker.instance) {
+      EventListenerTracker.instance = new EventListenerTracker();
+    }
+    return EventListenerTracker.instance;
+  }
+
+  #patchEventListeners(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    EventTarget.prototype.addEventListener = function (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | AddEventListenerOptions,
+    ) {
+      self.#originalAddEventListener.call(this, type, listener, options);
+      if (this instanceof Element) {
+        const fiber = getFiberNodeFromElement(this);
+        const entry: EventListenerEntry = {
+          type,
+          cb: new WeakRef(listener),
+          options,
+          fiber: fiber ? new WeakRef(fiber) : undefined,
+        };
+        const listeners = self.#listenerMap.get(this) ?? [];
+        listeners.push(entry);
+        self.#listenerMap.set(this, listeners);
+      }
+    };
+
+    EventTarget.prototype.removeEventListener = function (
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | EventListenerOptions,
+    ) {
+      self.#originalRemoveEventListener.call(this, type, listener, options);
+      if (this instanceof Element) {
+        const listeners = self.#listenerMap.get(this);
+        if (listeners) {
+          const index = listeners.findIndex(
+            entry =>
+              entry.type === type &&
+              entry.cb.deref() === listener &&
+              entry.options === options,
+          );
+          if (index !== -1) {
+            listeners.splice(index, 1);
+          }
+          if (listeners.length === 0) {
+            self.#listenerMap.delete(this);
+          } else {
+            self.#listenerMap.set(this, listeners);
+          }
+        }
+      }
+    };
+  }
+
+  #unpatchEventListeners(): void {
+    EventTarget.prototype.addEventListener = this.#originalAddEventListener;
+    EventTarget.prototype.removeEventListener =
+      this.#originalRemoveEventListener;
+  }
+
+  addListener(
+    el: EventTarget,
+    type: string,
+    cb: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    el.addEventListener(type, cb, options);
+  }
+
+  removeListener(
+    el: EventTarget,
+    type: string,
+    cb: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    el.removeEventListener(type, cb, options);
+  }
+
+  scan(
+    getComponentName: (elRef: WeakRef<Element>) => string,
+  ): Map<string, DetachedListenerGroup[]> {
+    const detachedListeners = new Map<string, DetachedListenerGroup[]>();
+
+    for (const [el, listeners] of this.#listenerMap.entries()) {
+      if (el instanceof Element && !el.isConnected) {
+        for (const listener of listeners) {
+          // Skip if the callback has been garbage collected
+          if (!listener.cb.deref()) continue;
+
+          const componentName = getComponentName(new WeakRef(el));
+          if (!detachedListeners.has(componentName)) {
+            detachedListeners.set(componentName, []);
+          }
+
+          const groups = detachedListeners.get(componentName);
+          let group = groups?.find(g => g.type === listener.type);
+          if (!group) {
+            group = {
+              type: listener.type,
+              count: 0,
+              entries: [],
+            };
+            groups?.push(group);
+          }
+          group.count++;
+          group.entries.push(new WeakRef(listener));
+        }
+      }
+    }
+
+    this.#detachedListeners = detachedListeners;
+    return detachedListeners;
+  }
+
+  getDetachedListeners(): Map<string, DetachedListenerGroup[]> {
+    return this.#detachedListeners;
+  }
+
+  destroy(): void {
+    this.#unpatchEventListeners();
+    this.#listenerMap.destroy();
+    this.#detachedListeners.clear();
+    EventListenerTracker.instance = null;
+  }
+}

packages/lens/src/core/react-memory-scan.ts

@@ -17,6 +17,8 @@ import type {
   Optional,
   ScanResult,
   AnyValue,
+  EventListenerLeak,
+  Nullable,
 } from './types';
 import type {BasicExtension} from '../extensions/basic-extension';
 
@@ -28,6 +30,7 @@ import {
 } from '../utils/react-fiber-utils';
 import {DOMObserver} from './dom-observer';
 import {config} from '../config/config';
+import {EventListenerTracker} from './event-listener-tracker';
 
 export default class ReactMemoryScan {
   static nextElementId = 0;
@@ -43,13 +46,17 @@ export default class ReactMemoryScan {
   #extensions: Array<BasicExtension>;
   #scanIntervalMs: number;
   #domObserver: Optional<DOMObserver>;
+  #eventListenerTracker: Nullable<EventListenerTracker>;
 
   constructor(options: CreateOptions = {}) {
     this.#elementWeakRefs = [];
     this.#isActivated = false;
     this.#elementToBoundingRects = new WeakMap();
     this.#elementToComponentStack = new WeakMap();
     this.#knownFiberNodes = [];
+    this.#eventListenerTracker = options.trackEventListenerLeaks
+      ? EventListenerTracker.getInstance()
+      : null;
 
     this.#fiberAnalyzer = new ReactFiberAnalyzer();
     this.#intervalId = 0 as unknown as NodeJS.Timeout;
@@ -215,6 +222,19 @@ export default class ReactMemoryScan {
     }
   }
 
+  getCachedComponentName(elementRef: WeakRef<Element>): string {
+    const FALLBACK_NAME = '<Unknown>';
+    const element = elementRef.deref();
+    if (element == null) {
+      return FALLBACK_NAME;
+    }
+    const componentStack = this.#elementToComponentStack.get(element);
+    if (componentStack == null) {
+      return FALLBACK_NAME;
+    }
+    return componentStack[0] ?? FALLBACK_NAME;
+  }
+
   updateFiberNodes(fiberNodes: Array<WeakRef<Fiber>>): Array<WeakRef<Fiber>> {
     const knownFiberSet = new WeakSet<Fiber>();
     for (const fiberNode of this.#knownFiberNodes) {
@@ -284,6 +304,32 @@ export default class ReactMemoryScan {
     }
   }
 
+  #scanEventListenerLeaks(): EventListenerLeak[] {
+    if (this.#eventListenerTracker == null) {
+      return [];
+    }
+    // Scan for event listener leaks
+    const detachedListeners = this.#eventListenerTracker.scan(
+      this.getCachedComponentName.bind(this),
+    );
+    const eventListenerLeaks: EventListenerLeak[] = [];
+    for (const [componentName, listeners] of detachedListeners.entries()) {
+      const typeCount = new Map<string, number>();
+      for (const listener of listeners) {
+        const count = typeCount.get(listener.type) ?? 0;
+        typeCount.set(listener.type, count + 1);
+      }
+      for (const [type, count] of typeCount.entries()) {
+        eventListenerLeaks.push({
+          type,
+          componentName,
+          count,
+        });
+      }
+    }
+    return eventListenerLeaks;
+  }
+
   scan(): ScanResult {
     const start = Date.now();
     this.#runGC();
@@ -299,6 +345,11 @@ export default class ReactMemoryScan {
     );
     const leakedFibers = this.updateFiberNodes(scanResult.fiberNodes);
     scanResult.leakedFibers = leakedFibers;
+
+    // scan for event listener leaks
+    // TODO: show the results in the UI widget
+    scanResult.eventListenerLeaks = this.#scanEventListenerLeaks();
+
     (window as AnyValue).leakedFibers = this.packLeakedFibers(leakedFibers);
     const end = Date.now();
     this.#log(`scan took ${end - start}ms`);

packages/lens/src/core/types.ts

@@ -58,6 +58,7 @@ export type CreateOptions = {
   subscribers?: Array<AnalysisResultCallback>;
   extensions?: Array<BasicExtension>;
   scanIntervalMs?: number;
+  trackEventListenerLeaks?: boolean;
 };
 
 /**
@@ -68,6 +69,12 @@ export type CreateOptions = {
  * @property {number} totalDetachedElements - Number of detached DOM elements found
  * @property {Map<string, number>} detachedComponentToFiberNodeCount - Map of component names to their detached instance counts
  */
+export type EventListenerLeak = {
+  type: string;
+  componentName: string;
+  count: number;
+};
+
 export type ScanResult = {
   components: Set<string>;
   componentToFiberNodeCount: Map<string, number>;
@@ -76,6 +83,7 @@ export type ScanResult = {
   detachedComponentToFiberNodeCount: Map<string, number>;
   fiberNodes: Array<WeakRef<Fiber>>;
   leakedFibers: Array<WeakRef<Fiber>>;
+  eventListenerLeaks?: EventListenerLeak[];
 };
 
 /**
@@ -158,3 +166,15 @@ export type Config = {
   performance: PerformanceConfig;
   features: FeatureFlags;
 };
+
+export type Entry<K extends object, V> = {
+  ref: WeakRef<K>;
+  value: V;
+};
+
+export type FallbackMode = 'strong' | 'noop';
+
+export type WeakMapPlusOptions = {
+  fallback?: FallbackMode;
+  cleanupMs?: number;
+};