@highlight-run/rrweb 2.0.0-lambda.8 → 2.0.0-lambda.9

package/dist/rrweb.cjs

@@ -13674,66 +13674,142 @@ function getIdAndStyleId(sheet, mirror2, styleMirror) {
     id
   };
 }
-function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetManager }, { win }) {
+function restorePatchedMethod(target, key, ours, restoreTo) {
+  if (target[key] === ours) {
+    target[key] = restoreTo;
+  }
+}
+const MAX_CSSOM_REPATCH_ATTEMPTS = 5;
+function initStyleSheetObserver({
+  styleSheetRuleCb,
+  mirror: mirror2,
+  stylesheetManager,
+  doc,
+  styleSheetResyncInterval
+}, { win }) {
   if (!win.CSSStyleSheet || !win.CSSStyleSheet.prototype) {
     return () => {
     };
   }
-  const insertRule = win.CSSStyleSheet.prototype.insertRule;
-  win.CSSStyleSheet.prototype.insertRule = new Proxy(insertRule, {
+  const reportedRuleCounts = /* @__PURE__ */ new WeakMap();
+  const unreconcilableSheets = /* @__PURE__ */ new WeakSet();
+  let probing = false;
+  let probeInsertObserved = false;
+  let probeDeleteObserved = false;
+  let probeSheet;
+  let stopped = false;
+  let insideInsertRule = false;
+  let insideDeleteRule = false;
+  const noteReportedRules = (sheet, delta) => {
+    const state = reportedRuleCounts.get(sheet);
+    if (state) {
+      state.reported = Math.max(0, state.reported + delta);
+      state.everSeen = Math.max(state.everSeen, state.reported);
+    }
+  };
+  const patchInsertRule = (target) => new Proxy(target, {
     apply: callbackWrapper(
-      (target, thisArg, argumentsList) => {
+      (nativeFn, thisArg, argumentsList) => {
+        if (probing) {
+          probeInsertObserved = true;
+          return nativeFn.apply(thisArg, argumentsList);
+        }
+        if (stopped || insideInsertRule) {
+          return nativeFn.apply(thisArg, argumentsList);
+        }
         const [rule2, index2] = argumentsList;
         const { id, styleId } = getIdAndStyleId(
           thisArg,
           mirror2,
           stylesheetManager.styleMirror
         );
-        if (id && id !== -1 || styleId && styleId !== -1) {
+        const reported = id && id !== -1 || styleId && styleId !== -1;
+        if (reported) {
           styleSheetRuleCb({
             id,
             styleId,
             adds: [{ rule: rule2, index: index2 }]
           });
         }
-        return target.apply(thisArg, argumentsList);
+        insideInsertRule = true;
+        let result2;
+        try {
+          result2 = nativeFn.apply(thisArg, argumentsList);
+        } finally {
+          insideInsertRule = false;
+        }
+        if (reported) {
+          noteReportedRules(thisArg, 1);
+        }
+        return result2;
       }
     )
   });
-  win.CSSStyleSheet.prototype.addRule = function(selector, styleBlock, index2 = this.cssRules.length) {
-    const rule2 = `${selector} { ${styleBlock} }`;
-    return win.CSSStyleSheet.prototype.insertRule.apply(this, [rule2, index2]);
-  };
-  const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
-  win.CSSStyleSheet.prototype.deleteRule = new Proxy(deleteRule, {
+  const patchDeleteRule = (target) => new Proxy(target, {
     apply: callbackWrapper(
-      (target, thisArg, argumentsList) => {
+      (nativeFn, thisArg, argumentsList) => {
+        if (probing) {
+          probeDeleteObserved = true;
+          return nativeFn.apply(thisArg, argumentsList);
+        }
+        if (stopped || insideDeleteRule) {
+          return nativeFn.apply(thisArg, argumentsList);
+        }
         const [index2] = argumentsList;
         const { id, styleId } = getIdAndStyleId(
           thisArg,
           mirror2,
           stylesheetManager.styleMirror
         );
-        if (id && id !== -1 || styleId && styleId !== -1) {
+        const reported = id && id !== -1 || styleId && styleId !== -1;
+        if (reported) {
           styleSheetRuleCb({
             id,
             styleId,
             removes: [{ index: index2 }]
           });
         }
-        return target.apply(thisArg, argumentsList);
+        insideDeleteRule = true;
+        let result2;
+        try {
+          result2 = nativeFn.apply(thisArg, argumentsList);
+        } finally {
+          insideDeleteRule = false;
+        }
+        if (reported) {
+          noteReportedRules(thisArg, -1);
+        }
+        return result2;
       }
     )
   });
-  win.CSSStyleSheet.prototype.removeRule = function(index2) {
+  const insertRule = win.CSSStyleSheet.prototype.insertRule;
+  let insertRuleProxy = patchInsertRule(insertRule);
+  let restoreInsertRuleTo = insertRule;
+  win.CSSStyleSheet.prototype.insertRule = insertRuleProxy;
+  const addRule = win.CSSStyleSheet.prototype.addRule;
+  const addRuleShim = function(selector, styleBlock, index2 = this.cssRules.length) {
+    const rule2 = `${selector} { ${styleBlock} }`;
+    return win.CSSStyleSheet.prototype.insertRule.apply(this, [rule2, index2]);
+  };
+  win.CSSStyleSheet.prototype.addRule = addRuleShim;
+  const deleteRule = win.CSSStyleSheet.prototype.deleteRule;
+  let deleteRuleProxy = patchDeleteRule(deleteRule);
+  let restoreDeleteRuleTo = deleteRule;
+  win.CSSStyleSheet.prototype.deleteRule = deleteRuleProxy;
+  const removeRule = win.CSSStyleSheet.prototype.removeRule;
+  const removeRuleShim = function(index2) {
     return win.CSSStyleSheet.prototype.deleteRule.apply(this, [index2]);
   };
+  win.CSSStyleSheet.prototype.removeRule = removeRuleShim;
   let replace;
+  let replaceProxy;
   if (win.CSSStyleSheet.prototype.replace) {
     replace = win.CSSStyleSheet.prototype.replace;
-    win.CSSStyleSheet.prototype.replace = new Proxy(replace, {
+    replaceProxy = new Proxy(replace, {
       apply: callbackWrapper(
         (target, thisArg, argumentsList) => {
+          if (stopped) return target.apply(thisArg, argumentsList);
           const [text] = argumentsList;
           const { id, styleId } = getIdAndStyleId(
             thisArg,
@@ -13751,13 +13827,16 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetM
         }
       )
     });
+    win.CSSStyleSheet.prototype.replace = replaceProxy;
   }
   let replaceSync;
+  let replaceSyncProxy;
   if (win.CSSStyleSheet.prototype.replaceSync) {
     replaceSync = win.CSSStyleSheet.prototype.replaceSync;
-    win.CSSStyleSheet.prototype.replaceSync = new Proxy(replaceSync, {
+    replaceSyncProxy = new Proxy(replaceSync, {
       apply: callbackWrapper(
         (target, thisArg, argumentsList) => {
+          if (stopped) return target.apply(thisArg, argumentsList);
           const [text] = argumentsList;
           const { id, styleId } = getIdAndStyleId(
             thisArg,
@@ -13775,6 +13854,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetM
         }
       )
     });
+    win.CSSStyleSheet.prototype.replaceSync = replaceSyncProxy;
   }
   const supportedNestedCSSRuleTypes = {};
   if (canMonkeyPatchNestedCSSRule("CSSGroupingRule")) {
@@ -13791,6 +13871,7 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetM
     }
   }
   const unmodifiedFunctions = {};
+  const nestedProxies = {};
   Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
     unmodifiedFunctions[typeKey] = {
       // eslint-disable-next-line @typescript-eslint/unbound-method
@@ -13798,11 +13879,13 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetM
       // eslint-disable-next-line @typescript-eslint/unbound-method
       deleteRule: type.prototype.deleteRule
     };
-    type.prototype.insertRule = new Proxy(
+    nestedProxies[typeKey] = {};
+    nestedProxies[typeKey].insertRule = new Proxy(
       unmodifiedFunctions[typeKey].insertRule,
       {
         apply: callbackWrapper(
           (target, thisArg, argumentsList) => {
+            if (stopped) return target.apply(thisArg, argumentsList);
             const [rule2, index2] = argumentsList;
             const { id, styleId } = getIdAndStyleId(
               thisArg.parentStyleSheet,
@@ -13830,11 +13913,12 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetM
         )
       }
     );
-    type.prototype.deleteRule = new Proxy(
+    nestedProxies[typeKey].deleteRule = new Proxy(
       unmodifiedFunctions[typeKey].deleteRule,
       {
         apply: callbackWrapper(
           (target, thisArg, argumentsList) => {
+            if (stopped) return target.apply(thisArg, argumentsList);
             const [index2] = argumentsList;
             const { id, styleId } = getIdAndStyleId(
               thisArg.parentStyleSheet,
@@ -13855,15 +13939,148 @@ function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetM
         )
       }
     );
+    type.prototype.insertRule = nestedProxies[typeKey].insertRule;
+    type.prototype.deleteRule = nestedProxies[typeKey].deleteRule;
   });
+  const captureIsHealthy = () => {
+    probing = true;
+    probeInsertObserved = false;
+    probeDeleteObserved = false;
+    try {
+      const probe = probeSheet ?? (probeSheet = new win.CSSStyleSheet());
+      probe.insertRule(":root {}", 0);
+      probe.deleteRule(0);
+    } catch (error) {
+      return {
+        insertRule: win.CSSStyleSheet.prototype.insertRule === insertRuleProxy,
+        deleteRule: win.CSSStyleSheet.prototype.deleteRule === deleteRuleProxy
+      };
+    } finally {
+      probing = false;
+    }
+    return {
+      insertRule: probeInsertObserved,
+      deleteRule: probeDeleteObserved
+    };
+  };
+  let repatchAttempts = 0;
+  const repatch = (health) => {
+    if (repatchAttempts >= MAX_CSSOM_REPATCH_ATTEMPTS) return;
+    repatchAttempts += 1;
+    if (!health.insertRule) {
+      restoreInsertRuleTo = win.CSSStyleSheet.prototype.insertRule;
+      insertRuleProxy = patchInsertRule(restoreInsertRuleTo);
+      win.CSSStyleSheet.prototype.insertRule = insertRuleProxy;
+    }
+    if (!health.deleteRule) {
+      restoreDeleteRuleTo = win.CSSStyleSheet.prototype.deleteRule;
+      deleteRuleProxy = patchDeleteRule(restoreDeleteRuleTo);
+      win.CSSStyleSheet.prototype.deleteRule = deleteRuleProxy;
+    }
+  };
+  const resyncCssomStyleSheets = (trusted) => {
+    for (let i2 = 0; i2 < doc.styleSheets.length; i2++) {
+      const sheet = doc.styleSheets[i2];
+      if (unreconcilableSheets.has(sheet)) continue;
+      const owner = sheet.ownerNode;
+      if (!owner || toLowerCase(owner.nodeName) !== "style") continue;
+      if ((owner.textContent || "").trim().length) continue;
+      const id = mirror2.getId(owner);
+      if (!id || id === -1) continue;
+      let rules2;
+      try {
+        rules2 = sheet.cssRules;
+      } catch (error) {
+        continue;
+      }
+      const live = rules2.length;
+      let state = reportedRuleCounts.get(sheet);
+      if (!state) {
+        if (Array.from(rules2).some((rule2) => isCSSImportRule(rule2))) {
+          unreconcilableSheets.add(sheet);
+          continue;
+        }
+        state = { reported: live, everSeen: live };
+        reportedRuleCounts.set(sheet, state);
+        if (trusted) continue;
+        replaceReplayerCopy(id, state, rules2);
+        continue;
+      }
+      state.everSeen = Math.max(state.everSeen, live);
+      if (live === state.reported) continue;
+      if (live > state.reported) {
+        const adds = [];
+        for (let index2 = state.reported; index2 < live; index2++) {
+          adds.push({ rule: rules2[index2].cssText, index: index2 });
+        }
+        styleSheetRuleCb({ id, adds });
+        state.reported = live;
+      } else {
+        replaceReplayerCopy(id, state, rules2);
+      }
+    }
+  };
+  function replaceReplayerCopy(id, state, rules2) {
+    const removes = [];
+    for (let index2 = state.everSeen - 1; index2 >= 0; index2--) {
+      removes.push({ index: index2 });
+    }
+    if (removes.length) styleSheetRuleCb({ id, removes });
+    styleSheetRuleCb({
+      id,
+      adds: Array.from(rules2, (rule2, index2) => ({
+        rule: rule2.cssText,
+        index: index2
+      }))
+    });
+    state.reported = rules2.length;
+    state.everSeen = rules2.length;
+  }
+  let resyncTimer;
+  if (styleSheetResyncInterval > 0) {
+    resyncTimer = win.setInterval(
+      callbackWrapper(() => {
+        const health = captureIsHealthy();
+        const healthy = health.insertRule && health.deleteRule;
+        if (!healthy) repatch(health);
+        resyncCssomStyleSheets(healthy);
+      }),
+      styleSheetResyncInterval
+    );
+  }
   return callbackWrapper(() => {
-    win.CSSStyleSheet.prototype.insertRule = insertRule;
-    win.CSSStyleSheet.prototype.deleteRule = deleteRule;
-    replace && (win.CSSStyleSheet.prototype.replace = replace);
-    replaceSync && (win.CSSStyleSheet.prototype.replaceSync = replaceSync);
+    if (resyncTimer !== void 0) win.clearInterval(resyncTimer);
+    stopped = true;
+    const proto = win.CSSStyleSheet.prototype;
+    restorePatchedMethod(
+      proto,
+      "insertRule",
+      insertRuleProxy,
+      restoreInsertRuleTo
+    );
+    restorePatchedMethod(
+      proto,
+      "deleteRule",
+      deleteRuleProxy,
+      restoreDeleteRuleTo
+    );
+    restorePatchedMethod(proto, "addRule", addRuleShim, addRule);
+    restorePatchedMethod(proto, "removeRule", removeRuleShim, removeRule);
+    replaceProxy && restorePatchedMethod(proto, "replace", replaceProxy, replace);
+    replaceSyncProxy && restorePatchedMethod(proto, "replaceSync", replaceSyncProxy, replaceSync);
     Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => {
-      type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule;
-      type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule;
+      restorePatchedMethod(
+        type.prototype,
+        "insertRule",
+        nestedProxies[typeKey].insertRule,
+        unmodifiedFunctions[typeKey].insertRule
+      );
+      restorePatchedMethod(
+        type.prototype,
+        "deleteRule",
+        nestedProxies[typeKey].deleteRule,
+        unmodifiedFunctions[typeKey].deleteRule
+      );
     });
   });
 }
@@ -15631,6 +15848,7 @@ function record(options = {}) {
     keepIframeSrcFn = () => false,
     privacySetting = "default",
     ignoreCSSAttributes = /* @__PURE__ */ new Set([]),
+    styleSheetResyncInterval = 2e3,
     errorHandler: errorHandler2,
     logger
   } = options;
@@ -16009,6 +16227,7 @@ function record(options = {}) {
           processedNodeManager,
           canvasManager,
           ignoreCSSAttributes,
+          styleSheetResyncInterval,
           privacySetting,
           plugins: ((_a3 = plugins == null ? void 0 : plugins.filter((p) => p.observer)) == null ? void 0 : _a3.map((p) => ({
             observer: p.observer,
@@ -16895,12 +17114,36 @@ function variableListFor(ctx, ctor) {
   }
   return contextMap.get(ctor);
 }
-function deserializeArg(imageMap, ctx, preload) {
+const canvasArgConstructors = /* @__PURE__ */ new Set([
+  "Int8Array",
+  "Int16Array",
+  "Int32Array",
+  "Uint8Array",
+  "Uint8ClampedArray",
+  "Uint16Array",
+  "Uint32Array",
+  "Float32Array",
+  "Float64Array",
+  "DataView",
+  "ImageData",
+  // normally serialized as base64, but reachable in `args` form through
+  // recordings made by older clients and through nested `DataView` args.
+  "ArrayBuffer",
+  // wraps nested args in recordings made by older clients — see the
+  // `preloadAllImages` tests for the shape.
+  "Array"
+]);
+function deserializeArg(imageMap, ctx, preload, enforceCanvasArgAllowlist = false) {
   return async (arg) => {
     if (arg && typeof arg === "object" && "rr_type" in arg) {
       if (preload) preload.isUnchanged = false;
       if (arg.rr_type === "ImageBitmap" && "args" in arg) {
-        const args = await deserializeArg(imageMap, ctx, preload)(arg.args);
+        const args = await deserializeArg(
+          imageMap,
+          ctx,
+          preload,
+          enforceCanvasArgAllowlist
+        )(arg.args);
         return await createImageBitmap.apply(null, args);
       } else if ("index" in arg) {
         if (preload || ctx === null) return arg;
@@ -16908,10 +17151,18 @@ function deserializeArg(imageMap, ctx, preload) {
         return variableListFor(ctx, name)[index2];
       } else if ("args" in arg) {
         const { rr_type: name, args } = arg;
+        if (enforceCanvasArgAllowlist && !canvasArgConstructors.has(name)) {
+          console.warn(
+            `[replayer] refusing to construct canvas arg of unknown type: ${name}`
+          );
+          return null;
+        }
         const ctor = window[name];
         return new ctor(
           ...await Promise.all(
-            args.map(deserializeArg(imageMap, ctx, preload))
+            args.map(
+              deserializeArg(imageMap, ctx, preload, enforceCanvasArgAllowlist)
+            )
           )
         );
       } else if ("base64" in arg) {
@@ -16928,7 +17179,9 @@ function deserializeArg(imageMap, ctx, preload) {
         }
       } else if ("data" in arg && arg.rr_type === "Blob") {
         const blobContents = await Promise.all(
-          arg.data.map(deserializeArg(imageMap, ctx, preload))
+          arg.data.map(
+            deserializeArg(imageMap, ctx, preload, enforceCanvasArgAllowlist)
+          )
         );
         const blob2 = new Blob(blobContents, {
           type: arg.type
@@ -16937,7 +17190,9 @@ function deserializeArg(imageMap, ctx, preload) {
       }
     } else if (Array.isArray(arg)) {
       const result2 = await Promise.all(
-        arg.map(deserializeArg(imageMap, ctx, preload))
+        arg.map(
+          deserializeArg(imageMap, ctx, preload, enforceCanvasArgAllowlist)
+        )
       );
       return result2;
     }
@@ -16978,7 +17233,8 @@ async function webglMutation({
   target,
   type,
   imageMap,
-  errorHandler: errorHandler2
+  errorHandler: errorHandler2,
+  enforceCanvasArgAllowlist
 }) {
   try {
     const ctx = getContext(target, type);
@@ -16989,7 +17245,9 @@ async function webglMutation({
     }
     const original = ctx[mutation.property];
     const args = await Promise.all(
-      mutation.args.map(deserializeArg(imageMap, ctx))
+      mutation.args.map(
+        deserializeArg(imageMap, ctx, void 0, enforceCanvasArgAllowlist)
+      )
     );
     const result2 = original.apply(ctx, args);
     saveToWebGLVarMap(ctx, result2);
@@ -17004,7 +17262,8 @@ async function canvasMutation$1({
   mutations,
   target,
   imageMap,
-  errorHandler: errorHandler2
+  errorHandler: errorHandler2,
+  enforceCanvasArgAllowlist
 }) {
   const ctx = target.getContext("2d");
   if (!ctx) {
@@ -17014,7 +17273,11 @@ async function canvasMutation$1({
   wrapCanvasContextDrawImage(ctx);
   const mutationArgsPromises = mutations.map(
     async (mutation) => {
-      return Promise.all(mutation.args.map(deserializeArg(imageMap, ctx)));
+      return Promise.all(
+        mutation.args.map(
+          deserializeArg(imageMap, ctx, void 0, enforceCanvasArgAllowlist)
+        )
+      );
     }
   );
   const args = await Promise.all(mutationArgsPromises);
@@ -17044,7 +17307,8 @@ async function canvasMutation({
   target,
   imageMap,
   canvasEventMap,
-  errorHandler: errorHandler2
+  errorHandler: errorHandler2,
+  enforceCanvasArgAllowlist
 }) {
   try {
     const precomputedMutation = canvasEventMap.get(event) || mutation;
@@ -17057,7 +17321,8 @@ async function canvasMutation({
           type: mutation.type,
           target,
           imageMap,
-          errorHandler: errorHandler2
+          errorHandler: errorHandler2,
+          enforceCanvasArgAllowlist
         });
       }
       return;
@@ -17067,7 +17332,8 @@ async function canvasMutation({
       mutations: commands,
       target,
       imageMap,
-      errorHandler: errorHandler2
+      errorHandler: errorHandler2,
+      enforceCanvasArgAllowlist
     });
   } catch (error) {
     errorHandler2(mutation, error);
@@ -17510,6 +17776,7 @@ class Replayer {
       insertStyleRules: [],
       triggerFocus: true,
       UNSAFE_replayCanvas: false,
+      enforceCanvasArgAllowlist: false,
       pauseAnimation: true,
       mouseTail: defaultMouseTailConfig,
       useVirtualDom: true,
@@ -17538,7 +17805,8 @@ class Replayer {
               target,
               imageMap: this.imageMap,
               canvasEventMap: this.canvasEventMap,
-              errorHandler: this.warnCanvasMutationFailed.bind(this)
+              errorHandler: this.warnCanvasMutationFailed.bind(this),
+              enforceCanvasArgAllowlist: this.config.enforceCanvasArgAllowlist
             });
           },
           applyInput: this.applyInput.bind(this),
@@ -18250,7 +18518,14 @@ class Replayer {
         const commands = await Promise.all(
           data.commands.map(async (c2) => {
             const args = await Promise.all(
-              c2.args.map(deserializeArg(this.imageMap, null, status))
+              c2.args.map(
+                deserializeArg(
+                  this.imageMap,
+                  null,
+                  status,
+                  this.config.enforceCanvasArgAllowlist
+                )
+              )
             );
             return { ...c2, args };
           })
@@ -18259,7 +18534,14 @@ class Replayer {
           this.canvasEventMap.set(event, { ...data, commands });
       } else {
         const args = await Promise.all(
-          data.args.map(deserializeArg(this.imageMap, null, status))
+          data.args.map(
+            deserializeArg(
+              this.imageMap,
+              null,
+              status,
+              this.config.enforceCanvasArgAllowlist
+            )
+          )
         );
         if (status.isUnchanged === false)
           this.canvasEventMap.set(event, { ...data, args });
@@ -18472,7 +18754,8 @@ class Replayer {
             target,
             imageMap: this.imageMap,
             canvasEventMap: this.canvasEventMap,
-            errorHandler: this.warnCanvasMutationFailed.bind(this)
+            errorHandler: this.warnCanvasMutationFailed.bind(this),
+            enforceCanvasArgAllowlist: this.config.enforceCanvasArgAllowlist
           });
         }
         break;
@@ -19210,6 +19493,7 @@ const SERIALIZABLE_CONFIG_KEYS = [
   "insertStyleRules",
   "triggerFocus",
   "UNSAFE_replayCanvas",
+  "enforceCanvasArgAllowlist",
   "cspContent",
   "pauseAnimation",
   "mouseTail",