Ensure blocking class is respected to prevent processing of assets

eoghanmurray · Dec 2, 2024 · 1647e05 · 1647e05
1 parent 487b920
commit 1647e05
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -635,7 +635,7 @@ function serializeElementNode(
 
   // legacy, the stringifyCssRules badly blocks the main thread as web page loads when taking an initial snapshot
   // prefer to capture as an asset instead
-  if (tagName === 'link' && inlineStylesheet) {
+  if (tagName === 'link' && inlineStylesheet && !needBlock) {
     const l = n as HTMLLinkElement;
     if (l.href && lowerIfExists(l.rel) === 'stylesheet' && l.sheet) {
       let sheetRules;
@@ -660,7 +660,7 @@ function serializeElementNode(
     const attr = n.attributes[i];
     if (attributes._cssText && ['href', 'rel'].includes(attr.name)) {
       // ignore in snapshot, and no need to try to asset capture the href (already done)
-    } else if (!ignoreAttribute(tagName, attr.name, attr.value)) {
+    } else if (!ignoreAttribute(tagName, attr.name, attr.value) && !needBlock) {
       const value = transformAttribute(
         doc,
         tagName,

diff --git a/packages/rrweb/test/record/asset.test.ts b/packages/rrweb/test/record/asset.test.ts
@@ -571,6 +571,8 @@ describe('asset capturing', function (this: ISuite) {
         <html>
           <body background="{SERVER_URL}/html/assets/robot.png?body">
             <img src="{SERVER_URL}/html/assets/robot.png?img" />
+            <img class="rr-block" src="{SERVER_URL}/html/assets/robot.png?should-be-blocked" />
+            <div class="rr-block"><img src="{SERVER_URL}/html/assets/robot.png?should-be-blocked2" /></div>
             <video><track default kind="captions" srclang="en" src="{SERVER_URL}/html/assets/subtitles.vtt" /><source src="{SERVER_URL}/html/assets/1-minute-of-silence.mp3?source" /></video>
             <video src="{SERVER_URL}/html/assets/1-minute-of-silence.mp3?video" type="audio/mp3"></video>
             <audio src="{SERVER_URL}/html/assets/1-minute-of-silence.mp3?audio" type="audio/mp3"></audio>
@@ -651,6 +653,25 @@ describe('asset capturing', function (this: ISuite) {
       });
     });
 
+    it("shouldn't capture assets within a blocked section", async () => {
+      await ctx.page.waitForNetworkIdle({ idleTime: 100 });
+      await waitForRAF(ctx.page);
+
+      const events = await ctx.page?.evaluate(
+        () => (window as unknown as IWindow).snapshots,
+      );
+
+      expect(events).not.toContainEqual(
+        expect.objectContaining({
+          type: EventType.Asset,
+          data: {
+            url: expect.stringContaining('should-be-blocked'),
+            payload: expect.any(Object),
+          },
+        }),
+      );
+    });
+
     it("shouldn't capture assets with origin not defined in config", async () => {
       await ctx.page.waitForNetworkIdle({ idleTime: 100 });
       await waitForRAF(ctx.page);
@@ -659,7 +680,6 @@ describe('asset capturing', function (this: ISuite) {
         () => (window as unknown as IWindow).snapshots,
       );
 
-      // expect an event to be emitted with `event.type` === EventType.Asset
       expect(events).not.toContainEqual(
         expect.objectContaining({
           type: EventType.Asset,