3809060684
* test(recording side): add test case for adopted stylesheets in shadow doms and iframe * add type definition for adopted StyleSheets * create a StyleSheet Mirror * enable to record the outermost document's adoptedStyleSheet * enable to serialize all stylesheets in documents (iframe) and shadow roots * enable to record adopted stylesheets while building full snapshot * test: add test case for mutations on adoptedStyleSheets * defer to record adoptedStyleSheets to avoid create events before full snapshot * feat: enable to track the mutation of AdoptedStyleSheets * Merge branch 'fix-shadowdom-record' into construct-style * fix: incorrect id conditional judgement * test: add a test case for replaying side * tweak the style mirror for replayer * feat: enable to replay adoptedStyleSheet events * fix: rule index wasn't recorded when serializing the adoptedStyleSheets * add test case for mutation of stylesheet objects and add support for replace & replaceSync * refactor: improve the code quality * feat: monkey patch adoptedStyleSheet API to track its modification * feat: add support for checkouting fullsnapshot * CI: fix failed type checks * test: add test case for nested shadow doms and iframe elements * feat: add support for adoptedStyleSheets in VirtualDom mode * style: format files * test: improve the robustness of the test case * CI: fix an eslint error * test: improve the robustness of the test case * fix: adoptedStyleSheets not applied in fast-forward mode (virtual dom optimization not used) * refactor the data structure of adoptedStyleSheet event to make it more efficient and robust * improve the robustness in the live mode In the live mode where events are transferred over network without strict order guarantee, some newer events are applied before some old events and adopted stylesheets may haven't been created. Added a retry mechanism to solve this problem. * apply Yanzhen's review suggestion * update action name * test: make the test case more robust for travis CI * Update packages/rrweb/src/record/constructableStyleSheets.d.ts Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> * Update packages/rrweb/src/record/constructableStyleSheets.d.ts Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> * apply Justin's review suggestions add more browser compatibility checks * add eslint-plugin-compat and config * fix record test type errors * make Mirror's replace function act the same with the original one when there's no existed node to replace * test: increase the robustness of test cases * remove eslint disable in favor of feature detection Early returns aren't supported yet unfortunately, otherwise this code would be cleaner https://github.com/amilajack/eslint-plugin-compat/issues/523 * Remove eslint-disable-next-line compat/compat * Standardize browserslist and remove lint exceptions (#1010) * test: revert deleting virtual style tests and rewrite them to fit the current code base Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>
rrweb
The rrweb documentary (in Chinese, with English subtitles)
I have joined Github Sponsors and highly appreciate your sponsorship.
rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.
Guide
📚 Read the rrweb guide here. 📚
Project Structure
rrweb is mainly composed of 3 parts:
- rrweb-snapshot, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
- rrweb, including two functions, record and replay. The record function is used to record all the mutations in the DOM; the replay is to replay the recorded mutations one by one according to the corresponding timestamp.
- rrweb-player, is a player UI for rrweb, providing GUI-based functions like pause, fast-forward, drag and drop to play at any time.
Roadmap
- rrdom: an ad-hoc DOM for rrweb session data #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
- fetch plugin
- GraphQL plugin
- ...
Internal Design
Contribute Guide
Since we want the record and replay sides to share a strongly typed data structure, rrweb is developed with typescript which provides stronger type support.
- Fork this repository.
- Run
yarn installin the root to install required dependencies for all sub-packages (note:npm installis not recommended). - Run
yarn devin the root to get auto-building for all the sub-packages whenever you modify anything. - Navigate to one of the sub-packages (in the
packagesfolder) where you'd like to make a change. - Patch the code and run
yarn testto run the tests, make sure they pass before you commit anything. - Push the code and create a pull request.
Protip: You can run yarn test in the root folder to run all the tests.
In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.
Core Team Members
Yuyz0112 |
Mark-Fenng |
eoghanmurray |
Juice10 |
Who's using rrweb
|
|
|
|
|
|