rrweb-io · Copilot · Jan 24, 2025 · Jan 24, 2025 · Feb 4, 2025 · Feb 4, 2025
diff --git a/.changeset/cuddly-dolphins-approve.md b/.changeset/cuddly-dolphins-approve.md
@@ -0,0 +1,10 @@
+---
+"@rrweb/all": patch
+"@rrweb/packer": patch
+"@rrweb/record": patch
+"rrweb-snapshot": patch
+"rrweb": patch
+"@rrweb/web-extension": patch
+---
+
+Drop base64 inlined worker source from all bundles
diff --git a/.changeset/eight-years-hope.md b/.changeset/eight-years-hope.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
@@ -31,6 +31,9 @@ jobs:
       - name: Build Project
         run: NODE_OPTIONS='--max-old-space-size=4096' yarn build:all
 
+      - name: Install Playwright browsers
+        run: cd packages/rrvideo && yarn playwright install chromium
+
       - name: Check types
         run: yarn check-types
 

diff --git a/packages/all/package.json b/packages/all/package.json
@@ -50,7 +50,7 @@
   ],
   "devDependencies": {
     "puppeteer": "^20.9.0",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0",
     "typescript": "^5.4.5"

diff --git a/packages/packer/package.json b/packages/packer/package.json
@@ -71,7 +71,7 @@
     "package.json"
   ],
   "devDependencies": {
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0",
     "typescript": "^5.4.5"

diff --git a/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json b/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "rrweb": "^2.0.0-alpha.19",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {

diff --git a/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json b/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "rrweb": "^2.0.0-alpha.19",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {

diff --git a/packages/plugins/rrweb-plugin-console-record/package.json b/packages/plugins/rrweb-plugin-console-record/package.json
@@ -47,7 +47,7 @@
   "devDependencies": {
     "rrweb": "^2.0.0-alpha.19",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0",
     "puppeteer": "^20.9.0"

diff --git a/packages/plugins/rrweb-plugin-console-replay/package.json b/packages/plugins/rrweb-plugin-console-replay/package.json
@@ -46,7 +46,7 @@
     "@rrweb/rrweb-plugin-console-record": "^2.0.0-alpha.19",
     "rrweb": "^2.0.0-alpha.19",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {

diff --git a/packages/plugins/rrweb-plugin-sequential-id-record/package.json b/packages/plugins/rrweb-plugin-sequential-id-record/package.json
@@ -45,7 +45,7 @@
   "devDependencies": {
     "rrweb": "^2.0.0-alpha.19",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {

diff --git a/packages/plugins/rrweb-plugin-sequential-id-replay/package.json b/packages/plugins/rrweb-plugin-sequential-id-replay/package.json
@@ -46,7 +46,7 @@
     "@rrweb/rrweb-plugin-sequential-id-record": "^2.0.0-alpha.19",
     "rrweb": "^2.0.0-alpha.19",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {

diff --git a/packages/record/package.json b/packages/record/package.json
@@ -49,7 +49,7 @@
   ],
   "devDependencies": {
     "puppeteer": "^20.9.0",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0",
     "typescript": "^5.4.5"

diff --git a/packages/replay/package.json b/packages/replay/package.json
@@ -50,7 +50,7 @@
   ],
   "devDependencies": {
     "puppeteer": "^20.9.0",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0",
     "typescript": "^5.4.5"

diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
@@ -46,7 +46,7 @@
     "compare-versions": "^4.1.3",
     "eslint": "^8.15.0",
     "puppeteer": "^9.1.1",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0",
     "typescript": "^5.4.5"

diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
@@ -48,7 +48,7 @@
     "eslint": "^8.15.0",
     "puppeteer": "^17.1.3",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "dependencies": {

diff --git a/packages/rrvideo/package.json b/packages/rrvideo/package.json
@@ -33,7 +33,7 @@
     "@open-tech-world/cli-progress-bar": "^2.0.2",
     "fs-extra": "^11.1.1",
     "minimist": "^1.2.5",
-    "playwright": "^1.32.1",
+    "playwright": "^1.56.1",
     "rrweb-player": "^2.0.0-alpha.19"
   }
 }
diff --git a/packages/rrvideo/src/index.ts b/packages/rrvideo/src/index.ts
@@ -57,22 +57,29 @@ function getHtml(events: Array<eventWithTime>, config?: RRvideoConfig): string {
       )};
       /*-->*/
       const userConfig = ${JSON.stringify(config?.rrwebPlayer || {})};
-      window.replayer = new rrwebPlayer.Player({
-        target: document.body,
-        width: userConfig.width,
-        height: userConfig.height,
-        props: {
-          ...userConfig,
-          events,
-          showController: false,          
-        },
-      });
-      window.replayer.addEventListener('finish', () => window.onReplayFinish());
-      window.replayer.addEventListener('ui-update-progress', (payload)=> window.onReplayProgressUpdate
-      (payload));
-      window.replayer.addEventListener('resize',()=>document.querySelector('.replayer-wrapper').style.transform = 'scale(${
-        (config?.resolutionRatio ?? 1) * MaxScaleValue
-      }) translate(-50%, -50%)');
+      try {
+        window.replayer = new rrwebPlayer({
+          target: document.body,
+          props: {
+            width: userConfig.width,
+            height: userConfig.height,
+            ...userConfig,
+            events,
+            showController: false,
+            autoPlay: false,
+          },
+        });
+        window.replayer.addEventListener('finish', () => window.onReplayFinish());
+        window.replayer.addEventListener('ui-update-progress', (payload)=> window.onReplayProgressUpdate(payload));
+        window.replayer.addEventListener('resize',()=>document.querySelector('.replayer-wrapper').style.transform = 'scale(${
+          (config?.resolutionRatio ?? 1) * MaxScaleValue
+        }) translate(-50%, -50%)');
+        // Start playback after event listeners are attached
+        window.replayer.play();
+      } catch (error) {
+        console.error('Error initializing replayer:', error);
+        window.onReplayFinish();
+      }
     </script>
   </body>
 </html>
@@ -105,18 +112,21 @@ export async function transformToVideo(options: RRvideoConfig) {
   Object.assign(config, options);
   if (config.resolutionRatio > 1) config.resolutionRatio = 1; // The max value is 1.
 
+  console.log('[DEBUG] Starting transformToVideo');
   const eventsPath = path.isAbsolute(config.input)
     ? config.input
     : path.resolve(process.cwd(), config.input);
   const outputPath = path.isAbsolute(config.output)
     ? config.output
     : path.resolve(process.cwd(), config.output);
+  console.log('[DEBUG] Reading events from:', eventsPath);
   const events = JSON.parse(
     fs.readFileSync(eventsPath, 'utf-8'),
   ) as eventWithTime[];
 
   // Make the browser viewport fit the player size.
   const maxViewport = getMaxViewport(events);
+  console.log('[DEBUG] Max viewport:', maxViewport);
   // Use the scaling method to improve the video quality.
   const scaledViewport = {
     width: Math.round(
@@ -127,18 +137,39 @@ export async function transformToVideo(options: RRvideoConfig) {
     ),
   };
   Object.assign(config.rrwebPlayer, scaledViewport);
+  console.log('[DEBUG] Launching browser with headless:', config.headless);
   const browser = await chromium.launch({
     headless: config.headless,
   });
+  console.log('[DEBUG] Browser launched successfully');
+  console.log(
+    '[DEBUG] Creating browser context with viewport:',
+    scaledViewport,
+  );
   const context = await browser.newContext({
     viewport: scaledViewport,
     recordVideo: {
       dir: defaultVideoDir,
       size: scaledViewport,
     },
   });
+  console.log('[DEBUG] Browser context created');
   const page = await context.newPage();
+  console.log('[DEBUG] New page created');
   await page.goto('about:blank');
+  console.log('[DEBUG] Navigated to about:blank');
+  console.log('[DEBUG] Exposing functions to page');
+
+  // Listen to console messages from the page
+  page.on('console', (msg) => {
+    console.log('[PAGE CONSOLE]', msg.type(), msg.text());
+  });
+
+  // Listen to page errors
+  page.on('pageerror', (error) => {
+    console.error('[PAGE ERROR]', error.message);
+  });
+
   await page.exposeFunction(
     'onReplayProgressUpdate',
     (data: { payload: number }) => {
@@ -147,20 +178,56 @@ export async function transformToVideo(options: RRvideoConfig) {
   );
 
   // Wait for the replay to finish
-  await new Promise<void>(
-    (resolve) =>
-      void page
-        .exposeFunction('onReplayFinish', () => resolve())
-        .then(() => page.setContent(getHtml(events, config))),
-  );
+  console.log('[DEBUG] Starting replay');
+  await new Promise<void>((resolve, reject) => {
+    // Calculate timeout based on event duration and playback speed
+    const timestamps = events.map((e) => e.timestamp);
+    const minTimestamp = Math.min(...timestamps);
+    const maxTimestamp = Math.max(...timestamps);
+    const eventDuration = maxTimestamp - minTimestamp;
+    const playbackSpeed = config.rrwebPlayer.speed ?? 1;
+    // Calculate timeout: event duration / playback speed + 2 minute buffer
+    const timeoutDuration = Math.ceil(eventDuration / playbackSpeed) + 120000;
+    console.log(
+      `[DEBUG] Event duration: ${eventDuration}ms, playback speed: ${playbackSpeed}x, timeout: ${timeoutDuration}ms`,
+    );
+
+    const timeout = setTimeout(() => {
+      console.error('[DEBUG] Replay timeout - finish event never fired');
+      reject(new Error('Replay timeout'));
+    }, timeoutDuration);
+
+    void page
+      .exposeFunction('onReplayFinish', () => {
+        console.log('[DEBUG] Replay finished');
+        clearTimeout(timeout);
+        resolve();
+      })
+      .then(() => {
+        console.log('[DEBUG] Setting page content');
+        return page.setContent(getHtml(events, config));
+      })
+      .then(() => {
+        console.log('[DEBUG] Page content set successfully');
+      })
+      .catch((err) => {
+        console.error('[DEBUG] Error setting page content:', err);
+        clearTimeout(timeout);
+        reject(err);
+      });
+  });
+  console.log('[DEBUG] Getting video path');
   const videoPath = (await page.video()?.path()) || '';
+  console.log('[DEBUG] Video path:', videoPath);
   const cleanFiles = async (videoPath: string) => {
     await fs.remove(videoPath);
     if ((await fs.readdir(defaultVideoDir)).length === 0) {
       await fs.remove(defaultVideoDir);
     }
   };
+  console.log('[DEBUG] Closing context');
   await context.close();
+  console.log('[DEBUG] Moving video file to output path:', outputPath);
   await Promise.all([
     fs
       .move(videoPath, outputPath, { overwrite: true })
@@ -173,5 +240,6 @@ export async function transformToVideo(options: RRvideoConfig) {
       .finally(() => void cleanFiles(videoPath)),
     browser.close(),
   ]);
+  console.log('[DEBUG] Video transformation complete');
   return outputPath;
 }
diff --git a/packages/rrvideo/test/cli.test.ts b/packages/rrvideo/test/cli.test.ts
@@ -18,16 +18,20 @@ describe('should be able to run cli', () => {
     await fs.remove(path.resolve(__dirname, './generated'));
   });
 
+  const execOptions = { timeout: 60_000 } as const;
+  const execOptionsWithOutput = { ...execOptions, stdio: 'inherit' } as const;
+
   it('should throw error without input path', () => {
     expect(() => {
-      execSync('node ./build/cli.js', { stdio: 'pipe' });
+      execSync('node ./build/cli.js', { ...execOptions, stdio: 'pipe' });
     }).toThrowError(/.*please pass --input to your rrweb events file.*/);
   });
 
   it('should generate a video without output path', () => {
-    execSync('node ./build/cli.js --input ./test/generated/example.json', {
-      stdio: 'pipe',
-    });
+    execSync(
+      'node ./build/cli.js --input ./test/generated/example.json',
+      execOptionsWithOutput,
+    );
     const outputFile = path.resolve(__dirname, '../rrvideo-output.webm');
     expect(fs.existsSync(outputFile)).toBe(true);
     fs.removeSync(outputFile);
@@ -37,7 +41,7 @@ describe('should be able to run cli', () => {
     const outputFile = path.resolve(__dirname, './generated/output.webm');
     execSync(
       `node ./build/cli.js --input ./test/generated/example.json --output ${outputFile}`,
-      { stdio: 'pipe' },
+      execOptionsWithOutput,
     );
     expect(fs.existsSync(outputFile)).toBe(true);
     fs.removeSync(outputFile);