xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: Migrate build to vite (#1033)

Browse Source 
* Chore: Add move most types from rrweb to @rrweb/types package

* Split off type imports

* Split off type import to its own line

* Get vite to generate type definitions

* Apply formatting changes

* noEmit not allowed in tsconfig, moved it to build step

* Migrate rrdom-nodejs build to vite

* Apply formatting changes

* Migrate rrweb-snapshot to vite

* Unify configs

* Chore: Migrate rrdom to vite

Turns out what we where doing by overwriting `public textContent: string | undefined` as a getter in a subclass is something that isn't allowed in typescript. Because we where using `// @ts-ignore`  to hide this error our bundler chose to allow the overwrite. Vite choses to disallow the overwrite making all subclasses' `textContent` undefined.
To mitigate this we're using an abstract class, which does allow sub classes to decide if they wan't to use getters or not.

* Chore: Migrate rrweb to vite WIP

* build:browser was removed (for now)

* BREAKING: moved rrweb-plugin-console to its own npm module

This removes console from rrweb-all.js

* Support cjs files in startServer

* Move canvas-webrtc plugin to its own package

* Chore: move sequential-id plugin to its own package

* Chore: Configure rrweb's vite bundling

* `Id` had lowercase `d` before, making it lowercase again

* Test: Move console tests to their own package

* remove unused utils from rrdom

* pull in latest version of master
something when wrong earlier when resolving merge conflicts, this should be correct

* Fix type casting issue in diff.ts

* Fix typo

* Fix duplicate entries in package.json and tsconfig.json

* Apply formatting changes

* Update dependencies in package.json files

* Update dependencies to use Vite 5.2.8 in package.json files

* Get tests passing for rrdom

`apply virtual style rules to node` tests need to be moved to rrweb to avoid circular dependencies

* Fix image loading issue in integration tests

* Move pack/unpack to its own @rrweb/packer module

* Get tests to work in rrdom-nodejs

* Port tests in rrweb-snapshot to vitest and fix them

* Fix tests for rrweb-plugin-console-record

* Add @rrweb/all package

* Fix publint and attw errors for rrdom and @rrweb/types

* Use shared vitest.config.ts in rrweb-snapshot package

* Fix publint and attw issues for rrweb-snapshot

* Export `ReplayPlugin` type directly from rrweb

* Fix publint and attw issues for packages

* Fix publint & attw issue.

I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md

And had to choose one of these three methods described here:
https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility
And I ended up going for the method described here:
1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)

The redirect method seemed the least invasive and most effective.

* Fix publint & attw issue.

I was bumping into this issue: 3729bc2a3c/docs/problems/NoResolution.md

And had to choose one of these three methods described here:
https://github.com/andrewbranch/example-subpath-exports-ts-compat?tab=readme-ov-file#typescript-friendly-strategies-for-packagejson-subpath-exports-compatibility
And I ended up going for the method described here:
1ffe3425b0/examples/node_modules/package-json-redirects (package-json-redirects)

The redirect method seemed the least invasive and most effective.

* move some rrdom tests that require rrweb to rrweb package

* Use pre-jest 29 syntax for snapshotting

* get rrweb passing publint and attw

* const enum does not work with isolated modules flag

* Fix script tag type in webgl.test.ts.snap and update rrweb.umd.cjs path in webgl.test.ts

* Fix paths

* Move tests for console record plugin and fix bundle path

* Fix tests for rrweb

* pack integration tests were moved to @rrweb/all

* Update rrweb bundle path in test files

* Fix flaky scroll emit from test

* Migrate rrweb's tests over to vitest and make them pass

* Make sure benchmarks & updating tests work

* Remove jest from rrweb

* Fix paths

* always use rrweb's own cssom

* Update tsconfig.json for rrweb-plugin-sequential-id-record

Fixes this error:
Error: @rrweb/rrweb-plugin-sequential-id-record:prepublish: tsconfig.json(9,5): error TS6377: Cannot write file '/home/runner/work/rrweb/rrweb/tsconfig.tsbuildinfo' because it will overwrite '.tsbuildinfo' file generated by referenced project '/home/runner/work/rrweb/rrweb/packages/rrweb'

* Add tsbuildinfo config to extended tsconfig files

* Move rrdom over to vitest

* Apply formatting changes

* Update rrweb imports to use the new package structure

* extend rrweb-snapshot's tsconfig from monorepo base config

* extend @rrweb/types's tsconfig from monorepo base config

* extend rrdom's tsconfig from monorepo base config

* extend rrdom-nodejs's tsconfig from monorepo base config

* extend web-extension's tsconfig from monorepo base config

* unify tsconfigs

* Continue when tests fail

* Add stricter type checking

* Add check-types global command

* remove jest

* Remove unused code

* Add check-types command to build script

* Fix linting issues

* Add setup Chrome action for CI/CD workflow

* Update puppeteer version in package.json for rrweb

* Update Chrome setup in CI/CD workflow

* Update Chrome setup in CI/CD workflow

* Add Chrome setup and test cache location

* Update CI/CD workflow to test chrome cache location

* Add chrome installation step to CI/CD workflow

* Update Puppeteer configuration for headless testing

* Update dependencies and workflow configuration

* Use same version of chrome on CI as is run locally

* Use version of chrome that seems to work with rrdom tests

* Try using puppeteerrc to define chrome version

* Add .cache directory to .gitignore

* Move global flag to vitest config

* Update puppeteer version to 20.9.0

* Update console log messages in rrweb-plugin-console-record for new puppeteer version

* Remove redundant Chrome setup from CI/CD workflow

* Add minification and umd for all built files

* Update import paths for rrweb dist files

* Add @rrweb/replay and @rrweb/record

* Add script to lint packages

* Apply formatting changes

* exclude styles export from typescript package type checking

* WIP Move rrweb-player over to vite

* Apply formatting changes

* chore: Update rrweb plugin import paths

* Remove rollup from rrweb-player

* Fix typing issues

* Fix typing issues

* chore: Update rrweb-player to use vite for build process

* Apply formatting changes

* chore: Export Player class in rrweb-player/src/main.ts

Makes attw happy

* Apply formatting changes

* Gets wiped by yarn workspaces-to-typescript-project-references

* Add .eslintignore and .eslintrc.cjs files for rrweb-player package

* Apply formatting changes

* Update dependencies in rrweb-player/package.json

* Apply formatting changes

* chore: Update eslint configuration for rrweb-player package

* Apply formatting changes

* chore: Remove unused files from rrweb-player package

* Apply formatting changes

* chore: Update rrweb-player import path to use rrweb-player.cjs

* chore: Update addEventListener signature in rrweb-player

* Apply formatting changes

* Add .eslintignore and update .gitignore files for to root

* Apply formatting changes

* Update documentation

* Update @rrweb/types package description

* Apply formatting changes

* Update build and run commands in CONTRIBUTING.md

* Apply formatting changes

* Update package versions to 2.0.0-alpha.13

* Apply formatting changes

* Apply formatting changes

* Fix import statement in media/index.ts

* Apply formatting changes

* chore: Update .gitignore to exclude build and dist directories

* Apply formatting changes

* Apply formatting changes

* Migrate setTimeout to vitest

* Apply formatting changes

* Apply formatting changes

* Fix isNativeShadowDom function signature in utils.ts

* try out jsr

* Apply formatting changes

* Update package versions to 2.0.0-alpha.14

* Apply formatting changes

* Fix name of rrwebSnapshot object

* Apply formatting changes

* Remove unused lock files

* Apply formatting changes

* Update rrweb bundle path to use umd.cjs format

* Apply formatting changes

* Trigger tests to run again

* Rename snapshots for vitest

* Apply formatting changes

* Ping CI

* Apply formatting changes

* Ping CI

* Apply formatting changes

* Ignore files generated by svelte-kit for prettier

* Correct Player object
This commit is contained in:
Justin Halsall
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 4055c69e26
commit 5a85ddf013
266 changed files with 11616 additions and 9614 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
packages/rrweb/README.md
View File

@@ -7,7 +7,7 @@
# rrweb
**This is a simpler version of the [original rrewb README](../../README.md) within this rrweb subpackage**
**This is a simpler version of the [original rrweb README](../../README.md) within this rrweb subpackage**
[中文文档](../../README.zh_CN.md)
@@ -28,9 +28,7 @@ rrweb refers to 'record and replay the web', which is a tool for recording and r
## Roadmap
- rrdom: an ad-hoc DOM for rrweb session data [#419](https://github.com/rrweb-io/rrweb/issues/419)
- storage engine: do deduplication on a large number of rrweb sessions
- more end-to-end tests
- compact mutation data in common patterns
- provide plugins via the new plugin API, including:
- XHR plugin
@@ -64,6 +62,58 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
[Using the REPL tool](../../guide.md#REPL-tool)
## Sponsors
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
### Gold Sponsors 🥇
<div dir="auto">
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
</div>
### Silver Sponsors 🥈
<div dir="auto">
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
</div>
### Bronze Sponsors 🥉
<div dir="auto">
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
</div>
### Backers
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
## Core Team Members
<table>
@@ -76,16 +126,18 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
alt=""
/>
<br /><sub><b>Yuyz0112</b></sub>
<br /><br />
</a>
</td>
<td align="center">
<a href="https://github.com/Mark-Fenng">
<a href="https://github.com/YunFeng0817">
<img
src="https://avatars.githubusercontent.com/u/27533910?s=100"
width="100px;"
alt=""
/>
<br /><sub><b>Mark-Fenng</b></sub>
<br /><sub><b>Yun Feng</b></sub>
<br /><br />
</a>
</td>
<td align="center">
@@ -96,6 +148,7 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
alt=""
/>
<br /><sub><b>eoghanmurray</b></sub>
<br /><br />
</a>
</td>
<td align="center">
@@ -106,12 +159,13 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
alt=""
/>
<br /><sub><b>Juice10</b></sub>
<br /><sub>open for rrweb consulting</sub>
</a>
</td>
</tr>
</table>
## Who's using rrweb
## Who's using rrweb?
<table>
<tr>
@@ -131,15 +185,15 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
</a>
</td>
<td align="center">
<a href="https://cux.io" target="_blank">
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://static.cux.io/logo.svg">
<a href="https://recordonce.com/" target="_blank">
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://recordonce.com/" target="_blank">
<img width="195px" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
<a href="https://cux.io" target="_blank">
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
</a>
</td>
<td align="center">
@@ -147,5 +201,37 @@ In addition to adding integration tests and unit tests, rrweb also provides a RE
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
</a>
</td>
<td align="center">
<a href="https://highlight.io" target="_blank">
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
</a>
</td>
<td align="center">
<a href="https://analyzee.io" target="_blank">
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://requestly.io" target="_blank">
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
</a>
</td>
<td align="center">
<a href="https://gleap.io" target="_blank">
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
</a>
</td>
<td align="center">
<a href="https://uxwizz.com" target="_blank">
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
</a>
</td>
<td align="center">
<a href="https://www.howdygo.com" target="_blank">
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
</a>
</td>
</tr>
</table>

18
packages/rrweb/jest.config.js
View File

@@ -1,18 +0,0 @@
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/**.test.ts'],
moduleNameMapper: {
'\\.css$': 'identity-obj-proxy',
},
/**
* Keeps old (pre-jest 29) snapshot format
* its a bit ugly and harder to read than the new format,
* so we might want to remove this in its own PR
*/
snapshotFormat: {
escapeString: true,
printBasicPrototype: true,
},
};

73
packages/rrweb/package.json
View File

@@ -4,25 +4,23 @@
"description": "record and replay the web",
"scripts": {
"prepare": "npm run prepack",
"prepack": "npm run bundle",
"retest": "jest --testPathIgnorePatterns test/benchmark",
"build-and-test": "yarn bundle:browser && yarn retest",
"prepack": "npm run build",
"retest": "vitest run --exclude test/benchmark",
"build-and-test": "yarn build && yarn retest",
"test:headless": "PUPPETEER_HEADLESS=true yarn build-and-test",
"test:headful": "PUPPETEER_HEADLESS=false yarn build-and-test",
"test": "yarn test:headless",
"test:watch": "yarn test:headless -- --watch",
"test:update": "yarn test:headless -- --updateSnapshot",
"retest:update": "PUPPETEER_HEADLESS=true yarn retest -- --updateSnapshot",
"repl": "yarn bundle:browser && node scripts/repl.js",
"live-stream": "yarn bundle:browser && node scripts/stream.js",
"dev": "yarn bundle:browser --watch",
"bundle:browser": "cross-env BROWSER_ONLY=true rollup --config",
"bundle": "rollup --config",
"typings": "tsc -d --declarationDir typings",
"test:watch": "yarn build && PUPPETEER_HEADLESS=true yarn vitest --exclude test/benchmark",
"test:update": "yarn test:headless --update",
"retest:update": "PUPPETEER_HEADLESS=true yarn retest --update",
"repl": "yarn build && node scripts/repl.js",
"live-stream": "yarn build && node scripts/stream.js",
"dev": "vite build --watch",
"build": "tsc -noEmit && vite build",
"check-types": "tsc -noEmit",
"prepublish": "npm run typings && npm run bundle",
"prepublish": "npm run build",
"lint": "yarn eslint src",
"benchmark": "jest test/benchmark"
"benchmark": "vitest run --maxConcurrency 1 --no-file-parallelism test/benchmark"
},
"type": "module",
"repository": {
@@ -32,17 +30,28 @@
"keywords": [
"rrweb"
],
"main": "lib/rrweb-all.cjs",
"module": "es/rrweb/packages/rrweb/src/entries/all.js",
"unpkg": "dist/rrweb.js",
"sideEffects": false,
"typings": "typings/entries/all.d.ts",
"main": "./dist/rrweb.umd.cjs",
"module": "./dist/rrweb.js",
"unpkg": "./dist/rrweb.umd.cjs",
"typings": "dist/rrweb.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/rrweb.d.ts",
"default": "./dist/rrweb.js"
},
"require": {
"types": "./dist/rrweb.d.cts",
"default": "./dist/rrweb.cjs"
}
},
"./dist/style.css": "./dist/style.css"
},
"files": [
"dist",
"lib",
"es",
"typings"
"package.json"
],
"sideEffects": false,
"author": "yanzhen@smartx.com",
"license": "MIT",
"bugs": {
@@ -50,43 +59,31 @@
},
"homepage": "https://github.com/rrweb-io/rrweb#readme",
"devDependencies": {
"@rollup/plugin-node-resolve": "^13.1.3",
"@types/chai": "^4.1.6",
"@types/dom-mediacapture-transform": "0.1.4",
"@types/inquirer": "^8.2.1",
"@types/jest": "^29.5.0",
"@types/jest-image-snapshot": "^6.1.0",
"@types/node": "^18.15.11",
"@types/offscreencanvas": "^2019.6.4",
"construct-style-sheets-polyfill": "^3.1.0",
"cross-env": "^5.2.0",
"esbuild": "^0.14.38",
"fast-mhtml": "^1.1.9",
"identity-obj-proxy": "^3.0.0",
"ignore-styles": "^5.0.1",
"inquirer": "^9.0.0",
"jest": "^29.6.0",
"jest-environment-jsdom": "^29.6.0",
"jest-image-snapshot": "^6.2.0",
"jest-snapshot": "^29.6.2",
"puppeteer": "^20.9.0",
"rollup": "^2.68.0",
"rollup-plugin-esbuild": "^4.9.1",
"rollup-plugin-postcss": "^3.1.1",
"rollup-plugin-rename-node-modules": "^1.3.1",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-web-worker-loader": "^1.6.1",
"simple-peer-light": "^9.10.0",
"ts-jest": "^29.1.1",
"ts-node": "^10.9.1",
"tslib": "^2.3.1"
"tslib": "^2.3.1",
"typescript": "^4.7.3",
"vite": "^5.2.8",
"vite-plugin-dts": "^3.8.1"
},
"dependencies": {
"@rrweb/types": "^2.0.0-alpha.14",
"@types/css-font-loading-module": "0.0.7",
"@xstate/fsm": "^1.4.0",
"base64-arraybuffer": "^1.0.1",
"fflate": "^0.4.4",
"mitt": "^3.0.0",
"rrdom": "^2.0.0-alpha.14",
"rrweb-snapshot": "^2.0.0-alpha.14"

4
packages/rrweb/rrweb-record/package.json Normal file
View File

@@ -0,0 +1,4 @@
{
"main": "../dist/rrweb-record.cjs",
"types": "../dist/rrweb-record.d.ts"
}

4
packages/rrweb/rrweb-replay/package.json Normal file
View File

@@ -0,0 +1,4 @@
{
"main": "../dist/rrweb-replay.cjs",
"types": "../dist/rrweb-replay.d.ts"
}

8
packages/rrweb/scripts/repl.js
View File

@@ -13,7 +13,7 @@ const __dirname = path.dirname(__filename);
const emitter = new EventEmitter();
function getCode() {
const bundlePath = path.resolve(__dirname, '../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../dist/rrweb.umd.cjs');
return fs.readFileSync(bundlePath, 'utf8');
}
@@ -197,7 +197,7 @@ void (async () => {
}
await page.addStyleTag({
path: path.resolve(__dirname, '../dist/rrweb.css'),
path: path.resolve(__dirname, '../dist/style.css'),
});
await page.evaluate(`${code}
const events = ${JSON.stringify(events)};
@@ -228,10 +228,10 @@ void (async () => {
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Record @${time}</title>
<link rel="stylesheet" href="../dist/rrweb.css" />
<link rel="stylesheet" href="../dist/style.css" />
</head>
<body>
<script src="../dist/rrweb.js"></script>
<script src="../dist/rrweb.umd.cjs"></script>
<script>
/*<!--*/
const events = ${JSON.stringify(events).replace(

110
packages/rrweb/scripts/stream.js
View File

@@ -17,68 +17,49 @@ const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const emitter = new EventEmitter();
const code = fs.readFileSync(path.join(__dirname, '../dist/rrweb.js'), 'utf8');
const pluginCode = fs.readFileSync(
path.join(__dirname, '../dist/plugins/canvas-webrtc-record.js'),
'utf8',
);
async function injectRecording(frame) {
async function injectRecording(frame, serverURL) {
try {
await frame.evaluate(
(rrwebCode, pluginCode) => {
const win = window;
if (win.__IS_RECORDING__) return;
win.__IS_RECORDING__ = true;
await frame.addScriptTag({ url: `${serverURL}/rrweb.umd.cjs` });
await frame.addScriptTag({
url: `${serverURL}/plugins/rrweb-plugin-canvas-webrtc-record.js`,
});
await frame.evaluate(() => {
const win = window;
if (win.__IS_RECORDING__) return;
win.__IS_RECORDING__ = true;
(async () => {
function loadScript(code) {
const s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML = code;
if (document.head) {
document.head.append(s);
} else {
requestAnimationFrame(() => {
document.head.append(s);
});
}
}
loadScript(rrwebCode);
loadScript(pluginCode);
win.events = [];
window.record = win.rrweb.record;
window.plugin =
new rrwebCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord({
signalSendCallback: (msg) => {
// [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
_signal(msg);
},
});
window.record({
emit: (event) => {
win.events.push(event);
win._captureEvent(event);
(async () => {
win.events = [];
window.record = win.rrweb.record;
window.plugin =
new rrwebPluginCanvasWebRTCRecord.RRWebPluginCanvasWebRTCRecord({
signalSendCallback: (msg) => {
// [record#callback] provides canvas id, stream, and webrtc sdpOffer signal & connect message
_signal(msg);
},
plugins: [window.plugin.initPlugin()],
recordCanvas: false,
recordCrossOriginIframes: true,
collectFonts: true,
inlineImages: true,
});
})();
},
code,
pluginCode,
);
window.record({
emit: (event) => {
win.events.push(event);
win._captureEvent(event);
},
plugins: [window.plugin.initPlugin()],
recordCanvas: false,
recordCrossOriginIframes: true,
collectFonts: true,
inlineImages: true,
});
})();
});
} catch (e) {
console.error('failed to inject script, error:', e);
}
}
async function startReplay(page, serverURL, recordedPage) {
page.on('console', (msg) => console.log('REPLAY PAGE LOG:', msg.text()));
await recordedPage.exposeFunction('_signal', async (signal) => {
await page.evaluate((signal) => {
// [replay#signalReceive] setups up peer and starts creating counter offer
@@ -99,22 +80,23 @@ async function startReplay(page, serverURL, recordedPage) {
}, id);
});
await page.addScriptTag({ url: `${serverURL}/rrweb.js` });
await page.addScriptTag({ url: `${serverURL}/rrweb.umd.cjs` });
await page.addScriptTag({
url: `${serverURL}/plugins/canvas-webrtc-replay.js`,
url: `${serverURL}/plugins/rrweb-plugin-canvas-webrtc-replay.js`,
});
return page.evaluate(() => {
window.plugin = new rrwebCanvasWebRTCReplay.RRWebPluginCanvasWebRTCReplay({
canvasFoundCallback(canvas, context) {
console.log('canvas', canvas, context);
// [replay#onBuild] gets id of canvas element and sends to recorded page
_canvas(context.id);
},
signalSendCallback(data) {
_signal(JSON.stringify(data));
},
});
window.plugin =
new rrwebPluginCanvasWebRTCReplay.RRWebPluginCanvasWebRTCReplay({
canvasFoundCallback(canvas, context) {
console.log('canvas', canvas, context);
// [replay#onBuild] gets id of canvas element and sends to recorded page
_canvas(context.id);
},
signalSendCallback(data) {
_signal(JSON.stringify(data));
},
});
window.replayer = new rrweb.Replayer([], {
UNSAFE_replayCanvas: true,
@@ -196,7 +178,7 @@ void (async () => {
await replayerPage.goto('about:blank');
await replayerPage.addStyleTag({
path: path.resolve(__dirname, '../dist/rrweb.css'),
path: path.resolve(__dirname, '../dist/style.css'),
});
const recordingBrowser = await puppeteer.launch({

16
packages/rrweb/scripts/utils.js
View File

@@ -20,12 +20,20 @@ export const startServer = (defaultPort = 3030) =>
.normalize(parsedUrl.pathname)
.replace(/^(\.\.[\/\\])+/, '');
let pathname = path.join(__dirname, sanitizePath);
if (
/^\/rrweb.*\.js.*/.test(sanitizePath) ||
/^\/plugins\/.*/.test(sanitizePath)
) {
if (/^\/rrweb.*\.c?js.*/.test(sanitizePath)) {
pathname = path.join(__dirname, `../dist`, sanitizePath);
}
if (/^\/plugins\/.*/.test(sanitizePath)) {
console.log('sanitizePath', sanitizePath);
const pluginName = sanitizePath.split('/')[2].replace('.js', '');
pathname = path.join(
__dirname,
`../../plugins/`,
pluginName,
`dist/${pluginName}.umd.cjs`,
);
console.log('pathname', pathname);
}
try {
const data = fs.readFileSync(pathname);
const ext = path.parse(pathname).ext;

4
packages/rrweb/src/entries/all.ts
View File

@@ -1,4 +0,0 @@
export * from '../index';
export * from '../packer';
export * from '../plugins/console/record';
export * from '../plugins/console/replay';

2
packages/rrweb/src/entries/record-pack.ts
View File

@@ -1,2 +0,0 @@
export * from '../record/index';
export * from '../packer/pack';

3
packages/rrweb/src/entries/record.ts Normal file
View File

@@ -0,0 +1,3 @@
import record from '../record';
export { record };

2
packages/rrweb/src/entries/replay-unpack.ts
View File

@@ -1,2 +0,0 @@
export * from '../replay';
export * from '../packer/unpack';

1
packages/rrweb/src/entries/replay.ts Normal file
View File

@@ -0,0 +1 @@
export * from '../replay';

12
packages/rrweb/src/index.ts
View File

@@ -1,5 +1,10 @@
import record from './record';
import { Replayer } from './replay';
import {
Replayer,
type playerConfig,
type PlayerMachineState,
type SpeedMachineState,
} from './replay';
import canvasMutation from './replay/canvas';
import { _mirror } from './utils';
import * as utils from './utils';
@@ -12,7 +17,7 @@ export {
type eventWithTime,
} from '@rrweb/types';
export type { recordOptions } from './types';
export type { recordOptions, ReplayPlugin } from './types';
const { addCustomEvent } = record;
const { freezePage } = record;
@@ -22,6 +27,9 @@ export {
addCustomEvent,
freezePage,
Replayer,
playerConfig,
PlayerMachineState,
SpeedMachineState,
canvasMutation,
_mirror as mirror,
utils,

10
packages/rrweb/src/packer/base.ts
View File

@@ -1,10 +0,0 @@
import type { eventWithTime } from '@rrweb/types';
export type PackFn = (event: eventWithTime) => string;
export type UnpackFn = (raw: string) => eventWithTime;
export type eventWithTimeAndPacker = eventWithTime & {
v: string;
};
export const MARK = 'v1';

2
packages/rrweb/src/packer/index.ts
View File

@@ -1,2 +0,0 @@
export { pack } from './pack';
export { unpack } from './unpack';

10
packages/rrweb/src/packer/pack.ts
View File

@@ -1,10 +0,0 @@
import { strFromU8, strToU8, zlibSync } from 'fflate';
import { PackFn, MARK, eventWithTimeAndPacker } from './base';
export const pack: PackFn = (event) => {
const _e: eventWithTimeAndPacker = {
...event,
v: MARK,
};
return strFromU8(zlibSync(strToU8(JSON.stringify(_e))), true);
};

31
packages/rrweb/src/packer/unpack.ts
View File

@@ -1,31 +0,0 @@
import { strFromU8, strToU8, unzlibSync } from 'fflate';
import { UnpackFn, eventWithTimeAndPacker, MARK } from './base';
import type { eventWithTime } from '@rrweb/types';
export const unpack: UnpackFn = (raw: string) => {
if (typeof raw !== 'string') {
return raw;
}
try {
const e: eventWithTime = JSON.parse(raw) as eventWithTime;
if (e.timestamp) {
return e;
}
} catch (error) {
// ignore and continue
}
try {
const e: eventWithTimeAndPacker = JSON.parse(
strFromU8(unzlibSync(strToU8(raw, true))),
) as eventWithTimeAndPacker;
if (e.v === MARK) {
return e;
}
throw new Error(
`These events were packed with packer ${e.v} which is incompatible with current packer ${MARK}.`,
);
} catch (error) {
console.error(error);
throw new Error('Unknown data format.');
}
};

74
packages/rrweb/src/plugins/canvas-webrtc/Readme.md
View File

@@ -1,74 +0,0 @@
# rrweb canvas webrtc plugin
Plugin that live streams contents of canvas elements via webrtc
## Example of live streaming via `yarn live-stream`
https://user-images.githubusercontent.com/4106/186701616-fd71a107-5d53-423c-ba09-0395a3a0252f.mov
## Instructions
### Record side
```js
// Record side
import rrweb from 'rrweb';
import { RRWebPluginCanvasWebRTCRecord } from 'rrweb-plugin-canvas-webrtc-record';
const webRTCRecordPlugin = new RRWebPluginCanvasWebRTCRecord({
signalSendCallback: (msg) => {
// provides webrtc sdp offer signal & connect message
// make sure you send this to the replayer's `webRTCReplayPlugin.signalReceive(signal)`
sendSignalToReplayer(msg); // example of function that sends the signal to the replayer
},
});
rrweb.record({
emit: (event) => {
// send these events to the `replayer.addEvent(event)`, how you do that is up to you
// you can send them to a server for example which can then send them to the replayer
sendEventToReplayer(event); // example of function that sends the event to the replayer
},
plugins: [
// add the plugin to the list of plugins, and initialize it via `.initPlugin()`
webRTCRecordPlugin.initPlugin(),
],
recordCanvas: false, // we don't want canvas recording turned on, we're going to do that via the plugin
});
```
### Replay Side
```js
// Replay side
import rrweb from 'rrweb';
import { RRWebPluginCanvasWebRTCReplay } from 'rrweb-plugin-canvas-webrtc-replay';
const webRTCReplayPlugin = new RRWebPluginCanvasWebRTCReplay({
canvasFoundCallback(canvas, context) {
console.log('canvas', canvas);
// send the canvas id to `webRTCRecordPlugin.setupStream(id)`, how you do that is up to you
// you can send them to a server for example which can then send them to the replayer
sendCanvasIdToRecordScript(context.id); // example of function that sends the id to the record script
},
signalSendCallback(signal) {
// provides webrtc sdp offer signal & connect message
// make sure you send this to the record script's `webRTCRecordPlugin.signalReceive(signal)`
sendSignalToRecordScript(signal); // example of function that sends the signal to the record script
},
});
const replayer = new rrweb.Replayer([], {
UNSAFE_replayCanvas: true, // turn canvas replay on!
liveMode: true, // live mode is needed to stream events to the replayer
plugins: [webRTCReplayPlugin.initPlugin()],
});
replayer.startLive(); // start the replayer in live mode
replayer.addEvent(event); // call this whenever an event is received from the record script
```
## More info
https://github.com/rrweb-io/rrweb/pull/976

307
packages/rrweb/src/plugins/canvas-webrtc/record/index.ts
View File

@@ -1,307 +0,0 @@
import type { Mirror } from 'rrweb-snapshot';
import SimplePeer from 'simple-peer-light';
import type { RecordPlugin, ICrossOriginIframeMirror } from '@rrweb/types';
import type { WebRTCDataChannel } from '../types';
export const PLUGIN_NAME = 'rrweb/canvas-webrtc@1';
export type CrossOriginIframeMessageEventContent = {
type: 'rrweb-canvas-webrtc';
data:
| {
type: 'signal';
signal: RTCSessionDescriptionInit;
}
| {
type: 'who-has-canvas';
rootId: number;
id: number;
}
| {
type: 'i-have-canvas';
rootId: number;
};
};
export class RRWebPluginCanvasWebRTCRecord {
private peer: SimplePeer.Instance | null = null;
private mirror: Mirror;
private crossOriginIframeMirror: ICrossOriginIframeMirror;
private streamMap: Map<number, MediaStream> = new Map();
private incomingStreams = new Set<MediaStream>();
private outgoingStreams = new Set<MediaStream>();
private streamNodeMap = new Map<string, number>();
private canvasWindowMap = new Map<number, WindowProxy>();
private windowPeerMap = new WeakMap<WindowProxy, SimplePeer.Instance>();
private peerWindowMap = new WeakMap<SimplePeer.Instance, WindowProxy>();
private signalSendCallback: (msg: RTCSessionDescriptionInit) => void;
constructor({
signalSendCallback,
peer,
}: {
signalSendCallback: RRWebPluginCanvasWebRTCRecord['signalSendCallback'];
peer?: SimplePeer.Instance;
}) {
this.signalSendCallback = signalSendCallback;
window.addEventListener(
'message',
this.windowPostMessageHandler.bind(this),
);
if (peer) this.peer = peer;
}
public initPlugin(): RecordPlugin {
return {
name: PLUGIN_NAME,
getMirror: ({ nodeMirror, crossOriginIframeMirror }) => {
this.mirror = nodeMirror;
this.crossOriginIframeMirror = crossOriginIframeMirror;
},
options: {},
};
}
public signalReceive(signal: RTCSessionDescriptionInit) {
if (!this.peer) this.setupPeer();
this.peer?.signal(signal);
}
public signalReceiveFromCrossOriginIframe(
signal: RTCSessionDescriptionInit,
source: WindowProxy,
) {
const peer = this.setupPeer(source);
peer.signal(signal);
}
private startStream(id: number, stream: MediaStream) {
if (!this.peer) this.setupPeer();
const data: WebRTCDataChannel = {
nodeId: id,
streamId: stream.id,
};
this.peer?.send(JSON.stringify(data));
if (!this.outgoingStreams.has(stream)) this.peer?.addStream(stream);
this.outgoingStreams.add(stream);
}
public setupPeer(source?: WindowProxy): SimplePeer.Instance {
let peer: SimplePeer.Instance;
if (!source) {
if (this.peer) return this.peer;
peer = this.peer = new SimplePeer({
initiator: true,
// trickle: false, // only create one WebRTC offer per session
});
} else {
const peerFromMap = this.windowPeerMap.get(source);
if (peerFromMap) return peerFromMap;
peer = new SimplePeer({
initiator: false,
// trickle: false, // only create one WebRTC offer per session
});
this.windowPeerMap.set(source, peer);
this.peerWindowMap.set(peer, source);
}
const resetPeer = (source?: WindowProxy) => {
if (!source) return (this.peer = null);
this.windowPeerMap.delete(source);
this.peerWindowMap.delete(peer);
};
peer.on('error', (err: Error) => {
resetPeer(source);
console.log('error', err);
});
peer.on('close', () => {
resetPeer(source);
console.log('closing');
});
peer.on('signal', (data: RTCSessionDescriptionInit) => {
if (this.inRootFrame()) {
if (peer === this.peer) {
// connected to replayer
this.signalSendCallback(data);
} else {
// connected to cross-origin iframe
this.peerWindowMap.get(peer)?.postMessage(
{
type: 'rrweb-canvas-webrtc',
data: {
type: 'signal',
signal: data,
},
} as CrossOriginIframeMessageEventContent,
'*',
);
}
} else {
// connected to root frame
window.top?.postMessage(
{
type: 'rrweb-canvas-webrtc',
data: {
type: 'signal',
signal: data,
},
} as CrossOriginIframeMessageEventContent,
'*',
);
}
});
peer.on('connect', () => {
// connected to cross-origin iframe, no need to do anything
if (this.inRootFrame() && peer !== this.peer) return;
// cross origin frame connected to root frame
// or root frame connected to replayer
// send all streams to peer
for (const [id, stream] of this.streamMap) {
this.startStream(id, stream);
}
});
if (!this.inRootFrame()) return peer;
peer.on('data', (data: SimplePeer.SimplePeerData) => {
try {
const json = JSON.parse(data as string) as WebRTCDataChannel;
this.streamNodeMap.set(json.streamId, json.nodeId);
} catch (error) {
console.error('Could not parse data', error);
}
this.flushStreams();
});
peer.on('stream', (stream: MediaStream) => {
this.incomingStreams.add(stream);
this.flushStreams();
});
return peer;
}
public setupStream(id: number, rootId?: number): boolean | MediaStream {
if (id === -1) return false;
let stream: MediaStream | undefined = this.streamMap.get(rootId || id);
if (stream) return stream;
const el = this.mirror.getNode(id) as HTMLCanvasElement | null;
if (!el || !('captureStream' in el))
// we don't have it, lets check our iframes
return this.setupStreamInCrossOriginIframe(id, rootId || id);
if (!this.inRootFrame()) {
window.top?.postMessage(
{
type: 'rrweb-canvas-webrtc',
data: {
type: 'i-have-canvas',
rootId: rootId || id,
},
} as CrossOriginIframeMessageEventContent,
'*',
);
}
stream = el.captureStream();
this.streamMap.set(rootId || id, stream);
this.setupPeer();
return stream;
}
private flushStreams() {
this.incomingStreams.forEach((stream) => {
const nodeId = this.streamNodeMap.get(stream.id);
if (!nodeId) return;
// got remote video stream, now let's send it to the replayer
this.startStream(nodeId, stream);
});
}
private inRootFrame(): boolean {
return Boolean(window.top && window.top === window);
}
public setupStreamInCrossOriginIframe(id: number, rootId: number): boolean {
let found = false;
document.querySelectorAll('iframe').forEach((iframe) => {
if (found) return;
const remoteId = this.crossOriginIframeMirror.getRemoteId(iframe, id);
if (remoteId === -1) return;
found = true;
iframe.contentWindow?.postMessage(
{
type: 'rrweb-canvas-webrtc',
data: {
type: 'who-has-canvas',
id: remoteId,
rootId,
},
} as CrossOriginIframeMessageEventContent,
'*',
);
});
return found;
}
private isCrossOriginIframeMessageEventContent(
event: MessageEvent<unknown>,
): event is MessageEvent<CrossOriginIframeMessageEventContent> {
return Boolean(
event.data &&
typeof event.data === 'object' &&
'type' in event.data &&
'data' in event.data &&
(event.data as CrossOriginIframeMessageEventContent).type ===
'rrweb-canvas-webrtc' &&
(event.data as CrossOriginIframeMessageEventContent).data,
);
}
/**
* All messages being sent to the (root or sub) frame are received through `windowPostMessageHandler`.
* @param event - The message event
*/
private windowPostMessageHandler(
event: MessageEvent<CrossOriginIframeMessageEventContent> | MessageEvent,
) {
if (!this.isCrossOriginIframeMessageEventContent(event)) return;
const { type } = event.data.data;
if (type === 'who-has-canvas') {
const { id, rootId } = event.data.data;
this.setupStream(id, rootId);
} else if (type === 'signal') {
const { signal } = event.data.data;
const { source } = event;
if (!source || !('self' in source)) return;
if (this.inRootFrame()) {
this.signalReceiveFromCrossOriginIframe(signal, source);
} else {
this.signalReceive(signal);
}
} else if (type === 'i-have-canvas') {
const { rootId } = event.data.data;
const { source } = event;
if (!source || !('self' in source)) return;
this.canvasWindowMap.set(rootId, source);
}
}
}

167
packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts
View File

@@ -1,167 +0,0 @@
import type { RRNode } from 'rrdom';
import type { Mirror } from 'rrweb-snapshot';
import SimplePeer from 'simple-peer-light';
import type { Replayer } from '../../../replay';
import type { ReplayPlugin } from '../../../types';
import type { WebRTCDataChannel } from '../types';
// TODO: restrict callback to real nodes only, or make sure callback gets called when real node gets added to dom as well
export class RRWebPluginCanvasWebRTCReplay {
private canvasFoundCallback: (
node: Node | RRNode,
context: { id: number; replayer: Replayer },
) => void;
private signalSendCallback: (signal: RTCSessionDescriptionInit) => void;
private mirror: Mirror;
constructor({
canvasFoundCallback,
signalSendCallback,
}: {
canvasFoundCallback: RRWebPluginCanvasWebRTCReplay['canvasFoundCallback'];
signalSendCallback: RRWebPluginCanvasWebRTCReplay['signalSendCallback'];
}) {
this.canvasFoundCallback = canvasFoundCallback;
this.signalSendCallback = signalSendCallback;
}
public initPlugin(): ReplayPlugin {
return {
onBuild: (
node: Node | RRNode,
context: { id: number; replayer: Replayer },
) => {
if (node.nodeName === 'CANVAS') {
this.canvasFoundCallback(node, context);
}
},
getMirror: (options) => {
this.mirror = options.nodeMirror;
},
};
}
private startStream(
target: HTMLCanvasElement | HTMLVideoElement,
stream: MediaStream,
) {
if (this.runningStreams.has(stream)) return;
if (target.tagName === 'VIDEO') {
const remoteVideo = target as HTMLVideoElement;
remoteVideo.srcObject = stream;
void remoteVideo.play();
this.runningStreams.add(stream);
return;
}
if ('MediaStreamTrackProcessor' in window) {
const canvas = target as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
if (!ctx)
throw new Error(
`startStream: Could not get 2d canvas context for ${canvas.outerHTML}`,
);
const track = stream.getVideoTracks()[0]; // MediaStream.getVideoTracks()[0]
const processor = new MediaStreamTrackProcessor({ track: track });
const reader = processor.readable.getReader();
const readChunk = function () {
void reader.read().then(({ done, value }) => {
if (!value) return;
// the MediaStream video can have dynamic size based on bandwidth available
if (
canvas.width !== value.displayWidth ||
canvas.height !== value.displayHeight
) {
canvas.width = value.displayWidth;
canvas.height = value.displayHeight;
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
// value is a VideoFrame
ctx.drawImage(value, 0, 0);
value.close(); // close the VideoFrame when we're done with it
if (!done) {
readChunk();
}
});
};
readChunk();
this.runningStreams.add(stream);
} else {
// Fallback for non-Chromium browsers.
// Replaces the canvas element with a video element.
const remoteVideo = document.createElement('video');
remoteVideo.setAttribute('autoplay', 'true');
remoteVideo.setAttribute('playsinline', 'true');
// const { id } = mutation;
remoteVideo.setAttribute('width', target.width.toString());
remoteVideo.setAttribute('height', target.height.toString());
target.replaceWith(remoteVideo);
this.startStream(remoteVideo, stream);
}
}
private peer: SimplePeer.Instance | null = null;
private streamNodeMap = new Map<string, number>();
private streams = new Set<MediaStream>();
private runningStreams = new WeakSet<MediaStream>();
public signalReceive(msg: RTCSessionDescriptionInit) {
if (!this.peer) {
this.peer = new SimplePeer({
initiator: false,
// trickle: false,
});
this.peer.on('error', (err: Error) => {
this.peer = null;
console.log('error', err);
});
this.peer.on('close', () => {
this.peer = null;
console.log('closing');
});
this.peer.on('signal', (data: RTCSessionDescriptionInit) => {
this.signalSendCallback(data);
});
this.peer.on('connect', () => {
// connected!
});
this.peer.on('data', (data: SimplePeer.SimplePeerData) => {
try {
const json = JSON.parse(data as string) as WebRTCDataChannel;
this.streamNodeMap.set(json.streamId, json.nodeId);
} catch (error) {
console.error('Could not parse data', error);
}
this.flushStreams();
});
this.peer.on('stream', (stream: MediaStream) => {
this.streams.add(stream);
this.flushStreams();
});
}
this.peer.signal(msg);
}
private flushStreams() {
this.streams.forEach((stream) => {
const nodeId = this.streamNodeMap.get(stream.id);
if (!nodeId) return;
const target = this.mirror.getNode(nodeId) as
| HTMLCanvasElement
| HTMLVideoElement
| null;
// got remote video stream, now let's show it in a video or canvas element
if (target) this.startStream(target, stream);
});
}
}

309
packages/rrweb/src/plugins/canvas-webrtc/simple-peer-light.d.ts vendored
View File

@@ -1,309 +0,0 @@
/* eslint-disable */
/// <reference types="node" />
declare module 'simple-peer-light' {
import * as stream from 'stream';
const SimplePeer: SimplePeer.SimplePeer;
namespace SimplePeer {
interface Options {
/** set to `true` if this is the initiating peer */
initiator?: boolean | undefined;
/** custom webrtc data channel configuration (used by [`createDataChannel`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createDataChannel)) */
channelConfig?: RTCDataChannelInit | undefined;
/** custom webrtc data channel name */
channelName?: string | undefined;
/** custom webrtc configuration (used by [`RTCPeerConnection`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection) constructor) */
config?: RTCConfiguration | undefined;
/** custom offer options (used by [`createOffer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer) method) */
offerOptions?: RTCOfferOptions | undefined;
/** custom answer options (used by [`createAnswer`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer) method) */
answerOptions?: RTCAnswerOptions | undefined;
/** function to transform the generated SDP signaling data (for advanced users) */
sdpTransform?: ((this: Instance, sdp: string) => string) | undefined;
/** if video/voice is desired, pass stream returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
stream?: MediaStream | undefined;
/** an array of MediaStreams returned from [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) */
streams?: MediaStream[] | undefined;
/** set to `false` to disable [trickle ICE](http://webrtchacks.com/trickle-ice/) and get a single 'signal' event (slower) */
trickle?: boolean | undefined;
/** similar to `trickle`, needs to be set to `false` to disable trickling, defaults to `false` */
allowHalfTrickle?: boolean | undefined;
/** if `trickle` is set to `false`, determines how long to wait before providing an offer or answer; default value is 5000 milliseconds */
iceCompleteTimeout?: number | undefined;
/** custom webrtc implementation, mainly useful in node to specify in the [wrtc](https://npmjs.com/package/wrtc) package. */
wrtc?:
| {
RTCPeerConnection: typeof RTCPeerConnection;
RTCSessionDescription: typeof RTCSessionDescription;
RTCIceCandidate: typeof RTCIceCandidate;
}
| undefined;
/** set to true to create the stream in Object Mode. In this mode, incoming string data is not automatically converted to Buffer objects. */
objectMode?: boolean | undefined;
}
interface SimplePeer {
prototype: Instance;
/**
* Create a new WebRTC peer connection.
*
* A "data channel" for text/binary communication is always established, because it's cheap and often useful. For video/voice communication, pass the stream option.
*
* If opts is specified, then the default options (see <https://github.com/feross/simple-peer#peer--new-peeropts>) will be overridden.
*/
new (opts?: Options): Instance;
/** Detect native WebRTC support in the javascript environment. */
readonly WEBRTC_SUPPORT: boolean;
// ********************************
// methods which are not documented
// ********************************
/**
* Expose peer and data channel config for overriding all Peer
* instances. Otherwise, just set opts.config or opts.channelConfig
* when constructing a Peer.
*/
config: RTCConfiguration;
/**
* Expose peer and data channel config for overriding all Peer
* instances. Otherwise, just set opts.config or opts.channelConfig
* when constructing a Peer.
*/
channelConfig: RTCDataChannelInit;
}
type TypedArray =
| Int8Array
| Uint8Array
| Uint8ClampedArray
| Int16Array
| Uint16Array
| Int32Array
| Uint32Array
| Float32Array
| Float64Array;
type SimplePeerData = string | Buffer | TypedArray | ArrayBuffer | Blob;
type SignalData =
| {
type: 'transceiverRequest';
transceiverRequest: {
kind: string;
init?: RTCRtpTransceiverInit | undefined;
};
}
| {
type: 'renegotiate';
renegotiate: true;
}
| {
type: 'candidate';
candidate: RTCIceCandidate;
}
| RTCSessionDescriptionInit;
interface Instance extends stream.Duplex {
/**
* Call this method whenever the remote peer emits a `peer.on('signal')` event.
*
* The `data` will encapsulate a webrtc offer, answer, or ice candidate. These messages help
* the peers to eventually establish a direct connection to each other. The contents of these
* strings are an implementation detail that can be ignored by the user of this module;
* simply pass the data from 'signal' events to the remote peer and call `peer.signal(data)`
* to get connected.
*/
signal(data: string | SignalData): void;
/**
* Send text/binary data to the remote peer. `data` can be any of several types: `String`,
* `Buffer` (see [buffer](https://github.com/feross/buffer)), `ArrayBufferView` (`Uint8Array`,
* etc.), `ArrayBuffer`, or `Blob` (in browsers that support it).
*
* Note: If this method is called before the `peer.on('connect')` event has fired,
* then an exception will be thrown. Use `peer.write(data)`
* (which is inherited from the node.js [duplex stream](https://nodejs.org/api/stream.html) interface)
* if you want this data to be buffered instead.
*/
send(data: SimplePeerData): void;
/** Add a `MediaStream` to the connection. */
addStream(stream: MediaStream): void;
/** Remove a `MediaStream` from the connection. */
removeStream(stream: MediaStream): void;
/** Add a `MediaStreamTrack` to the connection. Must also pass the `MediaStream` you want to attach it to. */
addTrack(track: MediaStreamTrack, stream: MediaStream): void;
/** Remove a `MediaStreamTrack` from the connection. Must also pass the `MediaStream` that it was attached to. */
removeTrack(track: MediaStreamTrack, stream: MediaStream): void;
/** Replace a `MediaStreamTrack` with another track. Must also pass the `MediaStream` that the old track was attached to. */
replaceTrack(
oldTrack: MediaStreamTrack,
newTrack: MediaStreamTrack,
stream: MediaStream,
): void;
/** Add a `RTCRtpTransceiver` to the connection. Can be used to add transceivers before adding tracks. Automatically called as necessary by `addTrack`. */
addTransceiver(kind: string, init?: RTCRtpTransceiverInit): void;
// TODO: https://github.com/feross/simple-peer/blob/d972548299a50f836ca91c36e39304ef0f9474b7/index.js#L427
// destroy(onclose?: () => void): void;
/**
* Destroy and cleanup this peer connection.
*
* If the optional `err` parameter is passed, then it will be emitted as an `'error'`
* event on the stream.
*/
destroy(error?: Error): any;
// ********************************
// methods which are not documented
// ********************************
readonly bufferSize: number;
readonly connected: boolean;
address():
| { port: undefined; family: undefined; address: undefined }
| { port: number; family: 'IPv6' | 'IPv4'; address: string };
// used for debug logging
_debug(message?: any, ...optionalParams: any[]): void;
// ******
// events
// ******
addListener(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
listener: () => void,
): this;
addListener(event: 'signal', listener: (data: SignalData) => void): this;
addListener(
event: 'stream',
listener: (stream: MediaStream) => void,
): this;
addListener(
event: 'track',
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
): this;
addListener(event: 'data', listener: (chunk: any) => void): this;
addListener(event: 'error', listener: (err: Error) => void): this;
addListener(
event: string | symbol,
listener: (...args: any[]) => void,
): this;
emit(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
): boolean;
emit(event: 'signal', data: SignalData): this;
emit(event: 'stream', stream: MediaStream): this;
emit(event: 'track', track: MediaStreamTrack, stream: MediaStream): this;
emit(event: 'data', chunk: any): boolean;
emit(event: 'error', err: Error): boolean;
emit(event: string | symbol, ...args: any[]): boolean;
on(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
listener: () => void,
): this;
on(event: 'signal', listener: (data: SignalData) => void): this;
on(event: 'stream', listener: (stream: MediaStream) => void): this;
on(
event: 'track',
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
): this;
on(event: 'data', listener: (chunk: any) => void): this;
on(event: 'error', listener: (err: Error) => void): this;
on(event: string | symbol, listener: (...args: any[]) => void): this;
once(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
listener: () => void,
): this;
once(event: 'signal', listener: (data: SignalData) => void): this;
once(event: 'stream', listener: (stream: MediaStream) => void): this;
once(
event: 'track',
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
): this;
once(event: 'data', listener: (chunk: any) => void): this;
once(event: 'error', listener: (err: Error) => void): this;
once(event: string | symbol, listener: (...args: any[]) => void): this;
prependListener(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
listener: () => void,
): this;
prependListener(
event: 'signal',
listener: (data: SignalData) => void,
): this;
prependListener(
event: 'stream',
listener: (stream: MediaStream) => void,
): this;
prependListener(
event: 'track',
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
): this;
prependListener(event: 'data', listener: (chunk: any) => void): this;
prependListener(event: 'error', listener: (err: Error) => void): this;
prependListener(
event: string | symbol,
listener: (...args: any[]) => void,
): this;
prependOnceListener(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
listener: () => void,
): this;
prependOnceListener(
event: 'signal',
listener: (data: SignalData) => void,
): this;
prependOnceListener(
event: 'stream',
listener: (stream: MediaStream) => void,
): this;
prependOnceListener(
event: 'track',
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
): this;
prependOnceListener(event: 'data', listener: (chunk: any) => void): this;
prependOnceListener(event: 'error', listener: (err: Error) => void): this;
prependOnceListener(
event: string | symbol,
listener: (...args: any[]) => void,
): this;
removeListener(
event: 'connect' | 'close' | 'end' | 'pause' | 'readable' | 'resume',
listener: () => void,
): this;
removeListener(
event: 'signal',
listener: (data: SignalData) => void,
): this;
removeListener(
event: 'stream',
listener: (stream: MediaStream) => void,
): this;
removeListener(
event: 'track',
listener: (track: MediaStreamTrack, stream: MediaStream) => void,
): this;
removeListener(event: 'data', listener: (chunk: any) => void): this;
removeListener(event: 'error', listener: (err: Error) => void): this;
removeListener(
event: string | symbol,
listener: (...args: any[]) => void,
): this;
}
}
export default SimplePeer;
}

4
packages/rrweb/src/plugins/canvas-webrtc/types.ts
View File

@@ -1,4 +0,0 @@
export interface WebRTCDataChannel {
nodeId: number;
streamId: string;
}

252
packages/rrweb/src/plugins/console/record/error-stack-parser.ts
View File

@@ -1,252 +0,0 @@
/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return */
/**
* Class StackFrame is a fork of https://github.com/stacktracejs/stackframe/blob/master/stackframe.js
* I fork it because:
* 1. There are some build issues when importing this package.
* 2. Rewrites into typescript give us a better type interface.
* 3. StackFrame contains some functions we don't need.
*/
export class StackFrame {
private fileName: string;
private functionName: string;
private lineNumber?: number;
private columnNumber?: number;
constructor(obj: {
fileName?: string;
functionName?: string;
lineNumber?: number;
columnNumber?: number;
}) {
this.fileName = obj.fileName || '';
this.functionName = obj.functionName || '';
this.lineNumber = obj.lineNumber;
this.columnNumber = obj.columnNumber;
}
toString() {
const lineNumber = this.lineNumber || '';
const columnNumber = this.columnNumber || '';
if (this.functionName)
return `${this.functionName} (${this.fileName}:${lineNumber}:${columnNumber})`;
return `${this.fileName}:${lineNumber}:${columnNumber}`;
}
}
/**
* ErrorStackParser is a fork of https://github.com/stacktracejs/error-stack-parser/blob/master/error-stack-parser.js
* I fork it because:
* 1. There are some build issues when importing this package.
* 2. Rewrites into typescript give us a better type interface.
*/
const FIREFOX_SAFARI_STACK_REGEXP = /(^|@)\S+:\d+/;
const CHROME_IE_STACK_REGEXP = /^\s*at .*(\S+:\d+|\(native\))/m;
const SAFARI_NATIVE_CODE_REGEXP = /^(eval@)?(\[native code])?$/;
export const ErrorStackParser = {
/**
* Given an Error object, extract the most information from it.
*/
parse: function (error: Error): StackFrame[] {
// https://github.com/rrweb-io/rrweb/issues/782
if (!error) {
return [];
}
if (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
typeof error.stacktrace !== 'undefined' ||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
typeof error['opera#sourceloc'] !== 'undefined'
) {
return this.parseOpera(
error as {
stacktrace?: string;
message: string;
stack?: string;
},
);
} else if (error.stack && error.stack.match(CHROME_IE_STACK_REGEXP)) {
return this.parseV8OrIE(error as { stack: string });
} else if (error.stack) {
return this.parseFFOrSafari(error as { stack: string });
} else {
console.warn(
'[console-record-plugin]: Failed to parse error object:',
error,
);
return [];
}
},
// Separate line and column numbers from a string of the form: (URI:Line:Column)
extractLocation: function (urlLike: string) {
// Fail-fast but return locations like "(native)"
if (urlLike.indexOf(':') === -1) {
return [urlLike];
}
const regExp = /(.+?)(?::(\d+))?(?::(\d+))?$/;
const parts = regExp.exec(urlLike.replace(/[()]/g, ''));
if (!parts) throw new Error(`Cannot parse given url: ${urlLike}`);
return [parts[1], parts[2] || undefined, parts[3] || undefined];
},
parseV8OrIE: function (error: { stack: string }) {
const filtered = error.stack.split('\n').filter(function (line) {
return !!line.match(CHROME_IE_STACK_REGEXP);
}, this);
return filtered.map(function (line) {
if (line.indexOf('(eval ') > -1) {
// Throw away eval information until we implement stacktrace.js/stackframe#8
line = line
.replace(/eval code/g, 'eval')
.replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
}
let sanitizedLine = line.replace(/^\s+/, '').replace(/\(eval code/g, '(');
// capture and preseve the parenthesized location "(/foo/my bar.js:12:87)" in
// case it has spaces in it, as the string is split on \s+ later on
const location = sanitizedLine.match(/ (\((.+):(\d+):(\d+)\)$)/);
// remove the parenthesized location from the line, if it was matched
sanitizedLine = location
? sanitizedLine.replace(location[0], '')
: sanitizedLine;
const tokens = sanitizedLine.split(/\s+/).slice(1);
// if a location was matched, pass it to extractLocation() otherwise pop the last token
const locationParts = this.extractLocation(
location ? location[1] : tokens.pop(),
);
const functionName = tokens.join(' ') || undefined;
const fileName =
['eval', '<anonymous>'].indexOf(locationParts[0]) > -1
? undefined
: locationParts[0];
return new StackFrame({
functionName,
fileName,
lineNumber: locationParts[1],
columnNumber: locationParts[2],
});
}, this);
},
parseFFOrSafari: function (error: { stack: string }) {
const filtered = error.stack.split('\n').filter(function (line) {
return !line.match(SAFARI_NATIVE_CODE_REGEXP);
}, this);
return filtered.map(function (line) {
// Throw away eval information until we implement stacktrace.js/stackframe#8
if (line.indexOf(' > eval') > -1) {
line = line.replace(
/ line (\d+)(?: > eval line \d+)* > eval:\d+:\d+/g,
':$1',
);
}
if (line.indexOf('@') === -1 && line.indexOf(':') === -1) {
// Safari eval frames only have function names and nothing else
return new StackFrame({
functionName: line,
});
} else {
const functionNameRegex = /((.*".+"[^@]*)?[^@]*)(?:@)/;
const matches = line.match(functionNameRegex);
const functionName = matches && matches[1] ? matches[1] : undefined;
const locationParts = this.extractLocation(
line.replace(functionNameRegex, ''),
);
return new StackFrame({
functionName,
fileName: locationParts[0],
lineNumber: locationParts[1],
columnNumber: locationParts[2],
});
}
}, this);
},
parseOpera: function (e: {
stacktrace?: string;
message: string;
stack?: string;
}): StackFrame[] {
if (
!e.stacktrace ||
(e.message.indexOf('\n') > -1 &&
e.message.split('\n').length > e.stacktrace.split('\n').length)
) {
return this.parseOpera9(e as { message: string });
} else if (!e.stack) {
return this.parseOpera10(e as { stacktrace: string });
} else {
return this.parseOpera11(e as { stack: string });
}
},
parseOpera9: function (e: { message: string }) {
const lineRE = /Line (\d+).*script (?:in )?(\S+)/i;
const lines = e.message.split('\n');
const result = [];
for (let i = 2, len = lines.length; i < len; i += 2) {
const match = lineRE.exec(lines[i]);
if (match) {
result.push(
new StackFrame({
fileName: match[2],
lineNumber: parseFloat(match[1]),
}),
);
}
}
return result;
},
parseOpera10: function (e: { stacktrace: string }) {
const lineRE = /Line (\d+).*script (?:in )?(\S+)(?:: In function (\S+))?$/i;
const lines = e.stacktrace.split('\n');
const result = [];
for (let i = 0, len = lines.length; i < len; i += 2) {
const match = lineRE.exec(lines[i]);
if (match) {
result.push(
new StackFrame({
functionName: match[3] || undefined,
fileName: match[2],
lineNumber: parseFloat(match[1]),
}),
);
}
}
return result;
},
// Opera 10.65+ Error.stack very similar to FF/Safari
parseOpera11: function (error: { stack: string }) {
const filtered = error.stack.split('\n').filter(function (line) {
return (
!!line.match(FIREFOX_SAFARI_STACK_REGEXP) &&
!line.match(/^Error created at/)
);
}, this);
return filtered.map(function (line: string) {
const tokens = line.split('@');
const locationParts = this.extractLocation(tokens.pop());
const functionCall = tokens.shift() || '';
const functionName =
functionCall
.replace(/<anonymous function(: (\w+))?>/, '$2')
.replace(/\([^)]*\)/g, '') || undefined;
return new StackFrame({
functionName,
fileName: locationParts[0],
lineNumber: locationParts[1],
columnNumber: locationParts[2],
});
}, this);
},
};

241
packages/rrweb/src/plugins/console/record/index.ts
View File

@@ -1,241 +0,0 @@
import type { listenerHandler, RecordPlugin, IWindow } from '@rrweb/types';
import { patch } from '../../../utils';
import { ErrorStackParser, StackFrame } from './error-stack-parser';
import { stringify } from './stringify';
export type StringifyOptions = {
// limit of string length
stringLengthLimit?: number;
/**
* limit of number of keys in an object
* if an object contains more keys than this limit, we would call its toString function directly
*/
numOfKeysLimit: number;
/**
* limit number of depth in an object
* if an object is too deep, toString process may cause browser OOM
*/
depthOfLimit: number;
};
type LogRecordOptions = {
level?: LogLevel[];
lengthThreshold?: number;
stringifyOptions?: StringifyOptions;
logger?: Logger | 'console';
};
const defaultLogOptions: LogRecordOptions = {
level: [
'assert',
'clear',
'count',
'countReset',
'debug',
'dir',
'dirxml',
'error',
'group',
'groupCollapsed',
'groupEnd',
'info',
'log',
'table',
'time',
'timeEnd',
'timeLog',
'trace',
'warn',
],
lengthThreshold: 1000,
logger: 'console',
};
export type LogData = {
level: LogLevel;
trace: string[];
payload: string[];
};
type logCallback = (p: LogData) => void;
/* fork from interface Console */
// all kinds of console functions
export type Logger = {
assert?: typeof console.assert;
clear?: typeof console.clear;
count?: typeof console.count;
countReset?: typeof console.countReset;
debug?: typeof console.debug;
dir?: typeof console.dir;
dirxml?: typeof console.dirxml;
error?: typeof console.error;
group?: typeof console.group;
groupCollapsed?: typeof console.groupCollapsed;
groupEnd?: () => void;
info?: typeof console.info;
log?: typeof console.log;
table?: typeof console.table;
time?: typeof console.time;
timeEnd?: typeof console.timeEnd;
timeLog?: typeof console.timeLog;
trace?: typeof console.trace;
warn?: typeof console.warn;
};
export type LogLevel = keyof Logger;
function initLogObserver(
cb: logCallback,
win: IWindow, // top window or in an iframe
options: LogRecordOptions,
): listenerHandler {
const logOptions = (
options ? Object.assign({}, defaultLogOptions, options) : defaultLogOptions
) as {
level: LogLevel[];
lengthThreshold: number;
stringifyOptions?: StringifyOptions;
logger: Logger | 'console';
};
const loggerType = logOptions.logger;
if (!loggerType) {
return () => {
//
};
}
let logger: Logger;
if (typeof loggerType === 'string') {
logger = win[loggerType];
} else {
logger = loggerType;
}
let logCount = 0;
let inStack = false;
const cancelHandlers: listenerHandler[] = [];
// add listener to thrown errors
if (logOptions.level.includes('error')) {
const errorHandler = (event: ErrorEvent) => {
const message = event.message,
error = event.error as Error;
const trace: string[] = ErrorStackParser.parse(error).map(
(stackFrame: StackFrame) => stackFrame.toString(),
);
const payload = [stringify(message, logOptions.stringifyOptions)];
cb({
level: 'error',
trace,
payload,
});
};
win.addEventListener('error', errorHandler);
cancelHandlers.push(() => {
win.removeEventListener('error', errorHandler);
});
const unhandledrejectionHandler = (event: PromiseRejectionEvent) => {
let error: Error;
let payload: string[];
if (event.reason instanceof Error) {
error = event.reason;
payload = [
stringify(
`Uncaught (in promise) ${error.name}: ${error.message}`,
logOptions.stringifyOptions,
),
];
} else {
error = new Error();
payload = [
stringify('Uncaught (in promise)', logOptions.stringifyOptions),
stringify(event.reason, logOptions.stringifyOptions),
];
}
const trace: string[] = ErrorStackParser.parse(error).map(
(stackFrame: StackFrame) => stackFrame.toString(),
);
cb({
level: 'error',
trace,
payload,
});
};
win.addEventListener('unhandledrejection', unhandledrejectionHandler);
cancelHandlers.push(() => {
win.removeEventListener('unhandledrejection', unhandledrejectionHandler);
});
}
for (const levelType of logOptions.level) {
cancelHandlers.push(replace(logger, levelType));
}
return () => {
cancelHandlers.forEach((h) => h());
};
/**
* replace the original console function and record logs
* @param logger - the logger object such as Console
* @param level - the name of log function to be replaced
*/
function replace(_logger: Logger, level: LogLevel) {
if (!_logger[level]) {
return () => {
//
};
}
// replace the logger.{level}. return a restore function
return patch(
_logger,
level,
(original: (...args: Array<unknown>) => void) => {
return (...args: Array<unknown>) => {
original.apply(this, args);
if (inStack) {
// If we are already in a stack this means something from the following code is calling a console method
// likely a proxy method called from stringify. We don't want to log this as it will cause an infinite loop
return;
}
inStack = true;
try {
const trace = ErrorStackParser.parse(new Error())
.map((stackFrame: StackFrame) => stackFrame.toString())
.splice(1); // splice(1) to omit the hijacked log function
const payload = args.map((s) =>
stringify(s, logOptions.stringifyOptions),
);
logCount++;
if (logCount < logOptions.lengthThreshold) {
cb({
level,
trace,
payload,
});
} else if (logCount === logOptions.lengthThreshold) {
// notify the user
cb({
level: 'warn',
trace: [],
payload: [
stringify('The number of log records reached the threshold.'),
],
});
}
} catch (error) {
original('rrweb logger error:', error, ...args);
} finally {
inStack = false;
}
};
},
);
}
}
export const PLUGIN_NAME = 'rrweb/console@1';
export const getRecordConsolePlugin: (
options?: LogRecordOptions,
) => RecordPlugin = (options) => ({
name: PLUGIN_NAME,
observer: initLogObserver,
options: options,
});

194
packages/rrweb/src/plugins/console/record/stringify.ts
View File

@@ -1,194 +0,0 @@
/**
* this file is used to serialize log message to string
*
*/
import type { StringifyOptions } from './index';
/**
* transfer the node path in Event to string
* @param node - the first node in a node path array
*/
function pathToSelector(node: HTMLElement): string | '' {
if (!node || !node.outerHTML) {
return '';
}
let path = '';
while (node.parentElement) {
let name = node.localName;
if (!name) {
break;
}
name = name.toLowerCase();
const parent = node.parentElement;
const domSiblings = [];
if (parent.children && parent.children.length > 0) {
for (let i = 0; i < parent.children.length; i++) {
const sibling = parent.children[i];
if (sibling.localName && sibling.localName.toLowerCase) {
if (sibling.localName.toLowerCase() === name) {
domSiblings.push(sibling);
}
}
}
}
if (domSiblings.length > 1) {
name += `:eq(${domSiblings.indexOf(node)})`;
}
path = name + (path ? '>' + path : '');
node = parent;
}
return path;
}
/**
* judge is object
*/
function isObject(obj: unknown): boolean {
return Object.prototype.toString.call(obj) === '[object Object]';
}
/**
* judge the object's depth
*/
function isObjTooDeep(obj: Record<string, unknown>, limit: number): boolean {
if (limit === 0) {
return true;
}
const keys = Object.keys(obj);
for (const key of keys) {
if (
isObject(obj[key]) &&
isObjTooDeep(obj[key] as Record<string, unknown>, limit - 1)
) {
return true;
}
}
return false;
}
/**
* stringify any js object
* @param obj - the object to stringify
*/
export function stringify(
obj: unknown,
stringifyOptions?: StringifyOptions,
): string {
const options: StringifyOptions = {
numOfKeysLimit: 50,
depthOfLimit: 4,
};
Object.assign(options, stringifyOptions);
const stack: unknown[] = [];
const keys: unknown[] = [];
return JSON.stringify(
obj,
function (key, value: string | bigint | object | null | undefined) {
/**
* forked from https://github.com/moll/json-stringify-safe/blob/master/stringify.js
* to deCycle the object
*/
if (stack.length > 0) {
const thisPos = stack.indexOf(this);
~thisPos ? stack.splice(thisPos + 1) : stack.push(this);
~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key);
if (~stack.indexOf(value)) {
if (stack[0] === value) {
value = '[Circular ~]';
} else {
value =
'[Circular ~.' +
keys.slice(0, stack.indexOf(value)).join('.') +
']';
}
}
} else {
stack.push(value);
}
/* END of the FORK */
if (value === null) return value;
if (value === undefined) return 'undefined';
if (shouldIgnore(value as object)) {
return toString(value as object);
}
if (typeof value === 'bigint') {
return value.toString() + 'n';
}
if (value instanceof Event) {
const eventResult: Record<string, unknown> = {};
for (const eventKey in value) {
const eventValue = (value as unknown as Record<string, unknown>)[
eventKey
];
if (Array.isArray(eventValue)) {
eventResult[eventKey] = pathToSelector(
(eventValue.length ? eventValue[0] : null) as HTMLElement,
);
} else {
eventResult[eventKey] = eventValue;
}
}
return eventResult;
} else if (value instanceof Node) {
if (value instanceof HTMLElement) {
return value ? value.outerHTML : '';
}
return value.nodeName;
} else if (value instanceof Error) {
return value.stack
? value.stack + '\nEnd of stack for Error object'
: value.name + ': ' + value.message;
}
return value;
},
);
/**
* whether we should ignore obj's info and call toString() function instead
*/
function shouldIgnore(_obj: object): boolean {
// outof keys limit
if (isObject(_obj) && Object.keys(_obj).length > options.numOfKeysLimit) {
return true;
}
// is function or bigint
if (typeof _obj === 'function') {
return true;
}
/**
* judge object's depth to avoid browser's OOM
*
* issues: https://github.com/rrweb-io/rrweb/issues/653
*/
if (
isObject(_obj) &&
isObjTooDeep(_obj as Record<string, unknown>, options.depthOfLimit)
) {
return true;
}
return false;
}
/**
* limit the toString() result according to option
*/
function toString(_obj: object): string {
let str = _obj.toString();
if (options.stringLengthLimit && str.length > options.stringLengthLimit) {
str = `${str.slice(0, options.stringLengthLimit)}...`;
}
return str;
}
}

141
packages/rrweb/src/plugins/console/replay/index.ts
View File

@@ -1,141 +0,0 @@
import { LogLevel, LogData, PLUGIN_NAME } from '../record';
import type { eventWithTime } from '@rrweb/types';
import { EventType, IncrementalSource } from '@rrweb/types';
import type { ReplayPlugin } from '../../../types';
/**
* define an interface to replay log records
* (data: logData) => void> function to display the log data
*/
type ReplayLogger = Partial<Record<LogLevel, (data: LogData) => void>>;
type LogReplayConfig = {
level?: LogLevel[];
replayLogger?: ReplayLogger;
};
const ORIGINAL_ATTRIBUTE_NAME = '__rrweb_original__';
type PatchedConsoleLog = {
[ORIGINAL_ATTRIBUTE_NAME]: typeof console.log;
};
const defaultLogConfig: LogReplayConfig = {
level: [
'assert',
'clear',
'count',
'countReset',
'debug',
'dir',
'dirxml',
'error',
'group',
'groupCollapsed',
'groupEnd',
'info',
'log',
'table',
'time',
'timeEnd',
'timeLog',
'trace',
'warn',
],
replayLogger: undefined,
};
class LogReplayPlugin {
private config: LogReplayConfig;
constructor(config?: LogReplayConfig) {
this.config = Object.assign(defaultLogConfig, config);
}
/**
* generate a console log replayer which implement the interface ReplayLogger
*/
public getConsoleLogger(): ReplayLogger {
const replayLogger: ReplayLogger = {};
for (const level of this.config.level!) {
if (level === 'trace') {
replayLogger[level] = (data: LogData) => {
const logger = (console.log as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
? (console.log as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
: console.log;
logger(
...data.payload.map((s) => JSON.parse(s) as object),
this.formatMessage(data),
);
};
} else {
replayLogger[level] = (data: LogData) => {
const logger = (console[level] as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
? (console[level] as unknown as PatchedConsoleLog)[
ORIGINAL_ATTRIBUTE_NAME
]
: console[level];
logger(
...data.payload.map((s) => JSON.parse(s) as object),
this.formatMessage(data),
);
};
}
}
return replayLogger;
}
/**
* format the trace data to a string
* @param data - the log data
*/
private formatMessage(data: LogData): string {
if (data.trace.length === 0) {
return '';
}
const stackPrefix = '\n\tat ';
let result = stackPrefix;
result += data.trace.join(stackPrefix);
return result;
}
}
export const getReplayConsolePlugin: (
options?: LogReplayConfig,
) => ReplayPlugin = (options) => {
const replayLogger =
options?.replayLogger || new LogReplayPlugin(options).getConsoleLogger();
return {
handler(event: eventWithTime, _isSync, context) {
let logData: LogData | null = null;
if (
event.type === EventType.IncrementalSnapshot &&
event.data.source === (IncrementalSource.Log as IncrementalSource)
) {
logData = event.data as unknown as LogData;
} else if (
event.type === EventType.Plugin &&
event.data.plugin === PLUGIN_NAME
) {
logData = event.data.payload as LogData;
}
if (logData) {
try {
if (typeof replayLogger[logData.level] === 'function') {
replayLogger[logData.level]!(logData);
}
} catch (error) {
if (context.replayer.config.showWarning) {
console.warn(error);
}
}
}
},
};
};

31
packages/rrweb/src/plugins/sequential-id/record/index.ts
View File

@@ -1,31 +0,0 @@
import type { RecordPlugin } from '@rrweb/types';
export type SequentialIdOptions = {
key: string;
};
const defaultOptions: SequentialIdOptions = {
key: '_sid',
};
export const PLUGIN_NAME = 'rrweb/sequential-id@1';
export const getRecordSequentialIdPlugin: (
options?: Partial<SequentialIdOptions>,
) => RecordPlugin = (options) => {
const _options = options
? Object.assign({}, defaultOptions, options)
: defaultOptions;
let id = 0;
return {
name: PLUGIN_NAME,
eventProcessor(event) {
Object.assign(event, {
[_options.key]: ++id,
});
return event;
},
options: _options,
};
};

40
packages/rrweb/src/plugins/sequential-id/replay/index.ts
View File

@@ -1,40 +0,0 @@
import type { SequentialIdOptions } from '../record';
import type { ReplayPlugin } from '../../../types';
import type { eventWithTime } from '@rrweb/types';
type Options = SequentialIdOptions & {
warnOnMissingId: boolean;
};
const defaultOptions: Options = {
key: '_sid',
warnOnMissingId: true,
};
export const getReplaySequentialIdPlugin: (
options?: Partial<Options>,
) => ReplayPlugin = (options) => {
const { key, warnOnMissingId } = options
? Object.assign({}, defaultOptions, options)
: defaultOptions;
let currentId = 1;
return {
handler(event: eventWithTime) {
if (key in event) {
const id = (event as unknown as Record<string, number>)[key];
if (id !== currentId) {
console.error(
`[sequential-id-plugin]: expect to get an id with value "${currentId}", but got "${id}"`,
);
} else {
currentId++;
}
} else if (warnOnMissingId) {
console.warn(
`[sequential-id-plugin]: failed to get id in key: "${key}"`,
);
}
},
};
};

1
packages/rrweb/src/record/observers/canvas/2d.ts
View File

@@ -1,4 +1,3 @@
import type { Mirror } from 'rrweb-snapshot';
import {
blockClass,
CanvasContext,

4
packages/rrweb/src/record/observers/canvas/canvas-manager.ts
View File

@@ -14,7 +14,7 @@ import { CanvasContext } from '@rrweb/types';
import initCanvas2DMutationObserver from './2d';
import initCanvasContextObserver from './canvas';
import initCanvasWebGLMutationObserver from './webgl';
import ImageBitmapDataURLWorker from 'web-worker:../../workers/image-bitmap-data-url-worker.ts';
import ImageBitmapDataURLWorker from '../../workers/image-bitmap-data-url-worker?worker&inline';
import type { ImageBitmapDataURLRequestWorker } from '../../workers/image-bitmap-data-url-worker';
export type RafStamps = { latestId: number; invokeId: number | null };
@@ -286,7 +286,7 @@ export class CanvasManager {
flushPendingCanvasMutations() {
this.pendingCanvasMutations.forEach(
(values: canvasMutationCommand[], canvas: HTMLCanvasElement) => {
(_values: canvasMutationCommand[], canvas: HTMLCanvasElement) => {
const id = this.mirror.getId(canvas);
this.flushPendingCanvasMutationFor(canvas, id);
},

2
packages/rrweb/src/record/observers/canvas/webgl.ts
View File

@@ -16,7 +16,7 @@ function patchGLPrototype(
cb: canvasManagerMutationCallback,
blockClass: blockClass,
blockSelector: string | null,
mirror: Mirror,
_mirror: Mirror,
win: IWindow,
): listenerHandler[] {
const handlers: listenerHandler[] = [];

7
packages/rrweb/src/record/stylesheet-manager.ts
View File

@@ -50,7 +50,10 @@ export class StylesheetManager {
this.trackStylesheetInLinkElement(linkEl);
}
public adoptStyleSheets(sheets: CSSStyleSheet[], hostId: number) {
public adoptStyleSheets(
sheets: CSSStyleSheet[] | readonly CSSStyleSheet[],
hostId: number,
) {
if (sheets.length === 0) return;
const adoptedStyleSheetData: adoptedStyleSheetParam = {
id: hostId,
@@ -81,7 +84,7 @@ export class StylesheetManager {
}
// TODO: take snapshot on stylesheet reload by applying event listener
private trackStylesheetInLinkElement(linkEl: HTMLLinkElement) {
private trackStylesheetInLinkElement(_linkEl: HTMLLinkElement) {
// linkEl.addEventListener('load', () => {
// // re-loaded, maybe take another snapshot?
// });

3
packages/rrweb/src/record/workers/tsconfig.json
View File

@@ -2,6 +2,5 @@
"extends": "../../../tsconfig.json",
"compilerOptions": {
"lib": ["webworker"]
},
"exclude": ["workers.d.ts"]
}
}

4
packages/rrweb/src/record/workers/workers.d.ts vendored
View File

@@ -1,4 +0,0 @@
declare module 'web-worker:*' {
const WorkerFactory: new () => Worker;
export default WorkerFactory;
}

17
packages/rrweb/src/replay/index.ts
View File

@@ -31,7 +31,12 @@ import type {
import * as mittProxy from 'mitt';
import { polyfill as smoothscrollPolyfill } from './smoothscroll';
import { Timer } from './timer';
import { createPlayerService, createSpeedService } from './machine';
import {
createPlayerService,
createSpeedService,
type PlayerMachineState,
type SpeedMachineState,
} from './machine';
import type { playerConfig, missingNodeMap } from '../types';
import {
EventType,
@@ -1026,12 +1031,6 @@ export class Replayer {
* pause when there are some canvas drawImage args need to be loaded
*/
private async preloadAllImages(): Promise<void[]> {
let beforeLoadState = this.service.state;
const stateHandler = () => {
beforeLoadState = this.service.state;
};
this.emitter.on(ReplayerEvents.Start, stateHandler);
this.emitter.on(ReplayerEvents.Pause, stateHandler);
const promises: Promise<void>[] = [];
for (const event of this.service.state.context.events) {
if (
@@ -1060,8 +1059,6 @@ export class Replayer {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const imgd = ctx?.createImageData(canvas.width, canvas.height);
let d = imgd?.data;
d = JSON.parse(data.args[0]) as Uint8ClampedArray;
ctx?.putImageData(imgd!, 0, 0);
}
}
@@ -2230,3 +2227,5 @@ export class Replayer {
this.config.logger.log(REPLAY_CONSOLE_PREFIX, ...args);
}
}
export { PlayerMachineState, SpeedMachineState, playerConfig };

4
packages/rrweb/src/replay/media/index.ts
View File

@@ -1,5 +1,5 @@
import { Emitter, MediaInteractions, ReplayerEvents } from '@rrweb/types';
import type { RRMediaElement } from 'rrdom/es';
import type { RRMediaElement } from 'rrdom';
import type { createPlayerService, createSpeedService } from '../machine';
import type { Mirror, mediaAttributes } from 'rrweb-snapshot';
import type { mediaInteractionData } from '@rrweb/types';
@@ -50,7 +50,7 @@ export class MediaManager {
}
private syncAllMediaElements(options = { pause: false }) {
this.mediaMap.forEach((mediaState, target) => {
this.mediaMap.forEach((_mediaState, target) => {
this.syncTargetWithState(target);
if (options.pause) {
target.pause();

4
packages/rrweb/src/types.ts
View File

@@ -6,7 +6,6 @@ import type {
MaskTextFn,
DataURLOptions,
} from 'rrweb-snapshot';
import type { PackFn, UnpackFn } from './packer/base';
import type { IframeManager } from './record/iframe-manager';
import type { ShadowDomManager } from './record/shadow-dom-manager';
import type { Replayer } from './replay';
@@ -37,6 +36,8 @@ import type {
styleDeclarationCallback,
styleSheetRuleCallback,
viewportResizeCallback,
PackFn,
UnpackFn,
} from '@rrweb/types';
import type ProcessedNodeManager from './record/processed-node-manager';
@@ -164,6 +165,7 @@ export type ReplayPlugin = {
) => void;
getMirror?: (mirrors: { nodeMirror: Mirror }) => void;
};
export type { Replayer } from './replay';
export type playerConfig = {
speed: number;
maxSpeed: number;

781
packages/rrweb/test/__snapshots__/integration.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

BIN
packages/rrweb/test/__snapshots__/packer.test.ts.snap
View File

Binary file not shown.

510
packages/rrweb/test/__snapshots__/record.test.ts.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`record aggregates mutations 1`] = `
exports[`record > aggregates mutations 1`] = `
"[
{
\\"type\\": 4,
@@ -86,7 +86,7 @@ exports[`record aggregates mutations 1`] = `
]"
`;
exports[`record can add custom event 1`] = `
exports[`record > can add custom event 1`] = `
"[
{
\\"type\\": 4,
@@ -180,7 +180,7 @@ exports[`record can add custom event 1`] = `
]"
`;
exports[`record captures CORS stylesheets that are still loading 1`] = `
exports[`record > captures CORS stylesheets that are still loading 1`] = `
"[
{
\\"type\\": 4,
@@ -283,7 +283,7 @@ exports[`record captures CORS stylesheets that are still loading 1`] = `
]"
`;
exports[`record captures adopted stylesheets in nested shadow doms and iframes 1`] = `
exports[`record > captures adopted stylesheets in nested shadow doms and iframes 1`] = `
"[
{
\\"type\\": 4,
@@ -749,7 +749,7 @@ exports[`record captures adopted stylesheets in nested shadow doms and iframes 1
]"
`;
exports[`record captures adopted stylesheets in shadow doms and iframe 1`] = `
exports[`record > captures adopted stylesheets in shadow doms and iframe 1`] = `
"[
{
\\"type\\": 4,
@@ -1145,7 +1145,7 @@ exports[`record captures adopted stylesheets in shadow doms and iframe 1`] = `
]"
`;
exports[`record captures adopted stylesheets of shadow doms in checkout full snapshot 1`] = `
exports[`record > captures adopted stylesheets of shadow doms in checkout full snapshot 1`] = `
"[
{
\\"type\\": 4,
@@ -1350,7 +1350,7 @@ exports[`record captures adopted stylesheets of shadow doms in checkout full sna
]"
`;
exports[`record captures inserted style text nodes correctly 1`] = `
exports[`record > captures inserted style text nodes correctly 1`] = `
"[
{
\\"type\\": 4,
@@ -1480,7 +1480,7 @@ exports[`record captures inserted style text nodes correctly 1`] = `
]"
`;
exports[`record captures mutations on adopted stylesheets 1`] = `
exports[`record > captures mutations on adopted stylesheets 1`] = `
"[
{
\\"type\\": 4,
@@ -1780,7 +1780,7 @@ exports[`record captures mutations on adopted stylesheets 1`] = `
]"
`;
exports[`record captures nested stylesheet rules 1`] = `
exports[`record > captures nested stylesheet rules 1`] = `
"[
{
\\"type\\": 4,
@@ -1929,7 +1929,7 @@ exports[`record captures nested stylesheet rules 1`] = `
]"
`;
exports[`record captures style property changes 1`] = `
exports[`record > captures style property changes 1`] = `
"[
{
\\"type\\": 4,
@@ -2058,7 +2058,7 @@ exports[`record captures style property changes 1`] = `
]"
`;
exports[`record captures stylesheet rules 1`] = `
exports[`record > captures stylesheet rules 1`] = `
"[
{
\\"type\\": 4,
@@ -2196,7 +2196,7 @@ exports[`record captures stylesheet rules 1`] = `
]"
`;
exports[`record captures stylesheets in iframes with \`blob:\` url 1`] = `
exports[`record > captures stylesheets in iframes with \`blob:\` url 1`] = `
"[
{
\\"type\\": 4,
@@ -2340,7 +2340,7 @@ exports[`record captures stylesheets in iframes with \`blob:\` url 1`] = `
]"
`;
exports[`record captures stylesheets with \`blob:\` url 1`] = `
exports[`record > captures stylesheets with \`blob:\` url 1`] = `
"[
{
\\"type\\": 4,
@@ -2428,242 +2428,7 @@ exports[`record captures stylesheets with \`blob:\` url 1`] = `
]"
`;
exports[`record iframes captures stylesheet mutations in iframes 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"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\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"iframe\\",
\\"attributes\\": {
\\"srcdoc\\": \\"<button>Mysterious Button</button>\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n </body>\\\\n </html>\\\\n \\",
\\"id\\": 8
}
],
\\"id\\": 7
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"adds\\": [
{
\\"parentId\\": 7,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"rootId\\": 9,
\\"id\\": 11
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Mysterious Button\\",
\\"rootId\\": 9,
\\"id\\": 14
}
],
\\"rootId\\": 9,
\\"id\\": 13
}
],
\\"rootId\\": 9,
\\"id\\": 12
}
],
\\"rootId\\": 9,
\\"id\\": 10
}
],
\\"id\\": 9
}
}
],
\\"removes\\": [],
\\"texts\\": [],
\\"attributes\\": [],
\\"isAttachIframe\\": true
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 11,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"style\\",
\\"attributes\\": {
\\"_cssText\\": \\"body { background: rgb(0, 0, 0); }@media {\\\\n body { background: rgb(0, 0, 0); }\\\\n}\\"
},
\\"childNodes\\": [],
\\"rootId\\": 9,
\\"id\\": 15
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #fff; }\\"
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #ccc; }\\",
\\"index\\": [
2,
0
]
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"removes\\": [
{
\\"index\\": 0
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 13,
\\"id\\": 15,
\\"set\\": {
\\"property\\": \\"color\\",
\\"value\\": \\"green\\"
},
\\"index\\": [
0
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"removes\\": [
{
\\"index\\": [
1,
0
]
}
]
}
}
]"
`;
exports[`record is safe to checkout during async callbacks 1`] = `
exports[`record > is safe to checkout during async callbacks 1`] = `
"[
{
\\"type\\": 4,
@@ -2919,7 +2684,7 @@ exports[`record is safe to checkout during async callbacks 1`] = `
]"
`;
exports[`record loading stylesheets captures stylesheets in iframes that are still loading 1`] = `
exports[`record > loading stylesheets > captures stylesheets in iframes that are still loading 1`] = `
"[
{
\\"type\\": 4,
@@ -3255,7 +3020,7 @@ exports[`record loading stylesheets captures stylesheets in iframes that are sti
]"
`;
exports[`record loading stylesheets captures stylesheets that are still loading 1`] = `
exports[`record > loading stylesheets > captures stylesheets that are still loading 1`] = `
"[
{
\\"type\\": 4,
@@ -3435,7 +3200,7 @@ exports[`record loading stylesheets captures stylesheets that are still loading
]"
`;
exports[`record no need for attribute mutations on adds 1`] = `
exports[`record > no need for attribute mutations on adds 1`] = `
"[
{
\\"type\\": 4,
@@ -3555,7 +3320,7 @@ exports[`record no need for attribute mutations on adds 1`] = `
]"
`;
exports[`record should record scroll position 1`] = `
exports[`record > should record scroll position 1`] = `
"[
{
\\"type\\": 4,
@@ -3675,7 +3440,7 @@ exports[`record should record scroll position 1`] = `
]"
`;
exports[`record without CSSGroupingRule support captures nested stylesheet rules 1`] = `
exports[`record > without CSSGroupingRule support > captures nested stylesheet rules 1`] = `
"[
{
\\"type\\": 4,
@@ -3823,3 +3588,238 @@ exports[`record without CSSGroupingRule support captures nested stylesheet rules
}
]"
`;
exports[`record iframes > captures stylesheet mutations in iframes 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"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\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"iframe\\",
\\"attributes\\": {
\\"srcdoc\\": \\"<button>Mysterious Button</button>\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n </body>\\\\n </html>\\\\n \\",
\\"id\\": 8
}
],
\\"id\\": 7
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"adds\\": [
{
\\"parentId\\": 7,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 0,
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"html\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"rootId\\": 9,
\\"id\\": 11
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"button\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"Mysterious Button\\",
\\"rootId\\": 9,
\\"id\\": 14
}
],
\\"rootId\\": 9,
\\"id\\": 13
}
],
\\"rootId\\": 9,
\\"id\\": 12
}
],
\\"rootId\\": 9,
\\"id\\": 10
}
],
\\"id\\": 9
}
}
],
\\"removes\\": [],
\\"texts\\": [],
\\"attributes\\": [],
\\"isAttachIframe\\": true
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 0,
\\"texts\\": [],
\\"attributes\\": [],
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 11,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"style\\",
\\"attributes\\": {
\\"_cssText\\": \\"body { background: rgb(0, 0, 0); }@media {\\\\n body { background: rgb(0, 0, 0); }\\\\n}\\"
},
\\"childNodes\\": [],
\\"rootId\\": 9,
\\"id\\": 15
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #fff; }\\"
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"adds\\": [
{
\\"rule\\": \\"body { color: #ccc; }\\",
\\"index\\": [
2,
0
]
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"removes\\": [
{
\\"index\\": 0
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 13,
\\"id\\": 15,
\\"set\\": {
\\"property\\": \\"color\\",
\\"value\\": \\"green\\"
},
\\"index\\": [
0
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 8,
\\"id\\": 15,
\\"removes\\": [
{
\\"index\\": [
1,
0
]
}
]
}
}
]"
`;

12
packages/rrweb/test/__snapshots__/replayer.test.ts.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`replayer can fast forward past StyleSheetRule changes on virtual elements 1`] = `
exports[`replayer > can fast forward past StyleSheetRule changes on virtual elements 1`] = `
"file-frame-4
<html>
<head>
@@ -80,7 +80,7 @@ file-cid-3
"
`;
exports[`replayer can fast forward past StyleSheetRule deletion on virtual elements 1`] = `
exports[`replayer > can fast forward past StyleSheetRule deletion on virtual elements 1`] = `
"file-frame-4
<html>
<head>
@@ -158,7 +158,7 @@ file-cid-3
"
`;
exports[`replayer can handle removing style elements 1`] = `
exports[`replayer > can handle removing style elements 1`] = `
"file-frame-1
<html>
<head>
@@ -206,7 +206,7 @@ html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { ani
"
`;
exports[`replayer replays same timestamp events in correct order (with addAction) 1`] = `
exports[`replayer > replays same timestamp events in correct order (with addAction) 1`] = `
"file-frame-1
<html>
<head>
@@ -257,7 +257,7 @@ html.rrweb-paused *, html.rrweb-paused ::before, html.rrweb-paused ::after { ani
"
`;
exports[`replayer replays same timestamp events in correct order 1`] = `
exports[`replayer > replays same timestamp events in correct order 1`] = `
"file-frame-1
<html>
<head>

7
packages/rrweb/test/benchmark/dom-mutation.test.ts
View File

@@ -1,5 +1,6 @@
import * as fs from 'fs';
import * as path from 'path';
import { vi } from 'vitest';
import type { Page } from 'puppeteer';
import type { eventWithTime } from '@rrweb/types';
import type { recordOptions } from '../../src/types';
@@ -61,7 +62,7 @@ function avg(v: number[]): number {
}
describe('benchmark: mutation observer', () => {
jest.setTimeout(240000);
vi.setConfig({ testTimeout: 240000 });
let page: ISuite['page'];
let browser: ISuite['browser'];
let server: ISuite['server'];
@@ -70,7 +71,7 @@ describe('benchmark: mutation observer', () => {
server = await startServer();
browser = await launchPuppeteer({
dumpio: true,
headless: true,
headless: 'new',
});
});
@@ -90,7 +91,7 @@ describe('benchmark: mutation observer', () => {
const addRecordingScript = async (page: Page) => {
// const scriptUrl = `${getServerURL(server)}/rrweb-1.1.3.js`;
const scriptUrl = `${getServerURL(server)}/rrweb.js`;
const scriptUrl = `${getServerURL(server)}/rrweb.umd.cjs`;
await page.evaluate((url) => {
const scriptEl = document.createElement('script');
scriptEl.src = url;

11
packages/rrweb/test/benchmark/replay-fast-forward.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import * as https from 'https';
import { vi } from 'vitest';
import type { eventWithTime } from '@rrweb/types';
import type { recordOptions } from '../../src/types';
import { launchPuppeteer, ISuite } from '../utils';
@@ -81,18 +82,18 @@ function avg(v: number[]): number {
}
describe('benchmark: replayer fast-forward performance', () => {
jest.setTimeout(240000);
vi.setConfig({ testTimeout: 240000 });
let code: ISuite['code'];
let page: ISuite['page'];
let browser: ISuite['browser'];
beforeAll(async () => {
browser = await launchPuppeteer({
headless: true,
headless: 'new',
args: ['--disable-dev-shm-usage'],
});
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.min.js');
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
code = fs.readFileSync(bundlePath, 'utf8');
}, 600_000);
@@ -124,14 +125,14 @@ describe('benchmark: replayer fast-forward performance', () => {
window.events = ${suite.eventsString};
</script>
</html>`);
const duration = (await page.evaluate(() => {
const duration = await page.evaluate(() => {
const replayer = new (window as any).rrweb.Replayer(
(window as any).events,
);
const start = Date.now();
replayer.play(replayer.getMetaData().totalTime + 100);
return Date.now() - start;
})) as number;
});
durations.push(duration);
await page.close();
}

0
packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-image-1-snap.png → packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-test-e-2-e-webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-image-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

0
packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png → packages/rrweb/test/e2e/__image_snapshots__/webgl-test-ts-test-e-2-e-webgl-test-ts-e-2-e-webgl-will-record-and-replay-a-webgl-square-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

2
packages/rrweb/test/e2e/webgl.test.ts
View File

@@ -29,7 +29,7 @@ describe('e2e webgl', () => {
serverURL = getServerURL(server);
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
code = fs.readFileSync(bundlePath, 'utf8');
});

10
packages/rrweb/test/html/log.html
View File

@@ -1,10 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Log record</title>
</head>
<body></body>
</html>

105
packages/rrweb/test/integration.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import {
assertSnapshot,
startServer,
@@ -17,7 +18,7 @@ import { eventWithTime, EventType, RecordPlugin } from '@rrweb/types';
import { visitSnapshot, NodeType } from 'rrweb-snapshot';
describe('record integration tests', function (this: ISuite) {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 10_000 });
const getHtml = (
fileName: string,
@@ -49,13 +50,8 @@ describe('record integration tests', function (this: ISuite) {
serverURL = getServerURL(server);
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.js');
const pluginsCode = [
path.resolve(__dirname, '../dist/plugins/console-record.js'),
]
.map((p) => fs.readFileSync(p, 'utf8'))
.join();
code = fs.readFileSync(bundlePath, 'utf8') + pluginsCode;
const bundlePath = path.resolve(__dirname, '../dist/rrweb.umd.cjs');
code = fs.readFileSync(bundlePath, 'utf8');
});
afterAll(async () => {
@@ -641,6 +637,7 @@ describe('record integration tests', function (this: ISuite) {
await page.evaluate(() => {
const el = document.createElement('input');
el.size = 50;
el.id = 'input';
el.value = 'input should be masked';
@@ -726,98 +723,6 @@ describe('record integration tests', function (this: ISuite) {
expect(text).toEqual('4\n3\n2\n1\n5');
});
it('should record console messages', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml('log.html', {
plugins:
'[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown as RecordPlugin<unknown>[],
}),
);
await page.evaluate(() => {
console.assert(0 === 0, 'assert');
console.count('count');
console.countReset('count');
console.debug('debug');
console.dir('dir');
console.dirxml('dirxml');
console.group();
console.groupCollapsed();
console.info('info');
console.log('log');
console.table('table');
console.time();
console.timeEnd();
console.timeLog();
console.trace('trace');
console.warn('warn');
console.clear();
console.log(new TypeError('a message'));
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
});
await waitForRAF(page);
await page.frames()[1].evaluate(() => {
console.log('from iframe');
});
await waitForRAF(page);
const snapshots = (await page.evaluate(
'window.snapshots',
)) as eventWithTime[];
assertSnapshot(snapshots);
});
it('should handle recursive console messages', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto('about:blank');
await page.setContent(
getHtml('log.html', {
plugins:
'[rrwebConsoleRecord.getRecordConsolePlugin()]' as unknown as RecordPlugin<unknown>[],
}),
);
await page.evaluate(() => {
// Some frameworks like Vue.js use proxies to implement reactivity.
// This can cause infinite loops when logging objects.
let recursiveTarget = { foo: 'bar', proxied: 'i-am', proxy: null };
let count = 0;
const handler = {
get(target: any, prop: any, ...args: any[]) {
if (prop === 'proxied') {
if (count > 9) {
return;
}
count++; // We don't want out test to get into an infinite loop...
console.warn(
'proxied was accessed so triggering a console.warn',
target,
);
}
return Reflect.get(target, prop, ...args);
},
};
const proxy = new Proxy(recursiveTarget, handler);
recursiveTarget.proxy = proxy;
console.log('Proxied object:', proxy);
});
await waitForRAF(page);
const snapshots = (await page.evaluate(
'window.snapshots',
)) as eventWithTime[];
// The snapshots should containe 1 console log, not multiple.
assertSnapshot(snapshots);
});
it('should nest record iframe', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto(`${serverURL}/html`);

48
packages/rrweb/test/packer.test.ts
View File

@@ -1,48 +0,0 @@
import { pack, unpack } from '../src/packer';
import { eventWithTime, EventType } from '@rrweb/types';
import { MARK } from '../src/packer/base';
const event: eventWithTime = {
type: EventType.DomContentLoaded,
data: {},
timestamp: new Date('2020-01-01').getTime(),
};
describe('pack', () => {
it('can pack event', () => {
const packedData = pack(event);
expect(packedData).toMatchSnapshot();
});
});
describe('unpack', () => {
it('is compatible with unpacked data 1', () => {
const result = unpack(event as unknown as string);
expect(result).toEqual(event);
});
it('is compatible with unpacked data 2', () => {
const result = unpack(JSON.stringify(event));
expect(result).toEqual(event);
});
it('stop on unknown data format', () => {
const consoleSpy = jest
.spyOn(console, 'error')
.mockImplementation(() => {});
expect(() => unpack('[""]')).toThrow('');
expect(consoleSpy).toHaveBeenCalled();
jest.resetAllMocks();
});
it('can unpack packed data', () => {
const packedData = pack(event);
const result = unpack(packedData);
expect(result).toEqual({
...event,
v: MARK,
});
});
});

11
packages/rrweb/test/plugins/console/record.test.ts
View File

@@ -1,11 +0,0 @@
/**
* @jest-environment jsdom
*/
import { stringify } from '../../../src/plugins/console/record/stringify';
describe('console record plugin', () => {
it('can stringify bigint', () => {
expect(stringify(BigInt(1))).toEqual('"1n"');
});
});

8
packages/rrweb/test/record.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import 'construct-style-sheets-polyfill';
import type { recordOptions } from '../src/types';
import {
@@ -49,7 +50,7 @@ const setup = function (this: ISuite, content: string): ISuite {
devtools: true,
});
const bundlePath = path.resolve(__dirname, '../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../dist/rrweb.umd.cjs');
ctx.code = fs.readFileSync(bundlePath, 'utf8');
});
@@ -58,6 +59,7 @@ const setup = function (this: ISuite, content: string): ISuite {
await ctx.page.goto('about:blank');
await ctx.page.setContent(content);
await ctx.page.evaluate(ctx.code);
ctx.events = [];
await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
@@ -81,7 +83,7 @@ const setup = function (this: ISuite, content: string): ISuite {
};
describe('record', function (this: ISuite) {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 10_000 });
const ctx: ISuite = setup.call(
this,
@@ -927,7 +929,7 @@ describe('record', function (this: ISuite) {
});
describe('record iframes', function (this: ISuite) {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 10_000 });
const ctx: ISuite = setup.call(
this,

199
packages/rrweb/test/record/__snapshots__/cross-origin-iframes.test.ts.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`cross origin iframes audio.html should emit contents of iframe once 1`] = `
exports[`cross origin iframes > audio.html > should emit contents of iframe once 1`] = `
"[
{
\\"type\\": 4,
@@ -338,7 +338,7 @@ exports[`cross origin iframes audio.html should emit contents of iframe once 1`]
]"
`;
exports[`cross origin iframes blank.html should filter out forwarded cross origin rrweb messages 1`] = `
exports[`cross origin iframes > blank.html > should filter out forwarded cross origin rrweb messages 1`] = `
"[
{
\\"type\\": 4,
@@ -600,7 +600,7 @@ exports[`cross origin iframes blank.html should filter out forwarded cross origi
]"
`;
exports[`cross origin iframes blank.html should record same-origin iframe in cross-origin iframe 1`] = `
exports[`cross origin iframes > blank.html > should record same-origin iframe in cross-origin iframe 1`] = `
"[
{
\\"type\\": 4,
@@ -844,176 +844,7 @@ exports[`cross origin iframes blank.html should record same-origin iframe in cro
]"
`;
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\\": \\"text/javascript\\"
},
\\"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\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"rootId\\": 11,
\\"id\\": 15
}
],
\\"rootId\\": 11,
\\"id\\": 14
}
],
\\"rootId\\": 11,
\\"id\\": 13
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n\\\\n\\",
\\"rootId\\": 11,
\\"id\\": 17
}
],
\\"rootId\\": 11,
\\"id\\": 16
}
],
\\"rootId\\": 11,
\\"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`] = `
exports[`cross origin iframes > form.html > should map input events correctly 1`] = `
"[
{
\\"type\\": 4,
@@ -2026,7 +1857,7 @@ exports[`cross origin iframes form.html should map input events correctly 1`] =
]"
`;
exports[`cross origin iframes form.html should map scroll events correctly 1`] = `
exports[`cross origin iframes > form.html > should map scroll events correctly 1`] = `
"[
{
\\"type\\": 4,
@@ -2682,7 +2513,7 @@ exports[`cross origin iframes form.html should map scroll events correctly 1`] =
]"
`;
exports[`cross origin iframes move-node.html captures mutations on adopted stylesheets 1`] = `
exports[`cross origin iframes > move-node.html > captures mutations on adopted stylesheets 1`] = `
"[
{
\\"type\\": 4,
@@ -3096,7 +2927,7 @@ exports[`cross origin iframes move-node.html captures mutations on adopted style
]"
`;
exports[`cross origin iframes move-node.html captures mutations on stylesheets 1`] = `
exports[`cross origin iframes > move-node.html > captures mutations on stylesheets 1`] = `
"[
{
\\"type\\": 4,
@@ -3515,7 +3346,7 @@ exports[`cross origin iframes move-node.html captures mutations on stylesheets 1
]"
`;
exports[`cross origin iframes move-node.html should record DOM attribute changes 1`] = `
exports[`cross origin iframes > move-node.html > should record DOM attribute changes 1`] = `
"[
{
\\"type\\": 4,
@@ -3803,7 +3634,7 @@ exports[`cross origin iframes move-node.html should record DOM attribute changes
]"
`;
exports[`cross origin iframes move-node.html should record DOM node movement 1`] = `
exports[`cross origin iframes > move-node.html > should record DOM node movement 1`] = `
"[
{
\\"type\\": 4,
@@ -4188,7 +4019,7 @@ exports[`cross origin iframes move-node.html should record DOM node movement 1`]
]"
`;
exports[`cross origin iframes move-node.html should record DOM node removal 1`] = `
exports[`cross origin iframes > move-node.html > should record DOM node removal 1`] = `
"[
{
\\"type\\": 4,
@@ -4474,7 +4305,7 @@ exports[`cross origin iframes move-node.html should record DOM node removal 1`]
]"
`;
exports[`cross origin iframes move-node.html should record DOM text changes 1`] = `
exports[`cross origin iframes > move-node.html > should record DOM text changes 1`] = `
"[
{
\\"type\\": 4,
@@ -4760,7 +4591,7 @@ exports[`cross origin iframes move-node.html should record DOM text changes 1`]
]"
`;
exports[`cross origin iframes move-node.html should record canvas elements 1`] = `
exports[`cross origin iframes > move-node.html > should record canvas elements 1`] = `
"[
{
\\"type\\": 4,
@@ -5083,7 +4914,7 @@ exports[`cross origin iframes move-node.html should record canvas elements 1`] =
]"
`;
exports[`cross origin iframes move-node.html should record custom events 1`] = `
exports[`cross origin iframes > move-node.html > should record custom events 1`] = `
"[
{
\\"type\\": 4,
@@ -5365,7 +5196,7 @@ exports[`cross origin iframes move-node.html should record custom events 1`] = `
]"
`;
exports[`same origin iframes should emit contents of iframe once 1`] = `
exports[`same origin iframes > should emit contents of iframe once 1`] = `
"[
{
\\"type\\": 4,

702
packages/rrweb/test/record/__snapshots__/webgl.test.ts.snap
View File

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`record webgl recordCanvas FPS should record snapshots 1`] = `
exports[`record webgl > recordCanvas FPS > should record snapshots 1`] = `
"[
{
\\"type\\": 4,
@@ -32,7 +32,23 @@ exports[`record webgl recordCanvas FPS should record snapshots 1`] = `
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {
\\"type\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 6
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
@@ -43,7 +59,7 @@ exports[`record webgl recordCanvas FPS should record snapshots 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -52,15 +68,15 @@ exports[`record webgl recordCanvas FPS should record snapshots 1`] = `
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
\\"id\\": 10
}
],
\\"id\\": 5
\\"id\\": 7
}
],
\\"id\\": 3
@@ -73,93 +89,11 @@ exports[`record webgl recordCanvas FPS should record snapshots 1`] = `
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"type\\": 0,
\\"commands\\": [
{
\\"property\\": \\"clearRect\\",
\\"args\\": [
0,
0,
300,
150
]
},
{
\\"property\\": \\"drawImage\\",
\\"args\\": [
{
\\"rr_type\\": \\"ImageBitmap\\",
\\"args\\": [
{
\\"rr_type\\": \\"Blob\\",
\\"data\\": [
{
\\"rr_type\\": \\"ArrayBuffer\\",
\\"base64\\": \\"base64-0\\"
}
],
\\"type\\": \\"image/png\\"
}
]
},
0,
0
]
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"type\\": 0,
\\"commands\\": [
{
\\"property\\": \\"clearRect\\",
\\"args\\": [
0,
0,
300,
150
]
},
{
\\"property\\": \\"drawImage\\",
\\"args\\": [
{
\\"rr_type\\": \\"ImageBitmap\\",
\\"args\\": [
{
\\"rr_type\\": \\"Blob\\",
\\"data\\": [
{
\\"rr_type\\": \\"ArrayBuffer\\",
\\"base64\\": \\"base64-1\\"
}
],
\\"type\\": \\"image/png\\"
}
]
},
0,
0
]
}
]
}
}
]"
`;
exports[`record webgl should batch events by RAF 1`] = `
exports[`record webgl > should batch events by RAF 1`] = `
"[
{
\\"type\\": 4,
@@ -191,7 +125,23 @@ exports[`record webgl should batch events by RAF 1`] = `
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {
\\"type\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 6
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
@@ -202,7 +152,7 @@ exports[`record webgl should batch events by RAF 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -211,15 +161,15 @@ exports[`record webgl should batch events by RAF 1`] = `
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
\\"id\\": 10
}
],
\\"id\\": 5
\\"id\\": 7
}
],
\\"id\\": 3
@@ -237,7 +187,7 @@ exports[`record webgl should batch events by RAF 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"id\\": 9,
\\"type\\": 1,
\\"commands\\": [
{
@@ -260,7 +210,7 @@ exports[`record webgl should batch events by RAF 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"id\\": 9,
\\"type\\": 1,
\\"commands\\": [
{
@@ -289,7 +239,7 @@ exports[`record webgl should batch events by RAF 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"id\\": 9,
\\"type\\": 1,
\\"commands\\": [
{
@@ -304,7 +254,7 @@ exports[`record webgl should batch events by RAF 1`] = `
]"
`;
exports[`record webgl will record changes to a canvas element 1`] = `
exports[`record webgl > will record changes to a canvas element 1`] = `
"[
{
\\"type\\": 4,
@@ -336,7 +286,23 @@ exports[`record webgl will record changes to a canvas element 1`] = `
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {
\\"type\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 6
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
@@ -347,7 +313,7 @@ exports[`record webgl will record changes to a canvas element 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -356,15 +322,15 @@ exports[`record webgl will record changes to a canvas element 1`] = `
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
\\"id\\": 10
}
],
\\"id\\": 5
\\"id\\": 7
}
],
\\"id\\": 3
@@ -382,7 +348,7 @@ exports[`record webgl will record changes to a canvas element 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"id\\": 9,
\\"type\\": 1,
\\"commands\\": [
{
@@ -397,7 +363,7 @@ exports[`record webgl will record changes to a canvas element 1`] = `
]"
`;
exports[`record webgl will record changes to a canvas element before the canvas gets added (webgl2) 1`] = `
exports[`record webgl > will record changes to a canvas element before the canvas gets added (webgl2) 1`] = `
"[
{
\\"type\\": 4,
@@ -429,7 +395,23 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {
\\"type\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 6
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
@@ -440,7 +422,7 @@ exports[`record webgl will record changes to a canvas element before the canvas
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -449,15 +431,15 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
\\"id\\": 10
}
],
\\"id\\": 5
\\"id\\": 7
}
],
\\"id\\": 3
@@ -480,14 +462,14 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 5,
\\"parentId\\": 7,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"canvas\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 9
\\"id\\": 11
}
}
]
@@ -497,7 +479,7 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 9,
\\"id\\": 11,
\\"type\\": 2,
\\"commands\\": [
{
@@ -525,7 +507,7 @@ exports[`record webgl will record changes to a canvas element before the canvas
]"
`;
exports[`record webgl will record changes to a canvas element before the canvas gets added 1`] = `
exports[`record webgl > will record changes to a canvas element before the canvas gets added 1`] = `
"[
{
\\"type\\": 4,
@@ -557,7 +539,23 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {
\\"type\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 6
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
@@ -568,7 +566,7 @@ exports[`record webgl will record changes to a canvas element before the canvas
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -577,15 +575,15 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
\\"id\\": 10
}
],
\\"id\\": 5
\\"id\\": 7
}
],
\\"id\\": 3
@@ -608,224 +606,256 @@ exports[`record webgl will record changes to a canvas element before the canvas
\\"removes\\": [],
\\"adds\\": [
{
\\"parentId\\": 5,
\\"parentId\\": 7,
\\"nextId\\": null,
\\"node\\": {
\\"type\\": 2,
\\"tagName\\": \\"canvas\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"id\\": 9
\\"id\\": 11
}
}
]
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 11,
\\"type\\": 1,
\\"commands\\": [
{
\\"property\\": \\"createProgram\\",
\\"args\\": []
},
{
\\"property\\": \\"linkProgram\\",
\\"args\\": [
{
\\"rr_type\\": \\"WebGLProgram\\",
\\"index\\": 0
}
]
},
{
\\"property\\": \\"clear\\",
\\"args\\": [
16384
]
}
]
}
}
]"
`;
exports[`record webgl > will record changes to a webgl2 canvas element 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"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\\": \\"text/javascript\\"
},
\\"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\\": \\"canvas\\",
\\"attributes\\": {
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 10
}
],
\\"id\\": 7
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 9,
\\"type\\": 2,
\\"commands\\": [
{
\\"property\\": \\"clear\\",
\\"args\\": [
16384
]
}
]
}
}
]"
`;
exports[`record webgl > will record webgl variables 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"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\\": \\"text/javascript\\"
},
\\"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\\": \\"canvas\\",
\\"attributes\\": {
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 10
}
],
\\"id\\": 7
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 9,
\\"type\\": 1,
\\"commands\\": [
{
\\"property\\": \\"createProgram\\",
\\"args\\": []
},
{
\\"property\\": \\"linkProgram\\",
\\"args\\": [
{
\\"rr_type\\": \\"WebGLProgram\\",
\\"index\\": 0
}
]
},
{
\\"property\\": \\"clear\\",
\\"args\\": [
16384
]
}
]
}
}
]"
`;
exports[`record webgl will record changes to a webgl2 canvas element 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"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\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"canvas\\",
\\"attributes\\": {
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"type\\": 2,
\\"commands\\": [
{
\\"property\\": \\"clear\\",
\\"args\\": [
16384
]
}
]
}
}
]"
`;
exports[`record webgl will record webgl variables 1`] = `
"[
{
\\"type\\": 4,
\\"data\\": {
\\"href\\": \\"about:blank\\",
\\"width\\": 1920,
\\"height\\": 1080
}
},
{
\\"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\\": [],
\\"id\\": 4
},
{
\\"type\\": 2,
\\"tagName\\": \\"body\\",
\\"attributes\\": {},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
},
{
\\"type\\": 2,
\\"tagName\\": \\"canvas\\",
\\"attributes\\": {
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
}
],
\\"id\\": 5
}
],
\\"id\\": 3
}
],
\\"id\\": 1
},
\\"initialOffset\\": {
\\"left\\": 0,
\\"top\\": 0
}
}
},
{
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"type\\": 1,
\\"commands\\": [
{
\\"property\\": \\"createProgram\\",
@@ -859,7 +889,7 @@ exports[`record webgl will record webgl variables 1`] = `
]"
`;
exports[`record webgl will record webgl variables in reverse order 1`] = `
exports[`record webgl > will record webgl variables in reverse order 1`] = `
"[
{
\\"type\\": 4,
@@ -891,7 +921,23 @@ exports[`record webgl will record webgl variables in reverse order 1`] = `
\\"type\\": 2,
\\"tagName\\": \\"head\\",
\\"attributes\\": {},
\\"childNodes\\": [],
\\"childNodes\\": [
{
\\"type\\": 2,
\\"tagName\\": \\"script\\",
\\"attributes\\": {
\\"type\\": \\"text/javascript\\"
},
\\"childNodes\\": [
{
\\"type\\": 3,
\\"textContent\\": \\"SCRIPT_PLACEHOLDER\\",
\\"id\\": 6
}
],
\\"id\\": 5
}
],
\\"id\\": 4
},
{
@@ -902,7 +948,7 @@ exports[`record webgl will record webgl variables in reverse order 1`] = `
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\",
\\"id\\": 6
\\"id\\": 8
},
{
\\"type\\": 2,
@@ -911,15 +957,15 @@ exports[`record webgl will record webgl variables in reverse order 1`] = `
\\"id\\": \\"canvas\\"
},
\\"childNodes\\": [],
\\"id\\": 7
\\"id\\": 9
},
{
\\"type\\": 3,
\\"textContent\\": \\"\\\\n \\\\n \\\\n \\",
\\"id\\": 8
\\"id\\": 10
}
],
\\"id\\": 5
\\"id\\": 7
}
],
\\"id\\": 3
@@ -937,7 +983,7 @@ exports[`record webgl will record webgl variables in reverse order 1`] = `
\\"type\\": 3,
\\"data\\": {
\\"source\\": 9,
\\"id\\": 7,
\\"id\\": 9,
\\"type\\": 1,
\\"commands\\": [
{

44
packages/rrweb/test/record/cross-origin-iframes.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import type { recordOptions } from '../../src/types';
import type {
listenerHandler,
@@ -15,7 +16,6 @@ import {
startServer,
waitForRAF,
} from '../utils';
import { unpack } from '../../src/packer/unpack';
import type * as http from 'http';
interface ISuite {
@@ -46,13 +46,21 @@ async function injectRecordScript(
frame: puppeteer.Frame,
options?: ExtraOptions,
) {
await frame.addScriptTag({
path: path.resolve(__dirname, '../../dist/rrweb-all.js'),
});
try {
await frame.addScriptTag({
path: path.resolve(__dirname, '../../dist/rrweb.umd.cjs'),
});
} catch (e) {
// we get this error: `Protocol error (DOM.resolveNode): Node with given id does not belong to the document`
// then the page wasn't loaded yet and we try again
if (!e.message.includes('DOM.resolveNode')) throw e;
await injectRecordScript(frame, options);
return;
}
options = options || {};
await frame.evaluate((options) => {
(window as unknown as IWindow).snapshots = [];
const { record, pack } = (window as unknown as IWindow).rrweb;
const { record } = (window as unknown as IWindow).rrweb;
const config: recordOptions<eventWithTime> = {
recordCrossOriginIframes: true,
recordCanvas: true,
@@ -61,9 +69,6 @@ async function injectRecordScript(
(window as unknown as IWindow).emit(event);
},
};
if (options.usePackFn) {
config.packFn = pack;
}
record(config);
}, options);
@@ -89,7 +94,7 @@ const setup = function (
ctx.serverB = await startServer();
ctx.serverBURL = getServerURL(ctx.serverB);
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
ctx.code = fs.readFileSync(bundlePath, 'utf8');
});
@@ -126,7 +131,7 @@ const setup = function (
};
describe('cross origin iframes', function (this: ISuite) {
jest.setTimeout(100_000);
vi.setConfig({ testTimeout: 100_000 });
describe('form.html', function (this: ISuite) {
const ctx: ISuite = setup.call(
@@ -476,7 +481,7 @@ describe('cross origin iframes', function (this: ISuite) {
});
describe('audio.html', function (this: ISuite) {
jest.setTimeout(100_000);
vi.setConfig({ testTimeout: 100_000 });
const ctx: ISuite = setup.call(
this,
@@ -561,26 +566,11 @@ 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);
});
});
});
});
describe('same origin iframes', function (this: ISuite) {
jest.setTimeout(100_000);
vi.setConfig({ testTimeout: 100_000 });
const ctx: ISuite = setup.call(
this,

5
packages/rrweb/test/record/error-handler.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import type { recordOptions } from '../../src/types';
import { listenerHandler, eventWithTime, EventType } from '@rrweb/types';
import { launchPuppeteer } from '../utils';
@@ -37,7 +38,7 @@ const setup = function (
beforeAll(async () => {
ctx.browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
ctx.code = fs.readFileSync(bundlePath, 'utf8');
});
@@ -69,7 +70,7 @@ const setup = function (
};
describe('error-handler', function (this: ISuite) {
jest.setTimeout(100_000);
vi.setConfig({ testTimeout: 100_000 });
const ctx: ISuite = setup.call(
this,

2
packages/rrweb/test/record/serialize-args.test.ts
View File

@@ -1,5 +1,5 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import { polyfillWebGLGlobals } from '../utils';
polyfillWebGLGlobals();

12
packages/rrweb/test/record/webgl.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import type { recordOptions } from '../../src/types';
import {
listenerHandler,
@@ -43,16 +44,15 @@ const setup = function (
beforeAll(async () => {
ctx.browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
ctx.code = fs.readFileSync(bundlePath, 'utf8');
});
beforeEach(async () => {
ctx.page = await ctx.browser.newPage();
await ctx.page.goto('about:blank');
await ctx.page.setContent(content);
await ctx.page.evaluate(ctx.code);
await ctx.page.addScriptTag({
path: path.resolve(__dirname, '../../dist/rrweb.umd.cjs'),
});
ctx.events = [];
await ctx.page.exposeFunction('emit', (e: eventWithTime) => {
if (e.type === EventType.DomContentLoaded || e.type === EventType.Load) {
@@ -87,7 +87,7 @@ const setup = function (
};
describe('record webgl', function (this: ISuite) {
jest.setTimeout(100_000);
vi.setConfig({ testTimeout: 100_000 });
const ctx: ISuite = setup.call(
this,
@@ -269,7 +269,7 @@ describe('record webgl', function (this: ISuite) {
});
describe('recordCanvas FPS', function (this: ISuite) {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 10_000 });
const maxFPS = 60;

22
packages/rrweb/test/replay/2d-mutation.test.ts
View File

@@ -1,7 +1,7 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import { vi } from 'vitest';
import { polyfillWebGLGlobals } from '../utils';
polyfillWebGLGlobals();
@@ -11,12 +11,12 @@ import type { Replayer } from '../../src/replay';
let canvas: HTMLCanvasElement;
describe('canvas2DMutation', () => {
beforeEach(() => {
jest.useFakeTimers();
vi.useFakeTimers();
canvas = document.createElement('canvas');
});
afterEach(() => {
jest.clearAllMocks();
jest.useRealTimers();
vi.clearAllMocks();
vi.useRealTimers();
});
it('should execute all mutations after args are parsed', async () => {
@@ -25,14 +25,14 @@ describe('canvas2DMutation', () => {
resolve = r;
});
const context = {
clearRect: jest.fn(),
drawImage: jest.fn(),
clearRect: vi.fn(),
drawImage: vi.fn(),
} as unknown as CanvasRenderingContext2D;
jest.spyOn(canvas, 'getContext').mockImplementation(() => {
vi.spyOn(canvas, 'getContext').mockImplementation(() => {
return context;
});
const createImageBitmapMock = jest.fn(() => {
const createImageBitmapMock = vi.fn(() => {
return new Promise((r) => {
setTimeout(r, 1000);
});
@@ -64,14 +64,14 @@ describe('canvas2DMutation', () => {
errorHandler: () => {},
});
await jest.advanceTimersByTimeAsync(100);
await vi.advanceTimersByTimeAsync(100);
await expect(createImageBitmapMock).toHaveBeenCalled();
expect(context.clearRect).not.toBeCalled();
expect(context.drawImage).not.toBeCalled();
await jest.advanceTimersByTimeAsync(1000);
await vi.advanceTimersByTimeAsync(1000);
await mutation;

0
packages/rrweb/test/replay/__image_snapshots__/hover-test-ts-replayer-hover-should-trigger-hover-on-mouse-down-1-snap.png → packages/rrweb/test/replay/__image_snapshots__/hover-test-ts-test-replay-hover-test-ts-replayer-hover-should-trigger-hover-on-mouse-down-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

0
packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png → packages/rrweb/test/replay/__image_snapshots__/video-test-ts-test-replay-video-test-ts-video-will-be-paused-when-the-player-wasnt-started-yet-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

0
packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-play-from-the-correct-moment-1-snap.png → packages/rrweb/test/replay/__image_snapshots__/video-test-ts-test-replay-video-test-ts-video-will-play-from-the-correct-moment-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

0
packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png → packages/rrweb/test/replay/__image_snapshots__/video-test-ts-test-replay-video-test-ts-video-will-seek-to-the-correct-moment-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

0
packages/rrweb/test/replay/__image_snapshots__/video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png → packages/rrweb/test/replay/__image_snapshots__/video-test-ts-test-replay-video-test-ts-video-will-seek-to-the-correct-moment-without-media-interaction-events-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 151 KiB

After

Width:  |  Height:  |  Size: 151 KiB

0
packages/rrweb/test/replay/__image_snapshots__/webgl-test-ts-replayer-webgl-should-output-simple-webgl-object-1-snap.png → packages/rrweb/test/replay/__image_snapshots__/webgl-test-ts-test-replay-webgl-test-ts-replayer-webgl-should-output-simple-webgl-object-1-snap.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

2
packages/rrweb/test/replay/deserialize-args.test.ts
View File

@@ -1,5 +1,5 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import { deserializeArg } from '../../src/replay/canvas/deserialize-args';

6
packages/rrweb/test/replay/hover.test.ts
View File

@@ -1,5 +1,6 @@
import * as fs from 'fs';
import * as path from 'path';
import { vi } from 'vitest';
import { launchPuppeteer, waitForRAF } from '../utils';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import type * as puppeteer from 'puppeteer';
@@ -15,7 +16,7 @@ interface ISuite {
expect.extend({ toMatchImageSnapshot });
describe('replayer', function () {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 20_000, hookTimeout: 30_000 });
let code: ISuite['code'];
let styles: ISuite['styles'];
@@ -25,7 +26,7 @@ describe('replayer', function () {
beforeAll(async () => {
browser = await launchPuppeteer({ devtools: true });
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
const stylePath = path.resolve(
__dirname,
'../../src/replay/styles/style.css',
@@ -63,6 +64,7 @@ describe('replayer', function () {
`);
await waitForRAF(page);
await waitForRAF(page);
const image = await page.screenshot();
expect(image).toMatchImageSnapshot({

2
packages/rrweb/test/replay/preload-all-images.test.ts
View File

@@ -1,5 +1,5 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import { polyfillWebGLGlobals } from '../utils';
polyfillWebGLGlobals();

5
packages/rrweb/test/replay/video.test.ts
View File

@@ -11,12 +11,13 @@ import {
fakeGoto,
} from '../utils';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import { vi } from 'vitest';
import videoPlaybackEvents from '../events/video-playback';
import videoPlaybackOnFullSnapshotEvents from '../events/video-playback-on-full-snapshot';
expect.extend({ toMatchImageSnapshot });
describe('video', () => {
jest.setTimeout(100_000);
vi.setConfig({ testTimeout: 100_000 });
let code: ISuite['code'];
let page: ISuite['page'];
let browser: ISuite['browser'];
@@ -28,7 +29,7 @@ describe('video', () => {
serverURL = getServerURL(server);
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.umd.cjs');
code = fs.readFileSync(bundlePath, 'utf8');
});

10
packages/rrweb/test/replay/webgl-mutation.test.ts
View File

@@ -1,7 +1,7 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import { vi } from 'vitest';
import { polyfillWebGLGlobals } from '../utils';
polyfillWebGLGlobals();
@@ -15,17 +15,17 @@ describe('webglMutation', () => {
canvas = document.createElement('canvas');
});
afterEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
it('should create webgl variables', async () => {
const createShaderMock = jest.fn().mockImplementation(() => {
const createShaderMock = vi.fn().mockImplementation(() => {
return new WebGLShader();
});
const context = {
createShader: createShaderMock,
} as unknown as WebGLRenderingContext;
jest.spyOn(canvas, 'getContext').mockImplementation(() => {
vi.spyOn(canvas, 'getContext').mockImplementation(() => {
return context;
});

12
packages/rrweb/test/replay/webgl.test.ts
View File

@@ -1,12 +1,12 @@
import * as fs from 'fs';
import * as path from 'path';
import { vi } from 'vitest';
import { launchPuppeteer } from '../utils';
import { toMatchImageSnapshot } from 'jest-image-snapshot';
import type * as puppeteer from 'puppeteer';
import events from '../events/webgl';
interface ISuite {
code: string;
browser: puppeteer.Browser;
page: puppeteer.Page;
}
@@ -14,17 +14,13 @@ interface ISuite {
expect.extend({ toMatchImageSnapshot });
describe('replayer', function () {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 10_000 });
let code: ISuite['code'];
let browser: ISuite['browser'];
let page: ISuite['page'];
beforeAll(async () => {
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../../dist/rrweb.js');
code = fs.readFileSync(bundlePath, 'utf8');
});
beforeEach(async () => {
@@ -35,7 +31,9 @@ describe('replayer', function () {
await page.addStyleTag({
content: '.replayer-mouse-tail{display: none !important;}',
});
await page.evaluate(code);
await page.addScriptTag({
path: path.resolve(__dirname, '../../dist/rrweb.umd.cjs'),
});
await page.evaluate(`let events = ${JSON.stringify(events)}`);
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

11
packages/rrweb/test/replayer.test.ts
View File

@@ -1,6 +1,7 @@
import * as fs from 'fs';
import * as path from 'path';
import type * as puppeteer from 'puppeteer';
import { vi } from 'vitest';
import 'construct-style-sheets-polyfill';
import {
assertDomSnapshot,
@@ -37,7 +38,7 @@ type IWindow = Window &
typeof globalThis & { rrweb: typeof import('../src'); events: typeof events };
describe('replayer', function () {
jest.setTimeout(10_000);
vi.setConfig({ testTimeout: 10_000 });
let code: ISuite['code'];
let browser: ISuite['browser'];
@@ -46,7 +47,7 @@ describe('replayer', function () {
beforeAll(async () => {
browser = await launchPuppeteer();
const bundlePath = path.resolve(__dirname, '../dist/rrweb.js');
const bundlePath = path.resolve(__dirname, '../dist/rrweb.umd.cjs');
code = fs.readFileSync(bundlePath, 'utf8');
});
@@ -580,7 +581,7 @@ describe('replayer', function () {
expect(iframeTwoDocument).not.toBeNull();
expect((await iframeTwoDocument!.$$('iframe')).length).toEqual(2);
expect((await iframeTwoDocument!.$$('style')).length).toBe(1);
let iframeThreeDocument = await (
const iframeThreeDocument = await (
await iframeTwoDocument!.$$('iframe')
)[0]!.contentFrame();
let iframeFourDocument = await (
@@ -1048,9 +1049,9 @@ describe('replayer', function () {
await page.evaluate(
`events = ${JSON.stringify(documentReplacementEvents)}`,
);
const warningThrown = jest.fn();
const warningThrown = vi.fn();
page.on('console', warningThrown);
const errorThrown = jest.fn();
const errorThrown = vi.fn();
page.on('pageerror', errorThrown);
await page.evaluate(`
const { Replayer } = rrweb;

193
packages/rrweb/test/rrdom.test.ts Normal file
View File

@@ -0,0 +1,193 @@
/**
* @vitest-environment jsdom
*/
import { EventType, IncrementalSource, Replayer, eventWithTime } from '../src';
import { vi, type MockInstance } from 'vitest';
import type { styleDeclarationData, styleSheetRuleData } from '@rrweb/types';
import { createMirror, Mirror as NodeMirror } from 'rrweb-snapshot';
import type { ReplayerHandler } from 'rrdom';
describe('diff algorithm for rrdom', () => {
let mirror: NodeMirror;
let replayer: ReplayerHandler;
let warn: MockInstance;
beforeEach(() => {
mirror = createMirror();
replayer = {
mirror,
applyCanvas: () => {},
applyInput: () => {},
applyScroll: () => {},
applyStyleSheetMutation: () => {},
afterAppend: () => {},
};
document.write('<!DOCTYPE html><html><head></head><body></body></html>');
// Mock the original console.warn function to make the test fail once console.warn is called.
warn = vi.spyOn(console, 'warn');
});
afterEach(() => {
// Check that warn was not called (fail on warning)
expect(warn).not.toBeCalled();
warn.mockRestore();
});
describe('apply virtual style rules to node', () => {
beforeEach(() => {
const dummyReplayer = new Replayer([
{
type: EventType.DomContentLoaded,
timestamp: 0,
},
{
type: EventType.Meta,
data: {
with: 1920,
height: 1080,
},
timestamp: 0,
},
] as unknown as eventWithTime[]);
replayer.applyStyleSheetMutation = (
data: styleDeclarationData | styleSheetRuleData,
styleSheet: CSSStyleSheet,
) => {
if (data.source === IncrementalSource.StyleSheetRule)
// Disable the ts check here because these two functions are private methods.
// @ts-ignore
dummyReplayer.applyStyleSheetRule(data, styleSheet);
else if (data.source === IncrementalSource.StyleDeclaration)
// @ts-ignore
dummyReplayer.applyStyleDeclaration(data, styleSheet);
};
});
it('should insert rule at index 0 in empty sheet', () => {
document.write('<style></style>');
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
});
it('should insert rule at index 0 and keep exsisting rules', () => {
document.write(`
<style>
a {color: blue}
div {color: black}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(3);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual(cssText);
});
it('should delete rule at index 0', () => {
document.write(`
<style>
a {color: blue;}
div {color: black;}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
removes: [
{
index: 0,
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(styleEl.sheet?.cssRules?.length).toEqual(1);
expect(styleEl.sheet?.cssRules[0].cssText).toEqual('div {color: black;}');
});
it('should insert rule at index [0,0] and keep existing rules', () => {
document.write(`
<style>
@media {
a {color: blue}
div {color: black}
}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const cssText = '.added-rule {border: 1px solid yellow;}';
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
adds: [
{
rule: cssText,
index: [0, 0],
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).toEqual(3);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).toEqual(cssText);
});
it('should delete rule at index [0,1]', () => {
document.write(`
<style>
@media {
a {color: blue;}
div {color: black;}
}
</style>
`);
const styleEl = document.getElementsByTagName('style')[0];
const styleRuleData: styleSheetRuleData = {
source: IncrementalSource.StyleSheetRule,
removes: [
{
index: [0, 1],
},
],
};
replayer.applyStyleSheetMutation(styleRuleData, styleEl.sheet!);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules?.length,
).toEqual(1);
expect(
(styleEl.sheet?.cssRules[0] as CSSMediaRule).cssRules[0].cssText,
).toEqual('a {color: blue;}');
});
});
});

2
packages/rrweb/test/util.test.ts
View File

@@ -1,5 +1,5 @@
/**
* @jest-environment jsdom
* @vitest-environment jsdom
*/
import {
getRootShadowHost,

8
packages/rrweb/test/utils.ts
View File

@@ -44,7 +44,7 @@ export interface ISuite {
events: eventWithTime[];
}
export const startServer = (defaultPort: number = 3030) =>
export const startServer = (defaultPort = 3030) =>
new Promise<http.Server>((resolve) => {
const mimeType: IMimeType = {
'.html': 'text/html',
@@ -59,8 +59,8 @@ export const startServer = (defaultPort: number = 3030) =>
.replace(/^(\.\.[\/\\])+/, '');
let pathname = path.join(__dirname, sanitizePath);
if (/^\/rrweb.*\.js.*/.test(sanitizePath)) {
pathname = path.join(__dirname, `../dist`, sanitizePath);
if (/^\/rrweb.*\.c?js.*/.test(sanitizePath)) {
pathname = path.join(__dirname, `../dist/main`, sanitizePath);
}
try {
@@ -105,7 +105,7 @@ export function getServerURL(server: http.Server): string {
* Also remove timestamp from event.
* @param snapshots incrementalSnapshotEvent[]
*/
function stringifySnapshots(snapshots: eventWithTime[]): string {
export function stringifySnapshots(snapshots: eventWithTime[]): string {
return JSON.stringify(
snapshots
.filter((s) => {

44
packages/rrweb/tsconfig.json
View File

@@ -1,22 +1,27 @@
{
"extends": "../../tsconfig.base.json",
"include": ["src"],
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Node",
"target": "ES6",
"noImplicitAny": true,
"strictNullChecks": true,
"removeComments": true,
"preserveConstEnums": true,
"rootDir": "src",
"outDir": "build",
"lib": [
"es6",
"dom"
"tsBuildInfoFile": "./tsconfig.tsbuildinfo",
"types": [
// from tsconfig.base.json
"vite/client",
"@types/dom-mediacapture-transform",
"@types/offscreencanvas",
// rrweb specific:
/*
* @see https://vitest.dev/config/#globals
* if we remove the --globals flag from the vite test command, we can remove this
* to remove the flag, we need to add vitest imports in the test files
*/
"vitest/globals"
],
"downlevelIteration": true,
"importsNotUsedAsValues": "error",
"strictBindCallApply": true,
"composite": true
// TODO: enable me in the future, this is quite a large project
// at time of writing (April 2024) there are over 100 errors in rrweb
"strict": false
},
"references": [
{
@@ -28,14 +33,5 @@
{
"path": "../rrweb-snapshot"
}
],
"exclude": [
"test",
"scripts"
],
"include": [
"src",
"node_modules/@types/css-font-loading-module/index.d.ts",
"node_modules/@types/jest-image-snapshot/index.d.ts"
]
}

12
packages/rrweb/vite.config.entries.js Normal file
View File

@@ -0,0 +1,12 @@
import config from '../../vite.config.default';
export default config(
{
// rrweb: 'src/index.ts',
'rrweb-record': 'src/entries/record.ts',
'rrweb-replay': 'src/entries/replay.ts',
},
'rrweb',
// { outputDir: 'dist/alt' },
{ outputDir: 'dist' },
);

4
packages/rrweb/vite.config.js Normal file
View File

@@ -0,0 +1,4 @@
import config from '../../vite.config.default';
// export default config('src/index.ts', 'rrweb', { outputDir: 'dist/main' });
export default config('src/index.ts', 'rrweb');

12
packages/rrweb/vitest.config.ts Normal file
View File

@@ -0,0 +1,12 @@
/// <reference types="vitest" />
import { defineProject, mergeConfig } from 'vitest/config';
import configShared from '../../vitest.config';
export default mergeConfig(
configShared,
defineProject({
test: {
globals: true,
},
}),
);