Migrates to vite@6 to drop base64 inlined worker source from all bundles (rrweb-io#1762)

Juice10 · ruiconti · Copilot · web-flow · commit 22bc4c334e88 · 2026-02-06T15:11:36.000+01:00
* chore: maintain CSS output file name in vite@6.0.1 Without this change, build would fail because the produced stylesheet assumes the `package.json['name']` i.e., `styles/rrweb.css`. To maintain the existing behavior, these changes are required. See https://vite.dev/guide/migration.html#customize-css-output-file-name-in-library-mode * build(rrvideo): upgrade playwright from 1.32.1 to 1.56.1 Update playwright dependency to latest version and refactor test execution options to use a shared configuration with increased timeout for stability. * debug(rrvideo): add comprehensive logging to video transformation process Add detailed console.log statements throughout the transformToVideo function to track execution flow and debug potential issues. Logging covers browser launch, context creation, page navigation, replay progress, and video file operations. * ci(rrvideo): install playwright browsers and improve test output visibility - Add Playwright Chromium installation step to CI workflow - Change test execution stdio from 'pipe' to 'inherit' for better debugging * fix(rrvideo): prevent autoplay and manually start playback after event listeners Set autoPlay to false in replayer configuration and manually call play() after all event listeners are attached. This ensures event handlers are properly registered before playback begins, preventing potential race conditions. Also refactor test execution options to separate stdio configuration from timeout settings for better control over test output visibility. * fix(rrvideo): add timeout and error handling to replay process Add comprehensive error handling to prevent hanging during video transformation: - Add 2-minute timeout for replay finish event - Add console and error listeners for better debugging - Improve promise chain with proper error catching - Clear timeout on successful completion or error This prevents the process from hanging indefinitely when the replay finish event never fires. * fix(rrvideo): add error handling and restructure replayer initialization Wrap replayer initialization in try-catch block to handle potential errors gracefully. Restructure Player instantiation to use rrwebPlayer directly instead of rrwebPlayer.Player, and move width/height into props object for correct API usage. On error, log to console and trigger onReplayFinish callback to prevent hanging state. * build(umd): rename record and replay globals Update UMD build globals for recorder and replayer and refresh documentation accordingly. BREAKING CHANGE: UMD global names changed to rrwebRecord and rrwebReplay. * fix(rrvideo): adjust replay timeout to duration * docs: update rrweb-player CDN script path * Update vite.config.default.ts Co-authored-by: Eoghan Murray <eoghan@getthere.ie> --------- Co-authored-by: Rui <rui@conti.sh> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
diff --git a/.changeset/brave-walls-shine.md b/.changeset/brave-walls-shine.md
@@ -0,0 +1,6 @@
+---
+"@rrweb/record": major
+"@rrweb/replay": major
+---
+
+BREAKING CHANGE: Rename UMD global names from `rrweb` to `rrwebRecord` for the recorder and `rrwebReplay` for the replayer. This avoids conflicts when both are loaded on the same page.
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/tender-foxes-rest.md b/.changeset/tender-foxes-rest.md
@@ -0,0 +1,5 @@
+---
+"rrvideo": patch
+---
+
+Adjust replay timeout to be based on video duration plus a 2-minute buffer instead of a fixed 2-minute timeout. This prevents timeout errors for longer recordings.
diff --git a/.changeset/twenty-flies-attend.md b/.changeset/twenty-flies-attend.md
@@ -0,0 +1,5 @@
+---
+"rrvideo": patch
+---
+
+Add better logging on playback and fix the use of rrweb-player so it doesn't stall and fail playback
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/guide.md b/guide.md
@@ -33,6 +33,20 @@ This also can be done by using the `@rrweb/record` package and the CDN service:
 <script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
 ```
 
+The recorder UMD build exposes a global named `rrwebRecord`.
+
+#### Only include the replayer code
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@rrweb/replay@latest/dist/style.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/@rrweb/replay@latest/dist/replay.umd.min.cjs"></script>
+```
+
+The replayer UMD build exposes a global named `rrwebReplay`.
+
 #### Other packages
 
 Besides the `rrweb` and `@rrweb/record` packages, rrweb also provides other packages for different usage.
@@ -326,7 +340,7 @@ rrweb-player can also be included with `<script>`：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/rrweb-player.umd.cjs"></script>
 ```
 
 Or installed by using NPM：
diff --git a/guide.zh_CN.md b/guide.zh_CN.md
@@ -30,6 +30,20 @@ rrweb 代码分为录制和回放两部分，大多数时候用户在被录制
 <script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
 ```
 
+录制端的 UMD build 会暴露全局变量 `rrwebRecord`。
+
+#### 仅引入回放部分
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@rrweb/replay@latest/dist/style.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/@rrweb/replay@latest/dist/replay.umd.min.cjs"></script>
+```
+
+回放端的 UMD build 会暴露全局变量 `rrwebReplay`。
+
 #### 其他包
 
 除了 `rrweb` 和 `@rrweb/record` 包之外，rrweb 还提供了其他不同用途的包。
@@ -320,7 +334,7 @@ rrweb-player 同样可以使用 CDN 方式安装：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/rrweb-player.umd.cjs"></script>
 ```
 
 或者通过 npm 安装：
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.20",
     "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.20",
     "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.20",
     "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.20",
     "rrweb": "^2.0.0-alpha.20",
     "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.20",
     "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.20",
     "rrweb": "^2.0.0-alpha.20",
     "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/record/vite.config.ts b/packages/record/vite.config.ts
@@ -1,4 +1,4 @@
 import path from 'path';
 import config from '../../vite.config.default';
 
-export default config(path.resolve(__dirname, 'src/index.ts'), 'rrweb');
+export default config(path.resolve(__dirname, 'src/index.ts'), 'rrwebRecord');
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/replay/vite.config.ts b/packages/replay/vite.config.ts
@@ -1,4 +1,4 @@
 import path from 'path';
 import config from '../../vite.config.default';
 
-export default config(path.resolve(__dirname, 'src/index.ts'), 'rrweb');
+export default config(path.resolve(__dirname, 'src/index.ts'), 'rrwebReplay');
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/src/index.ts b/packages/rrvideo/src/index.ts
@@ -57,22 +57,27 @@ 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: {
+            ...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>
@@ -139,6 +144,16 @@ export async function transformToVideo(options: RRvideoConfig) {
   });
   const page = await context.newPage();
   await page.goto('about:blank');
+  // 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,12 +162,41 @@ 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))),
-  );
+  await new Promise<void>((resolve, reject) => {
+    const timeoutBuffer = 120000; // 2 minute timeout buffer
+    const videoStartTime = events[0]?.timestamp;
+    const videoEndTime = events[events.length - 1]?.timestamp;
+    const videoDuration = videoEndTime - videoStartTime;
+    const videoPlaybackSpeed = options.rrwebPlayer?.speed || 1;
+    const expectedPlaybackTime = videoDuration / videoPlaybackSpeed;
+    console.log(
+      `[DEBUG] Expected playback time: ${expectedPlaybackTime}ms (video duration: ${videoDuration}ms, playback speed: ${videoPlaybackSpeed}x)`,
+    );
+    const totalTimeout = expectedPlaybackTime + timeoutBuffer;
+    const timeout = setTimeout(() => {
+      console.error('[DEBUG] Replay timeout - finish event never fired');
+      reject(new Error('Replay timeout'));
+    }, totalTimeout); // playback + 2 minute timeout
+
+    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);
+      });
+  });
   const videoPath = (await page.video()?.path()) || '';
   const cleanFiles = async (videoPath: string) => {
     await fs.remove(videoPath);
diff --git a/packages/rrvideo/test/cli.test.ts b/packages/rrvideo/test/cli.test.ts
@@ -18,18 +18,19 @@ describe('should be able to run cli', () => {
     await fs.remove(path.resolve(__dirname, './generated'));
   });
 
-  const execOptions = { stdio: 'pipe', timeout: 60_000 } as const;
+  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', execOptions);
+      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',
-      execOptions,
+      execOptionsWithOutput,
     );
     const outputFile = path.resolve(__dirname, '../rrvideo-output.webm');
     expect(fs.existsSync(outputFile)).toBe(true);
@@ -40,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}`,
-      execOptions,
+      execOptionsWithOutput,
     );
     expect(fs.existsSync(outputFile)).toBe(true);
     fs.removeSync(outputFile);
diff --git a/packages/rrweb-player/README.md b/packages/rrweb-player/README.md
@@ -19,7 +19,7 @@ rrweb-player can also be included with `<script>`：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/rrweb-player.umd.cjs"></script>
 ```
 
 Or installed by using NPM：
diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
@@ -16,7 +16,7 @@
     "svelte-preprocess": "^5.0.3",
     "svelte2tsx": "^0.7.30",
     "tslib": "^2.0.0",
-    "vite": "^5.3.1"
+    "vite": "^6.0.1"
   },
   "dependencies": {
     "@tsconfig/svelte": "^1.0.0",
diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
@@ -63,7 +63,7 @@
     "ts-node": "^7.0.1",
     "tslib": "^1.9.3",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1",
     "vitest": "^1.4.0"
   },
diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -76,7 +76,7 @@
     "ts-node": "^10.9.1",
     "tslib": "^2.3.1",
     "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "vite": "^6.0.1",
     "vite-plugin-dts": "^3.9.1"
   },
   "dependencies": {
diff --git a/packages/types/package.json b/packages/types/package.json
diff --git a/packages/utils/package.json b/packages/utils/package.json
diff --git a/packages/web-extension/package.json b/packages/web-extension/package.json
diff --git a/vite.config.default.ts b/vite.config.default.ts
diff --git a/yarn.lock b/yarn.lock

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"rrvideo": patch
 +---
++
 +Adjust replay timeout to be based on video duration plus a 2-minute buffer instead of a fixed 2-minute timeout. This prevents timeout errors for longer recordings.