585c5c7ac3
* 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>
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. 📚
📺 Presentation: Hacking the browser to digital twin your users 📺
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. Add test cases in order to avoid future regression. - If tests are failing, but the change in output is desirable, run
yarn test:updateand carefully commit the changes in test output. - 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.
Sponsors
Become a sponsor and get your logo on our README on Github with a link to your site.
Gold Sponsors 🥇
Silver Sponsors 🥈
Bronze Sponsors 🥉
Backers
Core Team Members
Yuyz0112 |
Yun Feng |
eoghanmurray |
Juice10 open for rrweb consulting |
Who's using rrweb?
|
|
|
|
|
|
|
|
|
|
|
|