fix: clear mutation buffer and remove mirror node on iframe pagehide …

…event

.changeset/eleven-knives-rescue.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+To prevent mem leak, reset and clear mutation buffers and remove iframe node from mirror on iframes pagehide event

packages/rrweb/src/record/iframe-manager.ts

@@ -23,6 +23,7 @@
   private mutationCb: mutationCallBack;
   private wrappedEmit: (e: eventWithoutTime, isCheckout?: boolean) => void;
   private loadListener?: (iframeEl: HTMLIFrameElement) => unknown;
+  private pageHideListener?: (iframeEl: HTMLIFrameElement) => unknown;
   private stylesheetManager: StylesheetManager;
   private recordCrossOriginIframes: boolean;
 
@@ -58,6 +59,10 @@
     this.loadListener = cb;
   }
 
+  public addPageHideListener(cb: (iframeEl: HTMLIFrameElement) => unknown) {
+    this.pageHideListener = cb;
+  }
+
   public attachIframe(
     iframeEl: HTMLIFrameElement,
     childSn: serializedNodeWithId,
@@ -83,6 +88,11 @@
         this.handleMessage.bind(this),
       );
 
+    iframeEl.contentWindow?.addEventListener('pagehide', () => {
+      this.pageHideListener?.(iframeEl);
+      this.mirror.removeNodeFromMap(iframeEl.contentDocument!);
+      this.crossOriginIframeMap.delete(iframeEl.contentWindow!);
+    });
     this.loadListener?.(iframeEl);
 
     if (

packages/rrweb/src/record/index.ts

@@ -4,7 +4,7 @@
   type SlimDOMOptions,
   createMirror,
 } from 'rrweb-snapshot';
-import { initObservers, mutationBuffers } from './observer';
+import { initObservers, mutationBuffers, findAndRemoveIframeBuffer } from './observer';
 import {
   on,
   getWindowWidth,
@@ -437,6 +437,10 @@
 
   try {
     const handlers: listenerHandler[] = [];
+    const iframeHandlersMap = new Map<
+      HTMLIFrameElement,
+      listenerHandler
+    >();
 
     const observe = (doc: Document) => {
       return callbackWrapper(initObservers)(
@@ -557,7 +561,7 @@
             plugins
               ?.filter((p) => p.observer)
               ?.map((p) => ({
                 observer: p.observer!,
                 options: p.options,
                 callback: (payload: object) =>
                   wrappedEmit({
@@ -575,13 +579,22 @@
 
     iframeManager.addLoadListener((iframeEl) => {
       try {
-        handlers.push(observe(iframeEl.contentDocument!));
+        iframeHandlersMap.set(iframeEl, observe(iframeEl.contentDocument!));
       } catch (error) {
         // TODO: handle internal error
         console.warn(error);
       }
     });
 
+    iframeManager.addPageHideListener((iframeEl) => {
+      const iframeHandler = iframeHandlersMap.get(iframeEl);
+      if (iframeHandler) {
+        iframeHandler();
+        iframeHandlersMap.delete(iframeEl);
+      }
+      findAndRemoveIframeBuffer(iframeEl);
+    });
+
     const init = () => {
       takeFullSnapshot();
       handlers.push(observe(document));
@@ -618,6 +631,7 @@
     }
     return () => {
       handlers.forEach((h) => h());
+      iframeHandlersMap.forEach((h) => h());
       processedNodeManager.destroy();
       recording = false;
       unregisterErrorHandler();

packages/rrweb/src/record/mutation.ts

@@ -363,13 +363,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 +521,10 @@
     this.mutationCb(payload);
   };
 
+  public bufferBelongsToIframe = (iframeEl: HTMLIFrameElement) => {
+    return this.doc === iframeEl.contentDocument;
+  };
+
   private genTextAreaValueMutation = (textarea: HTMLTextAreaElement) => {
     let item = this.attributeMap.get(textarea);
     if (!item) {
@@ -836,7 +840,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

@@ -131,7 +131,7 @@
           | IncrementalSource.TouchMove
           | IncrementalSource.Drag,
       ) => {
         const totalOffset = Date.now() - timeBaseline!;
         mousemoveCb(
           positions.map((p) => {
             p.timeOffset -= totalOffset;
@@ -376,6 +376,16 @@
   return on('resize', updateDimension, win);
 }
 
+export function findAndRemoveIframeBuffer(iframeEl: HTMLIFrameElement) {
+  for (let i = mutationBuffers.length - 1; i >= 0; i--) {
+    const buf = mutationBuffers[i];
+    if (buf.bufferBelongsToIframe(iframeEl)) {
+      buf.reset();
+      mutationBuffers.splice(i, 1);
+    }
+  }
+}
+
 export const INPUT_TAGS = ['INPUT', 'TEXTAREA', 'SELECT'];
 const lastInputValueMap: WeakMap<EventTarget, inputValue> = new WeakMap();
 function initInputObserver({