((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);
if ((await fs.readdir(defaultVideoDir)).length === 0) {
await fs.remove(defaultVideoDir);
}
};
await context.close();
await Promise.all([
fs
.move(videoPath, outputPath, { overwrite: true })
.catch((e) => {
console.error(
"Can't create video file. Please check the output path.",
e,
);
})
.finally(() => void cleanFiles(videoPath)),
browser.close(),
]);
return outputPath;
}
================================================
FILE: packages/rrvideo/test/cli.test.ts
================================================
import { execSync } from 'child_process';
import * as fs from 'fs-extra';
import * as path from 'path';
import exampleEvents from './events/example';
describe('should be able to run cli', () => {
beforeAll(() => {
fs.mkdirSync(path.resolve(__dirname, './generated'));
fs.writeJsonSync(
path.resolve(__dirname, './generated/example.json'),
exampleEvents,
{
spaces: 2,
},
);
});
afterAll(async () => {
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', { ...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',
execOptionsWithOutput,
);
const outputFile = path.resolve(__dirname, '../rrvideo-output.webm');
expect(fs.existsSync(outputFile)).toBe(true);
fs.removeSync(outputFile);
});
it('should generate a video with specific output path', () => {
const outputFile = path.resolve(__dirname, './generated/output.webm');
execSync(
`node ./build/cli.js --input ./test/generated/example.json --output ${outputFile}`,
execOptionsWithOutput,
);
expect(fs.existsSync(outputFile)).toBe(true);
fs.removeSync(outputFile);
});
});
================================================
FILE: packages/rrvideo/test/events/example.ts
================================================
import { EventType, IncrementalSource } from '@rrweb/types';
import type { eventWithTime } from '@rrweb/types';
const now = Date.now();
const events: eventWithTime[] = [
{
type: EventType.DomContentLoaded,
data: {},
timestamp: now,
},
{
type: EventType.Load,
data: {},
timestamp: now + 100,
},
{
type: EventType.Meta,
data: {
href: 'http://localhost',
width: 1000,
height: 800,
},
timestamp: now + 100,
},
// full snapshot:
{
data: {
node: {
id: 1,
type: 0,
childNodes: [
{ id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
{
id: 3,
type: 2,
tagName: 'html',
attributes: { lang: 'en' },
childNodes: [
{
id: 4,
type: 2,
tagName: 'head',
attributes: {},
childNodes: [],
},
{
id: 5,
type: 2,
tagName: 'body',
attributes: {},
childNodes: [],
},
],
},
],
},
initialOffset: { top: 0, left: 0 },
},
type: EventType.FullSnapshot,
timestamp: now + 100,
},
// mutation that adds select elements
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Mutation,
texts: [],
attributes: [],
removes: [],
adds: [
{
parentId: 5,
nextId: null,
node: {
type: 2,
tagName: 'select',
childNodes: [],
attributes: {},
id: 26,
},
},
{
parentId: 26,
nextId: null,
node: {
type: 2,
tagName: 'option',
attributes: { value: 'valueC' },
childNodes: [],
id: 27,
},
},
{
parentId: 27,
nextId: null,
node: { type: 3, textContent: 'C', id: 28 },
},
{
parentId: 26,
nextId: 27,
node: {
type: 2,
tagName: 'option',
attributes: { value: 'valueB', selected: true },
childNodes: [],
id: 29,
},
},
{
parentId: 26,
nextId: 29,
node: {
type: 2,
tagName: 'option',
attributes: { value: 'valueA' },
childNodes: [],
id: 30,
},
},
{
parentId: 30,
nextId: null,
node: { type: 3, textContent: 'A', id: 31 },
},
{
parentId: 29,
nextId: null,
node: { type: 3, textContent: 'B', id: 32 },
},
],
},
timestamp: now + 200,
},
// input event
{
type: EventType.IncrementalSnapshot,
data: {
source: IncrementalSource.Input,
text: 'valueA',
isChecked: false,
id: 26,
},
timestamp: now + 300,
},
];
export default events;
================================================
FILE: packages/rrvideo/test/tsconfig.json
================================================
{
"compilerOptions": {}
}
================================================
FILE: packages/rrvideo/tsconfig.json
================================================
{
"compilerOptions": {
"composite": true,
"target": "ES6",
"module": "commonjs",
"declaration": true,
"sourceMap": true,
"outDir": "./build",
"rootDir": "./src",
"strictNullChecks": true,
"noImplicitAny": true,
"strictBindCallApply": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"exclude": ["build", "node_modules", "test"],
"references": [
{
"path": "../rrweb-player"
},
{
"path": "../types"
}
]
}
================================================
FILE: packages/rrweb/.gitignore
================================================
.vscode
.idea
node_modules
package-lock.json
# yarn.lock
tsconfig.tsbuildinfo
build
dist
es
lib
typings
temp
*.log
.env
__diff_output__
================================================
FILE: packages/rrweb/.release-it.json
================================================
{
"non-interactive": true,
"hooks": {
"before:init": ["npm run bundle", "npm run typings"]
},
"git": {
"requireCleanWorkingDir": false
},
"github": {
"release": true
}
}
================================================
FILE: packages/rrweb/CHANGELOG.md
================================================
# rrweb
## 2.0.0-alpha.20
### Patch Changes
- [#1763](https://github.com/rrweb-io/rrweb/pull/1763) [`6388fb5`](https://github.com/rrweb-io/rrweb/commit/6388fb5a468e1a860ab8bb5c6826c811dcc3100c) Thanks [@wfk007](https://github.com/wfk007)! - fix: wujie monkeypatches ownerDocument
- Updated dependencies [[`6388fb5`](https://github.com/rrweb-io/rrweb/commit/6388fb5a468e1a860ab8bb5c6826c811dcc3100c)]:
- @rrweb/utils@2.0.0-alpha.20
- rrweb-snapshot@2.0.0-alpha.20
- rrdom@2.0.0-alpha.20
- @rrweb/types@2.0.0-alpha.20
## 2.0.0-alpha.19
### Patch Changes
- [#1615](https://github.com/rrweb-io/rrweb/pull/1615) [`dc20cd4`](https://github.com/rrweb-io/rrweb/commit/dc20cd45cc63058325784444af6bd32ed2cace48) Thanks [@eoghanmurray](https://github.com/eoghanmurray)! - Improve performance of splitCssText for
Verify that block class bugs are fixed
Document
canvas shader
================================================
FILE: packages/rrweb/test/html/canvas-webgl-square.html
================================================
canvas webgl square
================================================
FILE: packages/rrweb/test/html/canvas-webgl.html
================================================
canvas
================================================
FILE: packages/rrweb/test/html/canvas.html
================================================
canvas
================================================
FILE: packages/rrweb/test/html/dialog.html
================================================
I'm a dialog
================================================
FILE: packages/rrweb/test/html/empty.html
================================================
Empty
================================================
FILE: packages/rrweb/test/html/form.html
================================================
form fields
================================================
FILE: packages/rrweb/test/html/frame-image-blob-url.html
================================================
Frame with image
================================================
FILE: packages/rrweb/test/html/frame1.html
================================================
Frame 1
frame 1
================================================
FILE: packages/rrweb/test/html/frame2.html
================================================
Frame 2
frame 2
================================================
FILE: packages/rrweb/test/html/hello-world.html
================================================
Hello World!
Hello world!
================================================
FILE: packages/rrweb/test/html/ignore.html
================================================
ignore fields
================================================
FILE: packages/rrweb/test/html/image-blob-url.html
================================================
Image with blob:url
================================================
FILE: packages/rrweb/test/html/link.html
================================================
Link click
not link
link
================================================
FILE: packages/rrweb/test/html/main.html
================================================
Main
================================================
FILE: packages/rrweb/test/html/mask-text.html
================================================
Mask text
mask1
mask2
unmask1
================================================
FILE: packages/rrweb/test/html/move-node.html
================================================
1
================================================
FILE: packages/rrweb/test/html/mutation-observer.html
================================================
mutation observer
Document
Toggle show password
================================================
FILE: packages/rrweb/test/html/polyfilled-shadowdom-mutation.html
================================================
================================================
FILE: packages/rrweb/test/html/react-styled-components.html
================================================
react styled components
================================================
FILE: packages/rrweb/test/html/select2.html
================================================
Select2 3.5
Select2 is a jQuery replacement for select boxes.
A
B
================================================
FILE: packages/rrweb/test/html/shadow-dom.html
================================================
Shadow DOM Observer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit
officiis necessitatibus laborum asperiores et adipisci dolores corporis,
vero distinctio voluptas, suscipit commodi architecto, aliquam fugit.
Nesciunt labore reiciendis blanditiis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat odit
officiis necessitatibus laborum asperiores et adipisci dolores corporis,
vero distinctio voluptas, suscipit commodi architecto, aliquam fugit.
Nesciunt labore reiciendis blanditiis!
================================================
FILE: packages/rrweb/test/html/shuffle.html
================================================
shuffle
================================================
FILE: packages/rrweb/test/html/style.html
================================================
style
================================================
FILE: packages/rrweb/test/html/video.html
================================================
Video
Big Buck Bunny
================================================
FILE: packages/rrweb/test/integration.test.ts
================================================
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import {
assertSnapshot,
startServer,
getServerURL,
launchPuppeteer,
waitForRAF,
waitForIFrameLoad,
replaceLast,
generateRecordSnippet,
ISuite,
} from './utils';
import type { recordOptions } from '../src/types';
import { eventWithTime, NodeType, EventType } from '@rrweb/types';
import { visitSnapshot } from 'rrweb-snapshot';
describe('record integration tests', function (this: ISuite) {
vi.setConfig({ testTimeout: 10_000 });
const getHtml = (
fileName: string,
options: recordOptions = {},
): string => {
const filePath = path.resolve(__dirname, `./html/${fileName}`);
const html = fs.readFileSync(filePath, 'utf8');
return replaceLast(
html,
' 
## Core Team Members
