John/hig-1919-update-rrweb

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "record and replay the web",
   "scripts": {
     "test": "npm run bundle:browser && cross-env TS_NODE_CACHE=false TS_NODE_FILES=true mocha -r ts-node/register -r ignore-styles -r jsdom-global/register test/**.test.ts",

src/record/index.ts

@@ -18,9 +18,11 @@ import {
   listenerHandler,
   mutationCallbackParam,
   scrollCallback,
+  canvasMutationParam,
 } from '../types';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 
 function wrapEvent(e: event): eventWithTime {
   return {
@@ -180,11 +182,29 @@ function record<T = eventWithTime>(
         },
       }),
     );
+  const wrappedCanvasMutationEmit = (p: canvasMutationParam) =>
+    wrappedEmit(
+      wrapEvent({
+        type: EventType.IncrementalSnapshot,
+        data: {
+          source: IncrementalSource.CanvasMutation,
+          ...p,
+        },
+      }),
+    );
 
   const iframeManager = new IframeManager({
     mutationCb: wrappedMutationEmit,
   });
 
+  const canvasManager = new CanvasManager({
+    recordCanvas,
+    mutationCb: wrappedCanvasMutationEmit,
+    win: window,
+    blockClass,
+    mirror,
+  });
+
   const shadowDomManager = new ShadowDomManager({
     mutationCb: wrappedMutationEmit,
     scrollCb: wrappedScrollEmit,
@@ -201,6 +221,7 @@ function record<T = eventWithTime>(
       sampling,
       slimDOMOptions,
       iframeManager,
+      canvasManager,
       enableStrictPrivacy,
     },
     mirror,
@@ -365,16 +386,7 @@ function record<T = eventWithTime>(
                 },
               }),
             ),
-          canvasMutationCb: (p) =>
-            wrappedEmit(
-              wrapEvent({
-                type: EventType.IncrementalSnapshot,
-                data: {
-                  source: IncrementalSource.CanvasMutation,
-                  ...p,
-                },
-              }),
-            ),
+          canvasMutationCb: wrappedCanvasMutationEmit,
           fontCb: (p) =>
             wrappedEmit(
               wrapEvent({
@@ -403,6 +415,7 @@ function record<T = eventWithTime>(
           mirror,
           iframeManager,
           shadowDomManager,
+          canvasManager,
           plugins:
             plugins?.map((p) => ({
               observer: p.observer,

src/record/mutation.ts

@@ -31,6 +31,7 @@ import {
   hasShadowRoot,
 } from '../utils';
 import { IframeManager } from './iframe-manager';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 
 type DoubleLinkedListNode = {
@@ -179,6 +180,7 @@ export default class MutationBuffer {
   private mirror: Mirror;
   private iframeManager: IframeManager;
   private shadowDomManager: ShadowDomManager;
+  private canvasManager: CanvasManager;
 
   public init(
     cb: mutationCallBack,
@@ -196,6 +198,7 @@ export default class MutationBuffer {
     mirror: Mirror,
     iframeManager: IframeManager,
     shadowDomManager: ShadowDomManager,
+    canvasManager: CanvasManager,
     enableStrictPrivacy: boolean,
   ) {
     this.blockClass = blockClass;
@@ -214,14 +217,17 @@ export default class MutationBuffer {
     this.mirror = mirror;
     this.iframeManager = iframeManager;
     this.shadowDomManager = shadowDomManager;
+    this.canvasManager = canvasManager;
   }
 
   public freeze() {
     this.frozen = true;
+    this.canvasManager.freeze();
   }
 
   public unfreeze() {
     this.frozen = false;
+    this.canvasManager.unfreeze();
     this.emit();
   }
 
@@ -231,16 +237,22 @@ export default class MutationBuffer {
 
   public lock() {
     this.locked = true;
+    this.canvasManager.lock();
   }
 
   public unlock() {
     this.locked = false;
+    this.canvasManager.unlock();
     this.emit();
   }
 
+  public reset() {
+    this.canvasManager.reset();
+  }
+
   public processMutations = (mutations: mutationRecord[]) => {
-    mutations.forEach(this.processMutation);
-    this.emit();
+    mutations.forEach(this.processMutation); // adds mutations to the buffer
+    this.emit(); // clears buffer if not locked/frozen
   };
 
   public emit = () => {

src/record/observer.ts

@@ -53,6 +53,7 @@ import { ShadowDomManager } from './shadow-dom-manager';
 import initCanvasContextObserver from './observers/canvas/canvas';
 import initCanvas2DMutationObserver from './observers/canvas/2d';
 import initCanvasWebGLMutationObserver from './observers/canvas/webgl';
+import { CanvasManager } from './observers/canvas/canvas-manager';
 
 type WindowWithStoredMutationObserver = IWindow & {
   __rrMutationObserver?: MutationObserver;
@@ -105,6 +106,7 @@ export function initMutationObserver(
   mirror: Mirror,
   iframeManager: IframeManager,
   shadowDomManager: ShadowDomManager,
+  canvasManager: CanvasManager,
   rootEl: Node,
   enableStrictPrivacy: boolean,
 ): MutationObserver {
@@ -127,6 +129,7 @@ export function initMutationObserver(
     mirror,
     iframeManager,
     shadowDomManager,
+    canvasManager,
     enableStrictPrivacy,
   );
   let mutationObserverCtor =
@@ -375,8 +378,14 @@ function initInputObserver(
   userTriggeredOnInput: boolean,
 ): listenerHandler {
   function eventHandler(event: Event) {
-    const target = getEventTarget(event);
+    let target = getEventTarget(event);
     const userTriggered = event.isTrusted;
+    /**
+     * If a site changes the value 'selected' of an option element, the value of its parent element, usually a select element, will be changed as well.
+     * We can treat this change as a value change of the select element the current target belongs to.
+     */
+    if (target && (target as Element).tagName === 'OPTION')
+      target = (target as Element).parentElement;
     if (
       !target ||
       !(target as Element).tagName ||
@@ -467,6 +476,7 @@ function initInputObserver(
     [HTMLTextAreaElement.prototype, 'value'],
     // Some UI library use selectedIndex to set select value
     [HTMLSelectElement.prototype, 'selectedIndex'],
+    [HTMLOptionElement.prototype, 'selected'],
   ];
   if (propertyDescriptor && propertyDescriptor.set) {
     handlers.push(
@@ -690,56 +700,34 @@ function initMediaInteractionObserver(
   mediaInteractionCb: mediaInteractionCallback,
   blockClass: blockClass,
   mirror: Mirror,
+  sampling: SamplingStrategy,
 ): listenerHandler {
-  const handler = (type: MediaInteractions) => (event: Event) => {
-    const target = getEventTarget(event);
-    if (!target || isBlocked(target as Node, blockClass)) {
-      return;
-    }
-    mediaInteractionCb({
-      type,
-      id: mirror.getId(target as INode),
-      currentTime: (target as HTMLMediaElement).currentTime,
-    });
-  };
+  const handler = (type: MediaInteractions) =>
+    throttle((event: Event) => {
+      const target = getEventTarget(event);
+      if (!target || isBlocked(target as Node, blockClass)) {
+        return;
+      }
+      const { currentTime, volume, muted } = target as HTMLMediaElement;
+      mediaInteractionCb({
+        type,
+        id: mirror.getId(target as INode),
+        currentTime,
+        volume,
+        muted,
+      });
+    }, sampling.media || 500);
   const handlers = [
     on('play', handler(MediaInteractions.Play)),
     on('pause', handler(MediaInteractions.Pause)),
     on('seeked', handler(MediaInteractions.Seeked)),
+    on('volumechange', handler(MediaInteractions.VolumeChange)),
   ];
   return () => {
     handlers.forEach((h) => h());
   };
 }
 
-function initCanvasMutationObserver(
-  cb: canvasMutationCallback,
-  win: IWindow,
-  blockClass: blockClass,
-  mirror: Mirror,
-): listenerHandler {
-  const canvasContextReset = initCanvasContextObserver(win, blockClass);
-  const canvas2DReset = initCanvas2DMutationObserver(
-    cb,
-    win,
-    blockClass,
-    mirror,
-  );
-
-  const canvasWebGL1and2Reset = initCanvasWebGLMutationObserver(
-    cb,
-    win,
-    blockClass,
-    mirror,
-  );
-
-  return () => {
-    canvasContextReset();
-    canvas2DReset();
-    canvasWebGL1and2Reset();
-  };
-}
-
 function initFontObserver(cb: fontCallback, doc: Document): listenerHandler {
   const win = doc.defaultView as IWindow;
   if (!win) {
@@ -900,6 +888,7 @@ export function initObservers(
     o.mirror,
     o.iframeManager,
     o.shadowDomManager,
+    o.canvasManager,
     o.doc,
     o.enableStrictPrivacy,
   );
@@ -939,6 +928,7 @@ export function initObservers(
     o.mediaInteractionCb,
     o.blockClass,
     o.mirror,
+    o.sampling,
   );
 
   const styleSheetObserver = initStyleSheetObserver(
@@ -951,14 +941,6 @@ export function initObservers(
     currentWindow,
     o.mirror,
   );
-  const canvasMutationObserver = o.recordCanvas
-    ? initCanvasMutationObserver(
-        o.canvasMutationCb,
-        currentWindow,
-        o.blockClass,
-        o.mirror,
-      )
-    : () => {};
   const fontObserver = o.collectFonts
     ? initFontObserver(o.fontCb, o.doc)
     : () => {};
@@ -971,6 +953,7 @@ export function initObservers(
   }
 
   return () => {
+    mutationBuffers.forEach((b) => b.reset());
     mutationObserver.disconnect();
     mousemoveHandler();
     mouseInteractionHandler();
@@ -980,7 +963,6 @@ export function initObservers(
     mediaInteractionHandler();
     styleSheetObserver();
     styleDeclarationObserver();
-    canvasMutationObserver();
     fontObserver();
     pluginHandlers.forEach((h) => h());
   };

src/record/observers/canvas/2d.ts

@@ -2,15 +2,14 @@ import { INode } from '../../../snapshot';
 import {
   blockClass,
   CanvasContext,
-  canvasMutationCallback,
+  canvasManagerMutationCallback,
   IWindow,
   listenerHandler,
   Mirror,
 } from '../../../types';
 import { hookSetter, isBlocked, patch } from '../../../utils';
-
 export default function initCanvas2DMutationObserver(
-  cb: canvasMutationCallback,
+  cb: canvasManagerMutationCallback,
   win: IWindow,
   blockClass: blockClass,
   mirror: Mirror,
@@ -37,6 +36,8 @@ export default function initCanvas2DMutationObserver(
             ...args: Array<unknown>
           ) {
             if (!isBlocked((this.canvas as unknown) as INode, blockClass)) {
+              // Using setTimeout as getImageData + JSON.stringify can be heavy
+              // and we'd rather not block the main thread
               setTimeout(() => {
                 const recordArgs = [...args];
                 if (prop === 'drawImage') {
@@ -56,8 +57,7 @@ export default function initCanvas2DMutationObserver(
                     recordArgs[0] = JSON.stringify(pix);
                   }
                 }
-                cb({
-                  id: mirror.getId((this.canvas as unknown) as INode),
+                cb(this.canvas, {
                   type: CanvasContext['2D'],
                   property: prop,
                   args: recordArgs,
@@ -75,8 +75,7 @@ export default function initCanvas2DMutationObserver(
         prop,
         {
           set(v) {
-            cb({
-              id: mirror.getId((this.canvas as unknown) as INode),
+            cb(this.canvas, {
               type: CanvasContext['2D'],
               property: prop,
               args: [v],