Commit Graph

55 Commits

Author SHA1 Message Date
Eoghan Murray
3c1989a5f7 Fix missing import after #1705 (#1731)
* Fix missing import after #1705; probably was there before I requested changes
2026-04-01 12:00:00 +08:00
Meg Boehlert
87ff67b978 Use node.baseURI for stringifying stylesheet hrefs (#1705) 2026-04-01 12:00:00 +08:00
Eoghan Murray
241ca72f0e Testing: disable puppeteer/chrome sandbox in Github Actions for Ubuntu 24.04 (#1657)
--disable-setuid-sandbox deemed acceptable by Yun as it's for Github Actions only
2026-04-01 12:00:00 +08:00
Eoghan Murray
636b02780e Fix splitCssText again (#1640)
Fixes a browser 'lock up' at record time due to a presence of large amounts of css in <style> elements, which are split over multiple text nodes, which triggers the new code added in #1437 (see that PR for full explanation of why this all exists).  #1437 was not written with performance in mind as it was believed to be an edge case, but things like Grammarly browser extension (#1603) among other scenarios were triggering pathological behavior, some of which was solved in #1615.
See also https://github.com/rrweb-io/rrweb/pull/1640#issuecomment-2633505804 for further discussion.

* Fix the case when there are multiple matches and we end up not finding a unique one - just go with the best guess when there are many splits by looking at the previous chunk's size
* Also add '0px' -> '0' stylesheet normalization, which also fixes the sample problem in a different way
* Add new test and modify it so that it can trigger a failure in the absence of the '0px' normalization; there may be other unknown ways of triggering a similar bug, so ensure that the primary 'best guess' method doesn't suffer a regression
* Leverage the 'best guess' method so that we can quit after 100 iterations trying to find a unique substring; hopefully this bit along with the `iterLimit` already added will prevent any future pathological cases.

Failing example extracted from large files identified by Paul D'Ambra (Posthog) ... see comment from MartinWorkfully: https://github.com/PostHog/posthog-js/issues/1668
2026-04-01 12:00:00 +08:00
John Henry Gunther
041a2e237f Warn instead of fail on exceptions thrown from postcss (#1580)
* postcss was introduced in #1458 for use within adaptCssForReplay
* #1600 fixes the main case where invalid css could be introduced when if valid css from the output of `sheet.cssRules` was split according to how it was split across text nodes of the <style>
* the guard introduced here is still useful as we likely in future will switch to capturing the raw stylesheet contents (both <style> and <link>), at which point we will be much less confident of getting valid css
2026-04-01 12:00:00 +08:00
Eoghan Murray
ea3c555b49 Fix adapt css with split (#1600)
Fix for #1575 where postcss was raising an exception

* adapt the entire CSS as a whole in one pass with postcss, rather than adapting each split part separately
* break up the postcss output again and assign to individual text nodes (kind of inverse of splitCssText at record side)
* impose an upper bound of 30 iterations on the substring searches to preempt possible pathological behavior
* add tests to demonstrate the scenario and prevent regression

More technical details:
* Fix algorithm; checks against `ix_end` within loop were incorrect when `ix_start` was bigger than zero.  
* Fix that length check against wrong array was causing 'should record style mutations with multiple child nodes and replay them correctly' test to fail. 
Note on last point: I haven't looked into things more deeply than that the test was complaining about missing .length after `replayer.pause(1000);`
2026-04-01 12:00:00 +08:00
Eoghan Murray
65eb7c80aa Fix performance of splitCssText (#1615)
- Fix bug where the right split point was not being picked for the 3rd section onwards
- Fix that it wasn't able to find a split when both halves were identical
- Add test to put splitCssText through it's paces with a large file
- Introduce a limit on the iteration which causes the 'efficiently' test to fail
- Fix poor 'crawling' performance in the 'matching' algorithm for large css texts - e.g. for a (doubled) benchmark.css, we were running `normalizeCssText` 9480 times before `k` got to the right place
- Further algorithm efficiency: need to take larger jumps; use the scaling factor to make better guess at how big a jump to make
2026-04-01 12:00:00 +08:00
David Newell
8d634cba97 chore: abstract types to shared package (#1593)
* chore: update types

* small typing change

* fix typing issue

* typed node

* add extra lint skip

* add changeset

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Billy Vong
f664e6478b fix(snapshot): dimensions for blocked element not being applied (#1331)
fix for replay of a blocked element when using 'fast forward' (rrdom)

 - Dimensions were not being properly applied when you seek to a position in the replay. Need to use `setProperty` rather than trying to set the width/height directly
2026-04-01 12:00:00 +08:00
Eoghan Murray
2dbfe3b18a Simplify the hover replacement function (#1535)
Simplify the hover replacement function, which has been borrowed from postcss-pseudo-classes

Note: 'parses nested commas in selectors correctly' was failing after this PR, however I don't think that the previous behaviour was desirable, so have added a new test to formalize this expectation
2026-04-01 12:00:00 +08:00
Eoghan Murray
67657a8710 Single style capture (#1437)
Support a contrived/rare case where a <style> element has multiple text node children (this is usually only possible to recreate via javascript append) ... this PR fixes cases where there are subsequent text mutations to these nodes; previously these would have been lost

* In this scenario, a new CSS comment may now be inserted into the captured `_cssText` for a <style> element to show where it should be broken up into text elements upon replay: `/* rr_split */`
* The new 'can record and replay style mutations' test is the principal way to the problematic scenarios, and is a detailed 'catch-all' test with many checks to cover most of the ways things can fail
* There are new tests for splitting/rebuilding the css using the rr_split marker
* The prior 'dynamic stylesheet' route is now the main route for serializing a stylesheet; dynamic stylesheet were missed out in #1533 but that case is now covered with this PR

This PR was originally extracted from #1475 so the  initial motivation was to change the approach on stringifying <style> elements to do so in a single place.  This is also the motivating factor for always serializing <style> elements via the `_cssText` attribute rather than in it's childNodes; in #1475 we will be delaying populating `_cssText` for performance and instead recorrding them as assets.

Thanks for the detailed review to  Justin Halsall <Juice10@users.noreply.github.com> & Yun Feng <https://github.com/YunFeng0817>
2026-04-01 12:00:00 +08:00
Justin Halsall
d4c1440389 Reverse monkey patch built in methods to support LWC (#1509)
* Get around monkey patched Nodes

* inlineImages: Setting of `image.crossOrigin` is not always necessary (#1468)

Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot.  This change allows us to  avoid the mutation of the snapshot for the same-origin case.

* Modify inlineImages test to remove delay and show that we can inline images without mutation

* Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary.  Uses a combination of about:blank and our test server to simulate a cross-origin context

* Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good

* Move `childNodes` to @rrweb/utils

* Use non-monkey patched versions of the `childNodes`, `parentNode` `parentElement` `textContent` accessors

* Add getRootNode and contains, and add comprehensive todo list

* chore: Update turbo.json tasks for better build process

* Update caniuse-lite

* chore: Update eslint-plugin-compat to version 5.0.0

* chore: Bump @rrweb/utils version to 2.0.0-alpha.15

* delete unused yarn.lock files

* Set correct @rrweb/utils version in package.json

* Migrate over some accessors to reverse-monkey-patched version

* Add missing functions

* Fix illegal invocation error

* Revert closer to what it was.

This feels incorrect to me (Justin Halsall), but some of the tests break without it so I'm restoring this to be closer to its original here:
cfd686d488/packages/rrweb-snapshot/src/snapshot.ts (L1011)

* Reverse monkey patch all methods LWC hijacks

* Make tests more stable

* Safely handle rrdom nodes in hasShadowRoot

* Remove duplicated test

* Use variable `serverURL` in test

* Use monorepo default browserlist

* Fix typing issue for new typescript

* Remove unused package

* Remove unused code

* Add prefix to reverse-monkey-patched methods to make them more explicit

* Add default exports to @rrweb/utils

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2026-04-01 12:00:00 +08:00
Justin Halsall
5217a09c60 Support top-layer <dialog> recording & replay (#1503)
* chore: its important to run `yarn build:all` before running `yarn dev`

* feat: trigger showModal from rrdom and rrweb

* feat: Add support for replaying modal and non modal dialog elements

* chore: Update dev script to remove CLEAR_DIST_DIR flag

* Get modal recording and replay working

* DRY up dialog test and dedupe snapshot images

* feat: Refactor dialog test to use updated attribute name

* feat: Update dialog test to include rr_open attribute

* chore: Add npm dependency happy-dom@14.12.0

* Add more test cases for dialog

* Clean up naming

* Refactor dialog open code

* Revert changed code that doesn't do anything

* Add documentation for unimplemented type

* chore: Remove unnecessary comments in dialog.test.ts

* rename rr_open to rr_openMode

* Replace todo with a skipped test

* Add better logging for CI

* Rename rr_openMode to rr_open_mode

rrdom downcases all attribute names which made `rr_openMode` tricky to deal with

* Remove unused images

* Move after iframe append based on @YunFeng0817's comment
https://github.com/rrweb-io/rrweb/pull/1503#discussion_r1666363931

* Remove redundant dialog handling from rrdom.

rrdom already handles dialog element creation it's self

* Rename variables for dialog handling in rrweb replay module

* Update packages/rrdom/src/document.ts

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2026-04-01 12:00:00 +08:00
Jeff Nguyen
c110e1c21d fix: nested stylesheets should have absolute URLs (#1533)
* Replace relative URLs with absolute URLs when stringifying stylesheets

* Add test to show desired behavior for imported stylesheets from seperate directory

* Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet

* Don't create the intermediary array of the spread operator

* Formalize that `stringifyRule` should expect a sheet href

* Ensure a <style> element can also import and gets it's url absolutized

* Handle case where non imported stylesheet has relative urls that need to be absolutified

* Clarify in test files where jpegs are expected to appear in absolutified urls

* Move absolutifyURLs call for import rules out of trycatch

* Add a benchmarking test for stringifyStylesheet

* Avoid the duplication on how to fall back

---------

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
David Newell
83e8dd8ab7 feat: add new css parser - postcss (#1458)
* feat: add new css parser

* make selectors change

* selectors and tests

* media changes

* remove old css references

* better variable name

* use postcss and port tests

* fix media test

* inline plugins

* fix failing multiline selector

* correct test result

* move tests to correct file

* cleanup all tests

* remove unused css-tree

* update bundle

* cleanup dependencies

* revert config files to master

* remove d.ts files

* update snapshot

* reset rebuilt test

* apply fuzzy css matching

* remove extra test

* Fix imports

* Newer versions of nswapi break rrdom-nodejs tests.
Example:
 FAIL  test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll
TypeError: e[api] is not a function
 ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37
 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113
 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32
 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36
 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24

* Migrate from jest to vitest

* Order of selectors has changed with postcss

* Remove unused eslint

---------

Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Justin Halsall
5fd6ea43b4 Fix async assertions in test files (#1510)
* fix: await assertSnapshot in test files for async assertions
2026-04-01 12:00:00 +08:00
Justin Halsall
5a85ddf013 Chore: Migrate build to vite (#1033)
* 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
2026-04-01 12:00:00 +08:00
Alfie Jones
1a8dfcc8aa Removing global document references (#1482)
fix for options `recordCanvas: true`: 
* replace document.createElement with doc.createElement in rrweb-snapshot code
* Eoghan: add a regression test to prevent future accidental use of `document` instead of `doc`.  This test can be excised if a new feature can only be run in the browser and not in the jsdom environment
2026-04-01 12:00:00 +08:00
Eoghan Murray
1b79b5b6c2 inlineImages: Setting of image.crossOrigin is not always necessary (#1468)
Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot.  This change allows us to  avoid the mutation of the snapshot for the same-origin case.

* Modify inlineImages test to remove delay and show that we can inline images without mutation

* Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary.  Uses a combination of about:blank and our test server to simulate a cross-origin context

* Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good
2026-04-01 12:00:00 +08:00
Eoghan Murray
1fd5c2bc00 Fix and test for bug #1457 (#1481)
* Fix and test for bug #1457 (Uncaught SyntaxError: Regular expression too large)

 - see test case which is extracted from a real world css file; the selector regex was able to traverse the curly brace as when looking for quotes, it wasn't taking into account that the start quote could be escaped

* Apply formatting changes

* Create fair-ducks-clean.md

* Fix @import regex bit which was stopping consumption in the middle of a url - need to consume quotes.

Thanks dave.kindel@pendo.io for reporting and isolating this case

---------

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Eoghan Murray
12fcc76e69 Fixup for background-clip replacement (#1476)
* Fix that the `.replace()` function only replaces the first occurrence

* This should have been included in #1174

* Create fast-pets-exist.md
2026-04-01 12:00:00 +08:00
David Newell
28f32140f0 better splitting of selectors (#1440)
* better splitting of selectors - overlapping with #1401 
* Add test from example at https://github.com/PostHog/posthog/pull/21427
* ignore brackets inside selector strings
* Add another test as noticed that it's possible to escape strings
* Ensure we are ignoring commas within strings

Co-authored-by: Eoghan Murray <eoghan@getthere.ie>
2026-04-01 12:00:00 +08:00
Daniel Engelke
7e586f4c90 Fix for test cases mentioned in #1379 (#1401)
* Fix known issues

* Run format

* Fix linting errors

* Add comment in code for source of match logic

* Add changeset
2026-04-01 12:00:00 +08:00
Eoghan Murray
585c5c7ac3 Fix some css issues with :hover and rewrite max-device-width (#1431)
* We weren't recursing into media queries (or @supports etc.) to rewrite hover pseudoclasses

* The early return meant that the stylesWithHoverClass cache wasn't being populated if there were no hover selectors on the stylesheet

 - not committing the test, but modifying the existing 'add a hover class to a previously processed css string' as follows shows the problem:

--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -151,6 +185,7 @@ describe('rebuild', function () {
         path.resolve(__dirname, './css/benchmark.css'),
         'utf8',
       );
+      cssText = cssText.replace(/:hover/g, '');

       const start = process.hrtime();
       addHoverClass(cssText, cache);

* Replace `min-device-width` and similar with `min-width` as the former looks out at the browser viewport whereas we need it to look at the replayer iframe viewport

* Add some tests to show how the hover replacement works against selector lists. I believe these were failing in a previous version of rrweb as I had some local patches that no longer seem to be needed to handle these cases

* Update name of function to reflect that 'addHoverClass' does more than just :hover. I believe this function is only exported for the purposes of use in the tests

* Apply formatting changes

* Create rotten-spies-enjoy.md

* Apply formatting changes

* Add correct typing on `getSelectors`

* Refactor CSS interfaces to include optional rules

* Change `rules` to be non optional

---------

Co-authored-by: eoghanmurray <eoghanmurray@users.noreply.github.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Andrew Pomeroy
8b90bd8f62 Capture stylesheets designated as rel="preload" (#1374)
* feat(Snapshot): Capture stylesheets designated as `rel="preload"`

* fix(Snapshot): Harden asset file extension matching

* Add changeset

* chore: Lint

* Tweak regex, add try-catch block on URL constructor
2026-04-01 12:00:00 +08:00
Eoghan Murray
a8d93986f4 Fix serialization and mutation of <textarea> elements (#1351)
* Fix serialization and mutation of <textarea> elements taking account the duality that the value can be set in either the child node, or in the value _parameter_ (not attribute)

* Backwards compatibility: Bug fix and regression test for #112
 - this is to fix up 'historical' recordings, as duplicate textarea content should no longer be being created at record time
 - new test shows what the snapshot generated by previous versions of rrweb used to look like, hence 'bad'
 - original 0efe23f04a fix either didn't work or no longer works due to childNodes being appended subsequent to this part of the code
 - during review, we also verified that the `_cssText` case should still be handled okay, as there's currently no scenario where csstext is present with css child nodes of a <style>

* Masking: Fix that textarea values were being missed by the masking system if the value was recorded as a child node
 - I didn't notice that form.html was used in other tests, so lucky that I noticed that those tests also should have the 'pre value' masked out

* Simplify by always storing the textarea value in the `.value` attribute (from it's DOM property) and not as a childNode. It should still be rebuilt as a childNode rather than a property
---------

Authored-by: eoghanmurray <eoghan@getthere.ie>
2026-04-01 12:00:00 +08:00
Yun Feng
4157f28e7b Feat: Add support for replaying :defined pseudo-class of custom elements (#1155)
* Feat: Add support for replaying :defined pseudo-class of custom elements

* add isCustom flag to serialized elements

Applying Justin's review suggestion

* fix code lint error

* add custom element event

* fix: tests (#1348)

* Update packages/rrweb/src/record/observer.ts

* Update packages/rrweb/src/record/observer.ts

---------

Co-authored-by: Nafees Nehar <nafees87n@gmail.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Eoghan Murray
816d65ec3f Perf: don't run the regex replace unless the selectorText contains a colon (#1280)
* Perf: don't run the regex replace unless the selectorText contains a colon (rules generally contain colons)

* Need to check type before querying selectorText property - also good as it means we only try to fix colons at the leaf level
---------

Authored-by: eoghan murray <eoghan@getthere.ie>
2026-04-01 12:00:00 +08:00
Justin Halsall
a6812827e0 Add workaround for Chrome/Edge css import escaping bug (#1287)
* Upgrade to typescript 4.9.5

* Apply formatting changes

* Add workaround for chrome incorrect escaping bug

More info: https://bugs.chromium.org/p/chromium/issues/detail?id=1472259

* Apply formatting changes

* Create itchy-dryers-double.md

* Create rich-jars-remember.md

* Apply formatting changes

* Update packages/rrweb-snapshot/src/css.ts

* Apply formatting changes

* Update packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap

* Apply formatting changes

* Update snapshot

* Apply formatting changes

* Rename and refactor fixBrowserCompatibilityIssuesInCSSImports, getCssRulesString and getCssRuleString based on @eoghanmurray feedback

* Apply formatting changes

* Apply formatting changes
2026-04-01 12:00:00 +08:00
Francesco Novy
3cf1b8b450 fix: Fix CSS rules captured in Safari (#1253)
* fix: Fix CSS rules captured in Safari

* Apply formatting changes

* add changeset

* fix

---------

Co-authored-by: mydea <mydea@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
fukang wang
6855705445 fix: inline images onload (#1174)
* fix: inline images onload

* add integration test case

* Apply formatting changes

* Create small-olives-arrive.md

---------

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
2026-04-01 12:00:00 +08:00
Francesco Novy
42c9f53602 feat: Ignore autoplay attribute on video/audio elements (#1152)
* feat: Ignore `autoplay` attribute on video/auto elements

This element leads to weird issues when replaying, so it's better to strip this out.

* add changeset

* fix check


fix typo

* Apply formatting changes

---------

Co-authored-by: mydea <mydea@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Billy Vong
c1e7fe9344 fix: Exclude scripts loaded with rel=modulepreload from snapshots (#1128)
* fix: Exclude `modulepreload` as well

We were only excluding `<link rel="preload" as="script" />` but we should include `rel="modulepreload"` as well

* Apply formatting changes
2026-04-01 12:00:00 +08:00
Yun Feng
c6e9b724d0 fix duplicated shadow dom (#1095)
* fix: duplicated elements in shadow doms

clean observers before taking new full snapshots

* add checker for replayer to make it stable when data has duplicated nodes

* apply review suggestions

* add change log

* Apply formatting changes

* update prettier to fit the master branch

---------

Co-authored-by: Mark-Fenng <Mark-Fenng@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Justin Halsall
27caffecff Automate NPM package releases (#1119) 2026-04-01 12:00:00 +08:00
Justin Halsall
236d7a3f3c Fix: shadow dom bugs (#1049)
* Add test cases for bugs

* Fix shadow dom recording

When moving an element containing shadow dom
When adding an element to shadow dom before its attached to the dom

* Apply formatting changes

* Refactor in dom checking code

* Nodes don't get processed in more than one mutation buffer

* Constrain node mutations to one mutation buffer per request animation frame

* Make tests less flaky under heavy load

* Apply suggestions from code review

* Update packages/rrweb-snapshot/test/rebuild.test.ts

* Remove unused nodeSet

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
2026-04-01 12:00:00 +08:00
Justin Halsall
6e06fd2536 Chore: Make tests less flakey & upgrade puppeteer to rrweb-snapshot test suite to run (#1084)
* Upgrade puppeteer to 17.1.3 in rrweb-snapshot

* Apply formatting changes

* Add ?

* Make tests less flakey

* Make attribute-setting more explicit

* Make test less flakey

* Make test less flakey

* Upgrade puppeteer for rrdom

* Use wait for request animation frame instead of timeout

* Force append to happen in second event

* Wait till iframe was loaded (now 100ms)

* Round the currentTime to 1 decimal place
2026-04-01 12:00:00 +08:00
Justin Halsall
c6ec00b52f Fix: Capture css background-clip: text with browser prefix (#1047) 2026-04-01 12:00:00 +08:00
Justin Halsall
65ff0efefd bugfix: Sort attributes to make rr_* attributes handled last (#970)
* Sort attributes to make `rr_*` attributes handled last

`rr_dataURL` overwrites `src` attribute, because of this we need to evaluate `rr_dataURL` last so it doesn't accidentally get overwritten again.

* Update packages/rrweb-snapshot/src/rebuild.ts

* Refactor handling of rr_* attributes

Be a little more strict when it comes attribute types
2026-04-01 12:00:00 +08:00
Justin Halsall
7247bc21e3 [Plugin] Live stream canvas via webrtc (#976)
* inline stylesheets when loaded

* set empty link elements to loaded by default

* Clean up stylesheet manager

* Remove attribute mutation code

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/scripts/repl.js

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/src/record/index.ts

* Add todo

* Move require out of time sensitive assert

* Add waitForRAF, its more reliable than waitForTimeout

* Remove flaky tests

* Add recording stylesheets in iframes

* Remove variability from flaky test

* Make test more robust

* Fix naming

* Add test cases for inlineImages

* Add test cases for inlineImages

* Record iframe mutations cross page

* Test: should record images inside iframe with blob url after iframe was reloaded

* Handle negative ids in rrdom correctly

When iframes get inserted they create untracked elements, both on the dom and rrdom side.
Because they are untracked they generate negative numbers when fetching the id from mirror.
This creates a problem when comparing and fetching ids across mirrors.
This commit tries to get away from using negative ids as much as possible in rrdom's comparisons

* Update packages/rrdom/src/diff.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Start unserialized nodes at -2

This way we don't accidentally think of them as mirror misses

* Set unserialized id starting number at -2

* Remove duplication

* Use turbo instead of lerna

* Skip benchmark as it is unreliable when executed in parallel

* Strip port number from serialization, it can vary

* Add settimeout to virtual dom test

* Remove console.log and refactor blob:url serialization

* Include references in tsconfig to indicate which monorepo packages are being used

* Add stream setup

* Migrate project to es module

* Add reference to rrweb from rrdom

* Move jest config to ESM

* Setup basic WebRTC canvas streaming

* Cleanup and refactor WebRTC streaming

* Remove ? which isn't propper javascript

* Yarn lock

* Remove webrtc code from rrweb

* Add plugin hooks

Record/Replay plugins
`.getMirror` exposes the mirror to plugins

Replay plugins
`.onBuild` called whenever a node was added to the dom

* Expose plugins with server

* Use unminified version for tests

* Don't include simple-peer in rrweb main project

* Add canvas webrtc plugin

Streams contents of canvas via webrtc

* ignore tsconfig.tsbuildinfo

* Cleanup unused code

* type definition files are no longer committed

* Devtools off by default

* Extract .css into its own file

* Refactor plugin apis and fix multi canvas streaming support

* Add readme to rrweb canvas webrtc plugin

* Reference canvas-webrtc plugin in documentation

* Forbidden non-null assertion

* Remove linting of each project, yarn lint:report will do this

* Remove test code

* Cut down line length

* fix CI failure and improve the zh_CN doc

* Update packages/rrweb/src/plugins/canvas-webrtc/replay/index.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Cleaner styling of replay

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Clean up stream.js based on @Mark-Fenng's feedback

* Remove duplicate send

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
2026-04-01 12:00:00 +08:00
Justin Halsall
f07682ea8b Handle negative ids in rrdom correctly + extra tests (#927)
* inline stylesheets when loaded

* set empty link elements to loaded by default

* Clean up stylesheet manager

* Remove attribute mutation code

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/scripts/repl.js

* Update packages/rrweb/test/record.test.ts

* Update packages/rrweb/src/record/index.ts

* Add todo

* Move require out of time sensitive assert

* Add waitForRAF, its more reliable than waitForTimeout

* Remove flaky tests

* Add recording stylesheets in iframes

* Remove variability from flaky test

* Make test more robust

* Fix naming

* Add test cases for inlineImages

* Add test cases for inlineImages

* Record iframe mutations cross page

* Test: should record images inside iframe with blob url after iframe was reloaded

* Handle negative ids in rrdom correctly

When iframes get inserted they create untracked elements, both on the dom and rrdom side.
Because they are untracked they generate negative numbers when fetching the id from mirror.
This creates a problem when comparing and fetching ids across mirrors.
This commit tries to get away from using negative ids as much as possible in rrdom's comparisons

* Update packages/rrdom/src/diff.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Start unserialized nodes at -2

This way we don't accidentally think of them as mirror misses

* Set unserialized id starting number at -2

* Remove duplication

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
2026-04-01 12:00:00 +08:00
Yun Feng
5c1c104073 style: remove all tslint related comments (#934) 2026-04-01 12:00:00 +08:00
yz-yu
d9f6709e78 unify typescript version and rollup plugins (#921) 2026-04-01 12:00:00 +08:00
Justin Halsall
65338aaf11 Speed up snapshotting of many new dom nodes (#903)
* Speed up snapshotting of many new dom nodes

By avoiding reflow we shave about 15-25% off our snapshotting time

* Improve newlyAddedElement docs

* Optimize needMaskingText by using el.closest and less recursion

* Serve all rrweb dist files

* Split serializeNode into smaller functions

Makes it easier to profile

* Slow down cpu enhance tracing on fast machines

* Increase timeout

* Perf: only loop through ancestors when they have something to compare to

* Perf: `hasNode` is cheaper than `getMeta`

* Perf: If parents where already checked, no need to do it again

* Perf: reverse for loops are faster

Because they only do the .lenght check once. In this case I don't think we'll see much performance gains if any

* Clean up code

* Perf: check ancestors once with isBlocked

* guessing this might fixes canvas test

* Update packages/rrweb/src/record/observers/canvas/webgl.ts

Co-authored-by: yz-yu <yanzhen@smartx.com>

* Fix #904 (#906)

Properly remove crossorigin attribute

* Bump minimist from 1.2.5 to 1.2.6 (#902)

Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6.
- [Release notes](https://github.com/substack/minimist/releases)
- [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6)

---
updated-dependencies:
- dependency-name: minimist
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Co-authored-by: yz-yu <yanzhen@smartx.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-04-01 12:00:00 +08:00
Justin Halsall
d4f5d8dc48 Remove INode (node.__sn) and use Mirror as source of truth (#868)
* Move ids to weakmap

* Fix typo

* Move from INode to storing serialized data in mirror

* Update packages/rrweb-snapshot/src/rebuild.ts

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>

* Remove unnessisary `as Node` typecastings

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842240758

* Remove unnessisary `as unknown as ...`

* Remove unnessisary `as unknown as ...`

* Reset mirror when recording starts

Solves: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842249599

* API has changed for snapshot, change test to reflect that

* Allow for es5 compatibility

* Remove unnessisary as unknown as ... and change test to reflect the API change

* Refactor mirror to remove `nodeIdMap`

Fixes: https://github.com/rrweb-io/rrweb/pull/868#discussion_r842732696

Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
2026-04-01 12:00:00 +08:00
Justin Halsall
ffc9185fa8 Don't serialize all cssRules if multiple text nodes exists (#866) 2026-04-01 12:00:00 +08:00
Cristi Constantin
4c06535309 Decrease embedded img size for inlineImages (#836)
* Decrease embedded img size for inlineImages

* Fix the test

* Use webp for image snapshots

* Implemented optional param dataURLOptions
2026-04-01 12:00:00 +08:00
Yun Feng
0153270680 improve robustness of inlineImages feature (#812)
* fix: add inlineImages option to rrrweb recorder and try to make the code more robust

* Improve robustness
2026-04-01 12:00:00 +08:00
Cristi Constantin
151debad4a Save images offline, in the snapshot (#770)
* Implemented image restore from rr_dataURL

* Implement saving images in the snapshot

* Fixed image saving, added a test

* Rename data-src to data-rrweb-src

* Updated the guide

* Rename recordImages to inlineImages and try catch
2026-04-01 12:00:00 +08:00
Yanzhen Yu
bcf42a7ff0 update test snapshots 2026-04-01 12:00:00 +08:00