fix: memory leaks fix #1707

packages/rrweb-snapshot/src/snapshot.ts

@@ -16,6 +16,7 @@
   attributes,
   mediaAttributes,
   DataURLOptions,
+  listenerHandler,
 } from '@rrweb/types';
 import {
   Mirror,
@@ -282,7 +283,7 @@
     // should warn? maybe a text node isn't attached to a parent node yet?
     return false;
   } else {
     el = dom.parentElement(node)!;
   }
   try {
     if (typeof maskTextClass === 'string') {
@@ -312,6 +313,7 @@
   iframeEl: HTMLIFrameElement,
   listener: () => unknown,
   iframeLoadTimeout: number,
+  signal: AbortSignal,
 ) {
   const win = iframeEl.contentWindow;
   if (!win) {
@@ -326,41 +328,64 @@
   } catch (error) {
     return;
   }
+
+  if (signal.aborted) return;
+
+  const handlers: listenerHandler[] = [];
+  const removeEventListener = () => handlers.forEach((h) => h());
+  handlers.push(() => signal.removeEventListener('abort', removeEventListener));
+  signal.addEventListener('abort', removeEventListener);
+
   if (readyState !== 'complete') {
     const timer = setTimeout(() => {
+      removeEventListener();
       if (!fired) {
         listener();
         fired = true;
       }
     }, iframeLoadTimeout);
-    iframeEl.addEventListener('load', () => {
-      clearTimeout(timer);
+    handlers.push(() => clearTimeout(timer));
+
+    const onIframeLoaded = () => {
+      removeEventListener();
       fired = true;
       listener();
-    });
+    };
+    handlers.push(() => iframeEl.removeEventListener('load', onIframeLoaded));
+
+    iframeEl.addEventListener('load', onIframeLoaded);
     return;
   }
   // check blank frame for Chrome
   const blankUrl = 'about:blank';
+  const onIframeLoaded = () => {
+    removeEventListener();
+    listener();
+  };
   if (
     win.location.href !== blankUrl ||
     iframeEl.src === blankUrl ||
     iframeEl.src === ''
   ) {
     // iframe was already loaded, make sure we wait to trigger the listener
     // till _after_ the mutation that found this iframe has had time to process
-    setTimeout(listener, 0);
+    const timer = setTimeout(() => {
+      removeEventListener();
+      listener();
+    }, 0);
+    handlers.push(() => clearTimeout(timer));
 
-    return iframeEl.addEventListener('load', listener); // keep listing for future loads
+    return iframeEl.addEventListener('load', onIframeLoaded); // keep listing for future loads
   }
   // use default listener
-  iframeEl.addEventListener('load', listener);
+  iframeEl.addEventListener('load', onIframeLoaded);
 }
 
 function onceStylesheetLoaded(
   link: HTMLLinkElement,
   listener: () => unknown,
   styleSheetLoadTimeout: number,
+  signal: AbortSignal,
 ) {
   let fired = false;
   let styleSheetLoaded: StyleSheet | null;
@@ -371,19 +396,30 @@
   }
 
   if (styleSheetLoaded) return;
+  if (signal.aborted) return;
+
+  const handlers: listenerHandler[] = [];
+  const removeEventListener = () => handlers.forEach((h) => h());
+  handlers.push(() => signal.removeEventListener('abort', removeEventListener));
+  signal.addEventListener('abort', removeEventListener);
 
   const timer = setTimeout(() => {
+    removeEventListener();
     if (!fired) {
       listener();
       fired = true;
     }
   }, styleSheetLoadTimeout);
+  handlers.push(() => clearTimeout(timer));
 
-  link.addEventListener('load', () => {
-    clearTimeout(timer);
+  const onStylesheetLoaded = () => {
+    removeEventListener();
     fired = true;
     listener();
-  });
+  };
+
+  link.addEventListener('load', onStylesheetLoaded);
+  handlers.push(() => link.removeEventListener('load', onStylesheetLoaded));
 }
 
 function serializeNode(
@@ -702,10 +738,10 @@
     const recordInlineImage = () => {
       image.removeEventListener('load', recordInlineImage);
       try {
         canvasService!.width = image.naturalWidth;
         canvasService!.height = image.naturalHeight;
         canvasCtx!.drawImage(image, 0, 0);
         attributes.rr_dataURL = canvasService!.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality,
         );
@@ -907,6 +943,7 @@
     maskTextSelector: string | null;
     skipChild: boolean;
     inlineStylesheet: boolean;
+    signal: AbortSignal;
     newlyAddedElement?: boolean;
     maskInputOptions?: MaskInputOptions;
     needsMask?: boolean;
@@ -956,6 +993,7 @@
     keepIframeSrcFn = () => false,
     newlyAddedElement = false,
     cssCaptured = false,
+    signal,
   } = options;
   let { needsMask } = options;
   let { preserveWhiteSpace = true } = options;
@@ -1052,6 +1090,7 @@
       maskTextSelector,
       skipChild,
       inlineStylesheet,
+      signal,
       maskInputOptions,
       maskTextFn,
       maskInputFn,
@@ -1128,6 +1167,7 @@
             maskTextSelector,
             skipChild: false,
             inlineStylesheet,
+            signal,
             maskInputOptions,
             maskTextFn,
             maskInputFn,
@@ -1153,6 +1193,7 @@
         }
       },
       iframeLoadTimeout,
+      signal,
     );
   }
 
@@ -1180,6 +1221,7 @@
             maskTextSelector,
             skipChild: false,
             inlineStylesheet,
+            signal,
             maskInputOptions,
             maskTextFn,
             maskInputFn,
@@ -1205,6 +1247,7 @@
         }
       },
       stylesheetLoadTimeout,
+      signal,
     );
   }
 
@@ -1240,6 +1283,7 @@
     ) => unknown;
     stylesheetLoadTimeout?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
+    signal?: AbortSignal;
   },
 ): serializedNodeWithId | null {
   const {
@@ -1249,6 +1293,7 @@
     maskTextClass = 'rr-mask',
     maskTextSelector = null,
     inlineStylesheet = true,
+    signal = new AbortController().signal,
     inlineImages = false,
     recordCanvas = false,
     maskAllInputs = false,
@@ -1316,6 +1361,7 @@
     maskTextSelector,
     skipChild: false,
     inlineStylesheet,
+    signal,
     maskInputOptions,
     maskTextFn,
     maskInputFn,

packages/rrweb/src/record/index.ts

@@ -353,6 +353,8 @@
     mirror,
   });
 
+  let abortController = new AbortController();
+
   takeFullSnapshot = (isCheckout = false) => {
     if (!recordDOM) {
       return;
@@ -375,6 +377,8 @@
     shadowDomManager.init();
 
     mutationBuffers.forEach((buf) => buf.lock()); // don't allow any mirror modifications during snapshotting
+    abortController.abort();
+    abortController = new AbortController();
     const node = snapshot(document, {
       mirror,
       blockClass,
@@ -409,6 +413,7 @@
         stylesheetManager.attachLinkElement(linkEl, childSn);
       },
       keepIframeSrcFn,
+      signal: abortController.signal,
     });
 
     if (!node) {
@@ -557,7 +562,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -575,7 +580,7 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
         handlers.push(observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);
@@ -618,6 +623,7 @@
     }
     return () => {
       handlers.forEach((h) => h());
+      abortController.abort();
       processedNodeManager.destroy();
       recording = false;
       unregisterErrorHandler();

packages/rrweb/src/record/mutation.ts

@@ -193,6 +193,7 @@
   private canvasManager: observerParam['canvasManager'];
   private processedNodeManager: observerParam['processedNodeManager'];
   private unattachedDoc: HTMLDocument;
+  private serializeAbortController: AbortController = new AbortController();
 
   public init(options: MutationBufferParam) {
     (
@@ -262,6 +263,9 @@
   };
 
   public emit = () => {
+    this.serializeAbortController.abort();
+    this.serializeAbortController = new AbortController();
+
     if (this.frozen || this.locked) {
       return;
     }
@@ -351,6 +355,7 @@
           this.stylesheetManager.attachLinkElement(link, childSn);
         },
         cssCaptured,
+        signal: this.serializeAbortController.signal,
       });
       if (sn) {
         adds.push({
@@ -363,13 +368,13 @@
     };
 
     while (this.mapRemoves.length) {
       this.mirror.removeNodeFromMap(this.mapRemoves.shift()!);
     }
 
     for (const n of this.movedSet) {
       if (
         isParentRemoved(this.removesSubTreeCache, n, this.mirror) &&
         !this.movedSet.has(dom.parentNode(n)!)
       ) {
         continue;
       }
@@ -521,6 +526,10 @@
     this.mutationCb(payload);
   };
 
+  public destroy() {
+    this.serializeAbortController.abort();
+  }
+
   private genTextAreaValueMutation = (textarea: HTMLTextAreaElement) => {
     let item = this.attributeMap.get(textarea);
     if (!item) {
@@ -836,7 +845,7 @@
 function _isParentRemoved(
   removes: Set<Node>,
   n: Node,
   _mirror: Mirror,
 ): boolean {
   const node: ParentNode | null = dom.parentNode(n);
   if (!node) return false;

packages/rrweb/src/record/observer.ts

@@ -81,7 +81,7 @@
 export function initMutationObserver(
   options: MutationBufferParam,
   rootEl: Node,
-): MutationObserver {
+): listenerHandler {
   const mutationBuffer = new MutationBuffer();
   mutationBuffers.push(mutationBuffer);
   // see mutation.ts for details
@@ -99,7 +99,15 @@
     childList: true,
     subtree: true,
   });
-  return observer;
+
+  return () => {
+    observer.disconnect();
+    mutationBuffer.destroy();
+    const idx = mutationBuffers.indexOf(mutationBuffer);
+    if (idx > -1) {
+      mutationBuffers.splice(idx, 1);
+    }
+  };
 }
 
 function initMoveObserver({
@@ -131,7 +139,7 @@
           | IncrementalSource.TouchMove
           | IncrementalSource.Drag,
       ) => {
         const totalOffset = Date.now() - timeBaseline!;
         mousemoveCb(
           positions.map((p) => {
             p.timeOffset -= totalOffset;
@@ -1306,9 +1314,9 @@
   }
 
   mergeHooks(o, hooks);
-  let mutationObserver: MutationObserver | undefined;
+  let removeMutationObserver: listenerHandler | undefined;
   if (o.recordDOM) {
-    mutationObserver = initMutationObserver(o, o.doc);
+    removeMutationObserver = initMutationObserver(o, o.doc);
   }
   const mousemoveHandler = initMoveObserver(o);
   const mouseInteractionHandler = initMouseInteractionObserver(o);
@@ -1350,7 +1358,7 @@
 
   return callbackWrapper(() => {
     mutationBuffers.forEach((b) => b.reset());
-    mutationObserver?.disconnect();
+    removeMutationObserver?.();
     mousemoveHandler();
     mouseInteractionHandler();
     scrollHandler();

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -53,7 +53,7 @@ export class ShadowDomManager {
     if (!isNativeShadowDom(shadowRoot)) return;
     if (this.shadowDoms.has(shadowRoot)) return;
     this.shadowDoms.add(shadowRoot);
-    const observer = initMutationObserver(
+    const removeObserver = initMutationObserver(
       {
         ...this.bypassOptions,
         doc,
@@ -63,7 +63,7 @@ export class ShadowDomManager {
       },
       shadowRoot,
     );
-    this.restoreHandlers.push(() => observer.disconnect());
+    this.restoreHandlers.push(() => removeObserver());
     this.restoreHandlers.push(
       initScrollObserver({
         ...this.bypassOptions,