Feat/hanlde frames

packages/rrweb-snapshot/src/rebuild.ts

@@ -325,7 +325,14 @@ function buildNode(
               'rrweb-original-srcset',
               n.attributes.srcset as string,
             );
-          } else {
+          }
+          // Set the sandbox attribute on the iframe element will make it lose its contentDocument access and therefore cause additional playback errors.
+          else if (
+            (tagName === 'iframe' || tagName === 'frame') &&
+            name === 'sandbox'
+          )
+            continue;
+          else {
             node.setAttribute(name, value.toString());
           }
         } catch (error) {

packages/rrweb-snapshot/src/snapshot.ts

@@ -282,7 +282,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') {
@@ -702,10 +702,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,
         );
@@ -767,7 +767,10 @@
     };
   }
   // iframe
-  if (tagName === 'iframe' && !keepIframeSrcFn(attributes.src as string)) {
+  if (
+    (tagName === 'iframe' || tagName === 'frame') &&
+    !keepIframeSrcFn(attributes.src as string)
+  ) {
     if (!(n as HTMLIFrameElement).contentDocument) {
       // we can't record it directly as we can't see into it
       // preserve the src attribute so a decision can be taken at replay time
@@ -1111,7 +1114,7 @@
 
   if (
     serializedNode.type === NodeType.Element &&
-    serializedNode.tagName === 'iframe'
+    (serializedNode.tagName === 'iframe' || serializedNode.tagName === 'frame')
   ) {
     onceIframeLoaded(
       n as HTMLIFrameElement,

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;
       }
@@ -602,7 +602,7 @@
 
         let item = this.attributeMap.get(m.target);
         if (
-          target.tagName === 'IFRAME' &&
+          (target.tagName === 'IFRAME' || target.tagName === 'FRAME') &&
           attributeName === 'src' &&
           !this.keepIframeSrcFn(value as string)
         ) {
@@ -836,7 +836,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/replay/index.ts

@@ -134,7 +134,7 @@
   private mouseTail: HTMLCanvasElement | null = null;
   private tailPositions: Array<{ x: number; y: number }> = [];
 
-  private emitter: Emitter = mitt();
+  private emitter: Emitter = mitt() as Emitter;
 
   private nextUserInteractionEvent: eventWithTime | null;
 
@@ -331,6 +331,8 @@
         this.applySelection(this.lastSelectionData);
         this.lastSelectionData = null;
       }
+
+      this.emitter.emit(ReplayerEvents.FlushEnd);
     });
     this.emitter.on(ReplayerEvents.PlayBack, () => {
       this.firstFullSnapshot = null;
@@ -525,6 +527,35 @@
     this.emitter.emit(ReplayerEvents.Start);
   }
 
+  /**
+   * Applies all events synchronously until the given event index.
+   * @param eventIndex - number
+   */
+  public replayEvent(eventIndex: number) {
+    const handleFinish = () => {
+      this.service.send('END');
+      this.emitter.off(ReplayerEvents.FlushEnd, handleFinish);
+    };
+    this.emitter.on(ReplayerEvents.FlushEnd, handleFinish);
+
+    if (this.service.state.matches('paused')) {
+      this.service.send({
+        type: 'PLAY_SINGLE_EVENT',
+        payload: { singleEvent: eventIndex },
+      });
+    } else {
+      this.service.send({ type: 'PAUSE' });
+      this.service.send({
+        type: 'PLAY_SINGLE_EVENT',
+        payload: { singleEvent: eventIndex },
+      });
+    }
+    this.iframe.contentDocument
+      ?.getElementsByTagName('html')[0]
+      ?.classList.remove('rrweb-paused');
+    this.emitter.emit(ReplayerEvents.Start);
+  }
+
   public pause(timeOffset?: number) {
     if (timeOffset === undefined && this.service.state.matches('playing')) {
       this.service.send({ type: 'PAUSE' });
@@ -558,6 +589,7 @@
     this.mediaManager.reset();
     this.config.root.removeChild(this.wrapper);
     this.emitter.emit(ReplayerEvents.Destroy);
+    this.emitter.all.clear();
   }
 
   public startLive(baselineTime?: number) {
@@ -932,7 +964,7 @@
         sn?.type === NodeType.Element &&
         sn?.tagName.toUpperCase() === 'HTML'
       ) {
         const { documentElement, head } = iframeEl.contentDocument!;
         this.insertStyleRules(
           documentElement as HTMLElement | RRElement,
           head as HTMLElement | RRElement,
@@ -951,14 +983,14 @@
     };
 
     buildNodeWithSN(mutation.node, {
       doc: iframeEl.contentDocument! as Document,
       mirror: mirror as Mirror,
       hackCss: true,
       skipChild: false,
       afterAppend,
       cache: this.cache,
     });
     afterAppend(iframeEl.contentDocument! as Document, mutation.node.id);
 
     for (const { mutationInQueue, builtNode } of collectedIframes) {
       this.attachDocumentToIframe(mutationInQueue, builtNode);
@@ -1075,7 +1107,7 @@
       const canvas = document.createElement('canvas');
       const ctx = canvas.getContext('2d');
       const imgd = ctx?.createImageData(canvas.width, canvas.height);
       ctx?.putImageData(imgd!, 0, 0);
     }
   }
   private async deserializeAndPreloadCanvasEvents(
@@ -1111,14 +1143,15 @@
     e: incrementalSnapshotEvent & { timestamp: number; delay?: number },
     isSync: boolean,
   ) {
-    const { data: d } = e;
+    const { data: d, timestamp } = e;
+
     switch (d.source) {
       case IncrementalSource.Mutation: {
         try {
           this.applyMutation(d, isSync);
         } catch (error) {
           // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/restrict-template-expressions
-          this.warn(`Exception in mutation ${error.message || error}`, d);
+          this.warn(`Exception in mutation ${String(error)}`, d, timestamp);
         }
         break;
       }
@@ -1396,7 +1429,7 @@
     // Only apply virtual dom optimization if the fast-forward process has node mutation. Because the cost of creating a virtual dom tree and executing the diff algorithm is usually higher than directly applying other kind of events.
     if (this.config.useVirtualDom && !this.usingVirtualDom && isSync) {
       this.usingVirtualDom = true;
       buildFromDom(this.iframe.contentDocument!, this.mirror, this.virtualDom);
       // If these legacy missing nodes haven't been resolved, they should be converted to virtual nodes.
       if (Object.keys(this.legacy_missingNodeRetryMap).length) {
         for (const key in this.legacy_missingNodeRetryMap) {
@@ -1509,11 +1542,24 @@
         return queue.push(mutation);
       }
 
+      if (
+        mutation.node.type === NodeType.Document &&
+        parent?.nodeName?.toLowerCase() !== 'iframe' &&
+        parent?.nodeName?.toLowerCase() !== 'frame'
+      ) {
+        console.warn(
+          '[Replayer] Skipping invalid document append to a non-iframe parent. hi2',
+          mutation,
+          parent,
+        );
+        return;
+      }
+
       if (mutation.node.isShadow) {
         // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
         if (!hasShadowRoot(parent)) {
           (parent as Element | RRElement).attachShadow({ mode: 'open' });
           parent = (parent as Element | RRElement).shadowRoot! as Node | RRNode;
         } else parent = parent.shadowRoot as Node | RRNode;
       }
 

packages/rrweb/src/replay/machine.ts

@@ -28,6 +28,12 @@
         timeOffset: number;
       };
     }
+  | {
+      type: 'PLAY_SINGLE_EVENT';
+      payload: {
+        singleEvent: number;
+      };
+    }
   | {
       type: 'CAST_EVENT';
       payload: {
@@ -78,6 +84,30 @@
   return events;
 }
 
+function discardPriorSnapshotsToEvent(
+  events: eventWithTime[],
+  targetIndex: number,
+) {
+  const targetEvent = events[targetIndex];
+
+  if (!targetEvent) {
+    return [];
+  }
+
+  for (let idx = targetIndex; idx >= 0; idx--) {
+    const event = events[idx];
+
+    if (!event) {
+      continue;
+    }
+
+    if (event.type === EventType.Meta) {
+      return events.slice(idx, targetIndex + 1);
+    }
+  }
+  return events;
+}
+
 type PlayerAssets = {
   emitter: Emitter;
   applyEventsSynchronously(events: Array<eventWithTime>): void;
@@ -119,6 +149,10 @@
               target: 'playing',
               actions: ['recordTimeOffset', 'play'],
             },
+            PLAY_SINGLE_EVENT: {
+              target: 'playing',
+              actions: ['playSingleEvent'],
+            },
             CAST_EVENT: {
               target: 'paused',
               actions: 'castEvent',
@@ -168,6 +202,23 @@
             baselineTime: ctx.events[0].timestamp + timeOffset,
           };
         }),
+
+        playSingleEvent(ctx, event) {
+          if (event.type !== 'PLAY_SINGLE_EVENT') {
+            return;
+          }
+
+          const { singleEvent } = event.payload;
+
+          const neededEvents = discardPriorSnapshotsToEvent(
+            ctx.events,
+            singleEvent,
+          );
+
+          applyEventsSynchronously(neededEvents);
+          emitter.emit(ReplayerEvents.Flush);
+        },
+
         play(ctx) {
           const { timer, events, baselineTime, lastPlayedEvent } = ctx;
           timer.clear();
@@ -209,7 +260,7 @@
                 doAction: () => {
                   castFn();
                 },
                 delay: event.delay!,
               });
             }
           }
@@ -271,7 +322,7 @@
                 doAction: () => {
                   castFn();
                 },
                 delay: event.delay!,
               });
             }
           }

packages/rrweb/src/utils.ts

@@ -32,7 +32,7 @@
   'now you can use replayer.getMirror() to access the mirror instance of a replayer,' +
   '\r\n' +
   'or you can use record.mirror to access the mirror instance during recording.';
 /** @deprecated */
 export let _mirror: DeprecatedMirror = {
   map: {},
   getId() {
@@ -116,7 +116,7 @@
           set(value) {
             // put hooked setter into event loop to avoid of set latency
             setTimeout(() => {
               d.set!.call(this, value);
             }, 0);
             if (original && original.set) {
               original.set.call(this, value);
@@ -364,7 +364,9 @@
   n: TNode,
   mirror: IMirror<TNode>,
 ): boolean {
-  return Boolean(n.nodeName === 'IFRAME' && mirror.getMeta(n));
+  return Boolean(
+    (n.nodeName === 'IFRAME' || n.nodeName === 'FRAME') && mirror.getMeta(n),
+  );
 }
 
 export function isSerializedStylesheet<TNode extends Node | RRNode>(

packages/types/src/index.ts

@@ -609,7 +609,7 @@
 export type customElementCallback = (c: customElementParam) => void;
 
 /**
  *  @deprecated
  */
 interface INode extends Node {
   __sn: serializedNodeWithId;
@@ -651,6 +651,7 @@
   on(type: string, handler: Handler): void;
   emit(type: string, event?: unknown): void;
   off(type: string, handler: Handler): void;
+  all: Map<string | symbol, Handler[]>;
 };
 
 export type Arguments<T> = T extends (...payload: infer U) => unknown
@@ -675,6 +676,7 @@
   EventCast = 'event-cast',
   CustomEvent = 'custom-event',
   Flush = 'flush',
+  FlushEnd = 'flush-end',
   StateChange = 'state-change',
   PlayBack = 'play-back',
   Destroy = 'destroy',