fix: recordCrossOriginIframes: true does not work with pack/unpack fn

1. bugfix 2. add test case 3. add rrweb-all.js to the result of command: bundle:browser 4. make puppeteer headless in CI by default to increase the speed and stability
rrweb-io · Jan 16, 2023 · cf50d39 · cf50d39
1 parent bb55679
commit cf50d39
Show file tree

Hide file tree

Showing 5 changed files with 227 additions and 25 deletions.
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -30,7 +30,7 @@ jobs:
         run: yarn turbo run check-types
 
       - name: Run tests
-        run: xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
+        run: PUPPETEER_HEADLESS=true xvfb-run --server-args="-screen 0 1920x1080x24" yarn test
 
       - name: Upload diff images to GitHub
         uses: actions/upload-artifact@v3

diff --git a/packages/rrweb/rollup.config.js b/packages/rrweb/rollup.config.js
@@ -214,6 +214,11 @@ if (process.env.BROWSER_ONLY) {
       name: 'rrweb',
       pathFn: (p) => p,
     },
+    {
+      input: './src/entries/all.ts',
+      name: 'rrweb',
+      pathFn: toAllPath,
+    },
     {
       input: './src/plugins/console/record/index.ts',
       name: 'rrwebConsoleRecord',

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -165,7 +165,11 @@ function record<T = eventWithTime>(
         e = plugin.eventProcessor(e);
       }
     }
-    if (packFn) {
+    if (
+      packFn &&
+      // Disable packing events which will be emitted to parent frames.
+      !passEmitsToParent
+    ) {
       e = (packFn(e) as unknown) as eventWithTime;
     }
     return (e as unknown) as T;

diff --git a/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap b/packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
@@ -365,7 +365,7 @@ exports[`cross origin iframes blank.html should filter out forwarded cross origi
                 \\"childNodes\\": [
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n          \\",
+                    \\"textContent\\": \\"\\\\n        \\",
                     \\"id\\": 8
                   },
                   {
@@ -379,7 +379,7 @@ exports[`cross origin iframes blank.html should filter out forwarded cross origi
                   },
                   {
                     \\"type\\": 3,
-                    \\"textContent\\": \\"\\\\n        \\\\n      \\\\n    \\",
+                    \\"textContent\\": \\"\\\\n      \\\\n    \\\\n  \\",
                     \\"id\\": 10
                   }
                 ],
@@ -556,6 +556,169 @@ exports[`cross origin iframes blank.html should filter out forwarded cross origi
 ]"
 `;
 
+exports[`cross origin iframes blank.html should support packFn option in record()  1`] = `
+"[
+  {
+    \\"type\\": 4,
+    \\"data\\": {
+      \\"href\\": \\"about:blank\\",
+      \\"width\\": 1920,
+      \\"height\\": 1080
+    },
+    \\"v\\": \\"v1\\"
+  },
+  {
+    \\"type\\": 2,
+    \\"data\\": {
+      \\"node\\": {
+        \\"type\\": 0,
+        \\"childNodes\\": [
+          {
+            \\"type\\": 1,
+            \\"name\\": \\"html\\",
+            \\"publicId\\": \\"\\",
+            \\"systemId\\": \\"\\",
+            \\"id\\": 2
+          },
+          {
+            \\"type\\": 2,
+            \\"tagName\\": \\"html\\",
+            \\"attributes\\": {},
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"head\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"script\\",
+                    \\"attributes\\": {
+                      \\"type\\": \\"\\"
+                    },
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                        \\"id\\": 6
+                      }
+                    ],
+                    \\"id\\": 5
+                  }
+                ],
+                \\"id\\": 4
+              },
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"body\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n        \\",
+                    \\"id\\": 8
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"iframe\\",
+                    \\"attributes\\": {
+                      \\"rr_src\\": \\"http://localhost:3030/html/blank.html\\"
+                    },
+                    \\"childNodes\\": [],
+                    \\"id\\": 9
+                  },
+                  {
+                    \\"type\\": 3,
+                    \\"textContent\\": \\"\\\\n      \\\\n    \\\\n  \\",
+                    \\"id\\": 10
+                  }
+                ],
+                \\"id\\": 7
+              }
+            ],
+            \\"id\\": 3
+          }
+        ],
+        \\"id\\": 1
+      },
+      \\"initialOffset\\": {
+        \\"left\\": 0,
+        \\"top\\": 0
+      }
+    },
+    \\"v\\": \\"v1\\"
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 0,
+      \\"adds\\": [
+        {
+          \\"parentId\\": 9,
+          \\"nextId\\": null,
+          \\"node\\": {
+            \\"type\\": 0,
+            \\"childNodes\\": [
+              {
+                \\"type\\": 2,
+                \\"tagName\\": \\"html\\",
+                \\"attributes\\": {},
+                \\"childNodes\\": [
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"head\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 2,
+                        \\"tagName\\": \\"script\\",
+                        \\"attributes\\": {
+                          \\"type\\": \\"\\"
+                        },
+                        \\"childNodes\\": [
+                          {
+                            \\"type\\": 3,
+                            \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
+                            \\"id\\": 15
+                          }
+                        ],
+                        \\"id\\": 14
+                      }
+                    ],
+                    \\"id\\": 13
+                  },
+                  {
+                    \\"type\\": 2,
+                    \\"tagName\\": \\"body\\",
+                    \\"attributes\\": {},
+                    \\"childNodes\\": [
+                      {
+                        \\"type\\": 3,
+                        \\"textContent\\": \\"\\\\n\\\\n\\",
+                        \\"id\\": 17
+                      }
+                    ],
+                    \\"id\\": 16
+                  }
+                ],
+                \\"id\\": 12
+              }
+            ],
+            \\"compatMode\\": \\"BackCompat\\",
+            \\"id\\": 11
+          }
+        }
+      ],
+      \\"removes\\": [],
+      \\"texts\\": [],
+      \\"attributes\\": [],
+      \\"isAttachIframe\\": true
+    },
+    \\"v\\": \\"v1\\"
+  }
+]"
+`;
+
 exports[`cross origin iframes form.html should map input events correctly 1`] = `
 "[
   {

diff --git a/packages/rrweb/test/record/cross-origin-iframes.test.ts b/packages/rrweb/test/record/cross-origin-iframes.test.ts
@@ -15,6 +15,7 @@ import {
   startServer,
   waitForRAF,
 } from '../utils';
+import { unpack } from '../../src/packer/unpack';
 import type * as http from 'http';
 
 interface ISuite {
@@ -32,34 +33,50 @@ interface IWindow extends Window {
       options: recordOptions<eventWithTime>,
     ) => listenerHandler | undefined;
     addCustomEvent<T>(tag: string, payload: T): void;
+    pack: (e: eventWithTime) => string;
   };
   emit: (e: eventWithTime) => undefined;
   snapshots: eventWithTime[];
 }
+type ExtraOptions = {
+  usePackFn?: boolean;
+};
 
-async function injectRecordScript(frame: puppeteer.Frame) {
+async function injectRecordScript(
+  frame: puppeteer.Frame,
+  options?: ExtraOptions,
+) {
   await frame.addScriptTag({
-    path: path.resolve(__dirname, '../../dist/rrweb.js'),
+    path: path.resolve(__dirname, '../../dist/rrweb-all.js'),
   });
-  await frame.evaluate(() => {
+  options = options || {};
+  await frame.evaluate((options) => {
     ((window as unknown) as IWindow).snapshots = [];
-    const { record } = ((window as unknown) as IWindow).rrweb;
-    record({
+    const { record, pack } = ((window as unknown) as IWindow).rrweb;
+    const config: recordOptions<eventWithTime> = {
       recordCrossOriginIframes: true,
       recordCanvas: true,
       emit(event) {
         ((window as unknown) as IWindow).snapshots.push(event);
         ((window as unknown) as IWindow).emit(event);
       },
-    });
-  });
+    };
+    if (options.usePackFn) {
+      config.packFn = pack;
+    }
+    record(config);
+  }, options);
 
   for (const child of frame.childFrames()) {
-    await injectRecordScript(child);
+    await injectRecordScript(child, options);
   }
 }
 
-const setup = function (this: ISuite, content: string): ISuite {
+const setup = function (
+  this: ISuite,
+  content: string,
+  options?: ExtraOptions,
+): ISuite {
   const ctx = {} as ISuite & {
     serverB: http.Server;
     serverBURL: string;
@@ -92,7 +109,7 @@ const setup = function (this: ISuite, content: string): ISuite {
     });
 
     ctx.page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
-    await injectRecordScript(ctx.page.mainFrame());
+    await injectRecordScript(ctx.page.mainFrame(), options);
   });
 
   afterEach(async () => {
@@ -488,17 +505,15 @@ describe('cross origin iframes', function (this: ISuite) {
   });
 
   describe('blank.html', function (this: ISuite) {
-    const ctx = setup.call(
-      this,
-      `
-      <!DOCTYPE html>
-      <html>
-        <body>
-          <iframe src="{SERVER_URL}/html/blank.html"></iframe>
-        </body>
-      </html>
-    `,
-    ) as ISuite & {
+    const content = `
+    <!DOCTYPE html>
+    <html>
+      <body>
+        <iframe src="{SERVER_URL}/html/blank.html"></iframe>
+      </body>
+    </html>
+  `;
+    const ctx = setup.call(this, content) as ISuite & {
       serverBURL: string;
     };
 
@@ -527,6 +542,21 @@ describe('cross origin iframes', function (this: ISuite) {
       )) as eventWithTime[];
       assertSnapshot(snapshots);
     });
+
+    describe('should support packFn option in record()', () => {
+      const ctx = setup.call(this, content, { usePackFn: true });
+      it('', async () => {
+        const frame = ctx.page.mainFrame().childFrames()[0];
+        await waitForRAF(frame);
+        const packedSnapshots = (await ctx.page.evaluate(
+          'window.snapshots',
+        )) as string[];
+        const unpackedSnapshots = packedSnapshots.map((packed) =>
+          unpack(packed),
+        ) as eventWithTime[];
+        assertSnapshot(unpackedSnapshots);
+      });
+    });
   });
 });