fix: prevent invalid media processing

.changeset/tiny-rabbits-chew.md

@@ -0,0 +1,5 @@
+---
+"rrweb": patch
+---
+
+Make sure MediaInteraction events / mutations are only processed on MediaElements + exit early in addMediaElements if a MediaElement is a blocked element

packages/rrweb/src/replay/index.ts

@@ -932,7 +932,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 +951,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 +1075,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(
@@ -1303,14 +1303,17 @@
           return this.debugNodeNotFound(d, d.id);
         }
         const mediaEl = target as HTMLMediaElement | RRMediaElement;
-        const { events } = this.service.state.context;
-
-        this.mediaManager.mediaMutation({
-          target: mediaEl,
-          timeOffset: e.timestamp - events[0].timestamp,
-          mutation: d,
-        });
-
+        // sometimes we receive MediaInteraction events on non-media elements (e.g. DIV)
+        // only process media mutations on supported media elements to prevent errors during playback
+        if (this.mediaManager.isSupportedMediaElement(mediaEl)) {
+          const { events } = this.service.state.context;
+
+          this.mediaManager.mediaMutation({
+            target: mediaEl,
+            timeOffset: e.timestamp - events[0].timestamp,
+            mutation: d,
+          });
+        }
         break;
       }
       case IncrementalSource.StyleSheetRule:
@@ -1396,7 +1399,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) {
@@ -1513,7 +1516,7 @@
         // 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/media/index.ts

@@ -210,6 +210,12 @@ export class MediaManager {
     const target = node as HTMLMediaElement;
     const serializedNode = mirror.getMeta(target);
     if (!serializedNode || !('attributes' in serializedNode)) return;
+
+    // don't process if the media element is blocked
+    const isBlockedMediaElement =
+      serializedNode.attributes.rr_width || serializedNode.attributes.rr_height;
+    if (isBlockedMediaElement) return;
+
     const playerIsPaused = this.service.state.matches('paused');
     const mediaAttributes = serializedNode.attributes as
       | mediaAttributes
@@ -285,7 +291,9 @@ export class MediaManager {
     this.syncTargetWithState(target);
   }
 
-  public isSupportedMediaElement(node: Node): node is HTMLMediaElement {
+  public isSupportedMediaElement(
+    node: Node | RRMediaElement,
+  ): node is HTMLMediaElement | RRMediaElement {
     return ['AUDIO', 'VIDEO'].includes(node.nodeName);
   }