fix: memory leak mutation buffer on stop/start record (#1707)

Author: maksimr

packages/rrweb-snapshot/src/snapshot.ts

@@ -332,7 +332,7 @@ function onceIframeLoaded(
   if (signal.aborted) return;
 
   const handlers: listenerHandler[] = [];
-  const removeEventListener = () => handlers.forEach((h) => h())
+  const removeEventListener = () => handlers.forEach((h) => h());
   handlers.push(() => signal.removeEventListener('abort', removeEventListener));
   signal.addEventListener('abort', removeEventListener);
 
@@ -399,7 +399,7 @@ function onceStylesheetLoaded(
   if (signal.aborted) return;
 
   const handlers: listenerHandler[] = [];
-  const removeEventListener = () => handlers.forEach((h) => h())
+  const removeEventListener = () => handlers.forEach((h) => h());
   handlers.push(() => signal.removeEventListener('abort', removeEventListener));
   signal.addEventListener('abort', removeEventListener);
 

packages/rrweb/src/record/mutation.ts

@@ -526,6 +526,10 @@ export default class MutationBuffer {
     this.mutationCb(payload);
   };
 
+  public destroy() {
+    this.serializeAbortController.abort();
+  }
+
   private genTextAreaValueMutation = (textarea: HTMLTextAreaElement) => {
     let item = this.attributeMap.get(textarea);
     if (!item) {

packages/rrweb/src/record/observer.ts

@@ -81,7 +81,7 @@ function getEventTarget(event: Event | NonStandardEvent): EventTarget | null {
 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 @@ export function initMutationObserver(
     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({
@@ -1306,9 +1314,9 @@ export function initObservers(
   }
 
   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 @@ export function initObservers(
 
   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,