ab9fed0c7e
* Add very basic webgl support * document the default * only capture rr_dataURL in 2d canvas contexts * rr_dataURL no longer part of webgl snapshot * ignore __diff_output__ from jest-image-snapshot * Rename generic "Monorepo" to "RRWeb Monorepo" * Serialize WebGL variables * Move rrweb test port number to unique port rrweb-snapshot uses 3030, rrweb uses 3031 * Prepare for WebGL2 * Split up canvas replay and record webgl vars * fix typo * fix typo part 2 * fix typo * Handle non-variables too * provide correct context for warning * (De)Serialize a lot of different objects * monorepo root should be the first in the list * Upgrade puppeteer to 11.x * Correctly de-serialize webgl variables * Encode arrayBuffers contents to base64 * rename contents to base64 * add webgl2 support and serialize HTMLImageElements * Support serializing ImageData * Correctly classify WebGL2 events * Serialize format changed * check if canvas has contents before we save the dataURL * Remove blank dataURL * reference original file not type defintion file * update types * rename code worspace * update dependencies * add spector to inspect webgl * remove live server settings from code workspace * Save canvas context in the node Prevents from saving webgl canvases as 2d dataUrls * remove extra braces * add ICanvas type * use ICanvas from rrweb-snapshot in rrweb instead of OgmentedCanvas * add snapshots and webgl 2 tests * Upgrade to puppeteer 12.0.1 * Revert back to puppeteer 9.1.1 * Keep index order consistent between replay and record * keep correct index order in webgl2 * fixed forgotten import * buffer up pending canvas mutations * unify the way webgl and webgl2 get patched * fix parsing error * Add types for serialize-args * Add debugging for webgl replay * Move start-server to utils * turn off debug mode by default * Move pendingCanvasMutations to local object and fix if/else statement * Always save pending mutations * only use assert snapshot as it's clearer whats going on * Ugly fix for now * Making the tests more DRY * flush at the end of each request animation frame * Looks like the promise made this test more predictable * add waitForRAF * Make nested iframe recording robust no matter the test speed * mute noisy error in test * force a requestAnimationFrame * Bundle events within one frame together as much as possible WebGL events need to be bundled together as much as possible so they don't accidentally get split over multiple animation frames. `newFrame: true` is used to indicate the start of an new animation frame in the recording, and that the event shouldn't be bundled with the previous events. * Rename RafStamps * Override event.delay * cleanup * Add tests for addDelay * Add webgl e2e test * Remove settimeout * DRY-up test * Preload images in webgl * Add e2e test for webgl image preloading * don't turn on devtools by default! * Remove spector * close server after use * Add imageMap parameter * Make e2e image test more robust * document debug mode * cleanup * WebGL recording in iframes & Safari 14 support * fix tests * don't save null objects as WebGLVar * group (de)serialized webgl variables by context * Fix test * fix tests * bundle webgl mutations on request animation frame Instead of fixing it on the replay side we buffer up webgl canvas mutations and wait for a new RAF to flush them. This allows us to remove `newFrame` from the events and simplify things a little * Add canvas element to mutation observer file * Add Canvas (Mutation) Manager Allows you to do `record.freezePage()` and canvas events will get paused. Based on https://github.com/rrweb-io/rrweb/pull/756#issuecomment-1007566907 * cleanup * Make sure the correct </body> gets replaced * Perf: Speed up check to see if canvas is blank * Access unpatched getImageData * Use is2DCanvasBlank only for 2d context
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
|
|
|
|
|
|