2887c8c7e5
* rrdom: add a diff function for properties * implement diffChildren function and unit tests * finish basic functions of diff algorithm * fix several bugs in the diff algorithm * replace the virtual parent optimization in applyMutation() * fix: moveAndHover after the diff algorithm is executed * replace virtual style map with rrdom cssom version has to be above 0.5.0 to pass virtual style tests * fix: failed virtual style tests in replayer.test.ts * fix: failed polyfill tests caused by nodejs compatibility of different versions * fix: svg viewBox attribute doesn't work Cause the attribute viewBox is case sensitive, set value for viewbox doesn't work * feat: replace treeIndex optimization with rrdom * fix bug of diffProps and disable smooth scrolling animation in fast-forward mode * feat: add iframe support * fix: @rollup/plugin-typescript build errors in rrweb-player Error: @rollup/plugin-typescript TS1371: This import is never used as a value and must use 'import type' because the 'importsNotUsedAsValues' is set to 'error' * fix: bug when fast-forward input events and add test for it * add test for fast-forward scroll events * fix: custom style rules don't get inserted into some iframe elements * code style tweak * fix: enable to diff iframe elements * fix the jest error "Unexpected token 'export'" * try to fix build error of rrweb-player * correct the attributes definition in rrdom * fix: custom style rules are not inserted in some iframes * add support for shadow dom * add support for MediaInteraction * add canvas support * fix unit test error in rrdom * add support for Text, Comment * try to refactor RRDom * refactor RRDom to reduce duplicate code * rename document-browser to virtual-dom * increase the test coverage for document.ts and add ownerDocument for it * Merge branch 'master' into virtual-dom * add more test for virtual-dom.ts * use cssstyle in document-nodejs * fix: bundle error * improve document-nodejs * enable to diff scroll positions of an element * rename rrdom to virtualDom for more readability and make the tree public * revert unknown change * improve the css style parser for comments * improve code style * update typings * add handling for the case where legacy_missingNodeRetryMap is not empty * only import types from rrweb into rrdom * Apply suggestions from code review Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> * Apply suggestions from code review * fix building error in rrweb * add a method setDefaultSN to set a default value for a RRNode's __sn * fix rrweb test error and bump up other packages * add support for custom property of css styles * add a switch for virtual-dom optimization * Apply suggestions from code review 1. add an enum type for NodeType 2. rename nodeType from rrweb-snapshot to RRNodeType 3. rename notSerializedId to unserializedId 4. add comments for some confusing variables * adapt changes of #865 to virtual-dom and improve the test case for more coverage * apply review suggestions https://github.com/rrweb-io/rrweb/pull/853#pullrequestreview-922474953 * tweak the diff algorithm * add description of the flag useVirtualDom and remove outdated logConfig * Remove console.log * Contain changes to document * Upgrade rollup to 2.70.2 * Revert "Upgrade rollup to 2.70.2" This reverts commit b1be81a2a76565935c9dc391f31beb7f64d25956. * Fix type checking rrdom * Fix typing error while bundling * Fix tslib error on build Rollup would output the following error: `semantic error TS2343: This syntax requires an imported helper named '__spreadArray' which does not exist in 'tslib'. Consider upgrading your version of 'tslib'.` * Increase memory limit for rollup * Use esbuild for bundling Speeds up bundling significantly * Avoid circular dependencies and import un-bundled rrdom * Fix imports * Revert back to pre-esbuild This reverts the following commits: b7b3c8dbaa551a0129da1477136b1baaad28e6e1 72e23b8e27f9030d911358d3a17fe5ad1b3b5d4f 85d600a20c56cfa764cf1f858932ba14e67b1d23 61e1a5d323212ca8fbe0569e0b3062ddd53fc612 * Set node to lts (12 is no longer supported) * Speed up bundling and use less memory This fixes the out of memory errors happening while bundling * remove __sn from rrdom * fix typo * test: add a test case for StyleSheet mutation exceptions while fast-forwarding * rename Array.prototype.slice.call() to Array.from() * improve test cases * fix: PR #887 in 'virtual-dom' branch * apply justin's suggestion on 'Array.from' refactor related commit 0f6729d27a323260b36fbe79485a86715c0bc98a * improve import code structure Co-authored-by: Yun Feng <yun.feng@anu.edu.au>
433 lines
22 KiB
Markdown
433 lines
22 KiB
Markdown
# Guide
|
||
|
||
[中文指南](./guide.zh_CN.md)
|
||
|
||
> You may also want to read the [recipes](./docs/recipes/index.md) to find some use real-world use case, or read the [design docs](./docs) to know more technical details of rrweb.
|
||
|
||
## Installation
|
||
|
||
### Direct `<script>` include
|
||
|
||
You are recommended to install rrweb via jsdelivr's CDN service:
|
||
|
||
```html
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
|
||
/>
|
||
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
|
||
```
|
||
|
||
Also, you can link to a specific version number that you can update manually:
|
||
|
||
```html
|
||
<script src="https://cdn.jsdelivr.net/npm/rrweb@0.7.0/dist/rrweb.min.js"></script>
|
||
```
|
||
|
||
#### Only include the recorder code
|
||
|
||
rrweb's code includes both the record and the replay parts. Most of the time you only need to include the record part into your targeted web Apps.
|
||
This also can be done by using the CDN service:
|
||
|
||
```html
|
||
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>
|
||
```
|
||
|
||
#### Other bundles
|
||
|
||
Besides the `record/rrweb-record.min.js` entry, rrweb also provides other bundles for different usage.
|
||
|
||
```shell
|
||
# Include record, replay, compression, and decompression.
|
||
rrweb-all.js
|
||
rrweb-all.min.js
|
||
# Include record and replay.
|
||
rrweb.js
|
||
rrweb.min.js
|
||
# Include the styles for replay.
|
||
rrweb.min.css
|
||
# Record
|
||
record/rrweb-record.js
|
||
record/rrweb-record.min.js
|
||
# Data compression.
|
||
record/rrweb-record-pack.js
|
||
record/rrweb-record-pack.min.js
|
||
# Replay
|
||
replay/rrweb-replay.js
|
||
replay/rrweb-replay.min.js
|
||
# Data decompression.
|
||
replay/rrweb-replay-unpack.js
|
||
replay/rrweb-replay-unpack.min.js
|
||
```
|
||
|
||
### NPM
|
||
|
||
```shell
|
||
npm install --save rrweb
|
||
```
|
||
|
||
rrweb provides both commonJS and ES modules bundles, which are easy to use with the popular bundlers.
|
||
|
||
### Compatibility Note
|
||
|
||
rrweb does **not** support IE11 and below because it uses the `MutationObserver` API which was supported by [these browsers](https://caniuse.com/#feat=mutationobserver).
|
||
|
||
## Getting Started
|
||
|
||
### Record
|
||
|
||
**If you only included the record code with `<script>`**, then you must use the global variable `rrwebRecord` instead of `rrweb.record`.
|
||
The following sample code will use the variable `rrweb` which is the default exporter of this library.
|
||
|
||
```js
|
||
rrweb.record({
|
||
emit(event) {
|
||
// store the event in any way you like
|
||
},
|
||
});
|
||
```
|
||
|
||
During recording, the recorder will emit when there is some event incurred, all you need to do is to store the emitted events in any way you like.
|
||
|
||
The `record` method returns a function which can be called to stop events from firing:
|
||
|
||
```js
|
||
let stopFn = rrweb.record({
|
||
emit(event) {
|
||
if (events.length > 100) {
|
||
// stop after 100 events
|
||
stopFn();
|
||
}
|
||
},
|
||
});
|
||
```
|
||
|
||
A more real-world usage may look like this:
|
||
|
||
```js
|
||
let events = [];
|
||
|
||
rrweb.record({
|
||
emit(event) {
|
||
// push event into the events array
|
||
events.push(event);
|
||
},
|
||
});
|
||
|
||
// this function will send events to the backend and reset the events array
|
||
function save() {
|
||
const body = JSON.stringify({ events });
|
||
events = [];
|
||
fetch('http://YOUR_BACKEND_API', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body,
|
||
});
|
||
}
|
||
|
||
// save events every 10 seconds
|
||
setInterval(save, 10 * 1000);
|
||
```
|
||
|
||
#### Options
|
||
|
||
The parameter of `rrweb.record` accepts the following options.
|
||
|
||
| key | default | description |
|
||
| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||
| emit | required | the callback function to get emitted events |
|
||
| checkoutEveryNth | - | take a full snapshot after every N events<br />refer to the [checkout](#checkout) chapter |
|
||
| checkoutEveryNms | - | take a full snapshot after every N ms<br />refer to the [checkout](#checkout) chapter |
|
||
| blockClass | 'rr-block' | Use a string or RegExp to configure which elements should be blocked, refer to the [privacy](#privacy) chapter |
|
||
| blockSelector | null | Use a string to configure which selector should be blocked, refer to the [privacy](#privacy) chapter |
|
||
| ignoreClass | 'rr-ignore' | Use a string or RegExp to configure which elements should be ignored, refer to the [privacy](#privacy) chapter |
|
||
| maskTextClass | 'rr-mask' | Use a string or RegExp to configure which elements should be masked, refer to the [privacy](#privacy) chapter |
|
||
| maskTextSelector | null | Use a string to configure which selector should be masked, refer to the [privacy](#privacy) chapter |
|
||
| maskAllInputs | false | mask all input content as \* |
|
||
| maskInputOptions | { password: true } | mask some kinds of input \*<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L77-L95) |
|
||
| maskInputFn | - | customize mask input content recording logic |
|
||
| maskTextFn | - | customize mask text content recording logic |
|
||
| slimDOMOptions | {} | remove unnecessary parts of the DOM <br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/588164aa12f1d94576f89ae0210b98f6e971c895/packages/rrweb-snapshot/src/types.ts#L97-L108) |
|
||
| inlineStylesheet | true | whether to inline the stylesheet in the events |
|
||
| hooks | {} | hooks for events<br />refer to the [list](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L207) |
|
||
| packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||
| sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||
| recordCanvas | false | Whether to record the canvas element. Available options:<br/>`false`, <br/>`true` |
|
||
| inlineImages | false | whether to record the image content |
|
||
| collectFonts | false | whether to collect fonts in the website |
|
||
| userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) |
|
||
| plugins | [] | load plugins to provide extended record functions. [What is plugins?](./docs/recipes/plugin.md) |
|
||
|
||
#### Privacy
|
||
|
||
You may find some contents on the webpage which are not willing to be recorded, then you can use the following approaches:
|
||
|
||
- An element with the class name `.rr-block` will not be recorded. Instead, it will replay as a placeholder with the same dimension.
|
||
- An element with the class name `.rr-ignore` will not record its input events.
|
||
- All text of elements with the class name `.rr-mask` and their children will be masked.
|
||
- `input[type="password"]` will be masked by default.
|
||
- Mask options to mask the content in input elements.
|
||
|
||
#### Checkout
|
||
|
||
By default, all the emitted events are required to replay a session and if you do not want to store all the events, you can use the checkout config.
|
||
|
||
**Most of the time you do not need to configure this**. But if you want to do something like capturing just the last N events from when an error has occurred, here is an example:
|
||
|
||
```js
|
||
// We use a two-dimensional array to store multiple events array
|
||
const eventsMatrix = [[]];
|
||
|
||
rrweb.record({
|
||
emit(event, isCheckout) {
|
||
// isCheckout is a flag to tell you the events has been checkout
|
||
if (isCheckout) {
|
||
eventsMatrix.push([]);
|
||
}
|
||
const lastEvents = eventsMatrix[eventsMatrix.length - 1];
|
||
lastEvents.push(event);
|
||
},
|
||
checkoutEveryNth: 200, // checkout every 200 events
|
||
});
|
||
|
||
// send last two events array to the backend
|
||
window.onerror = function () {
|
||
const len = eventsMatrix.length;
|
||
const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]);
|
||
const body = JSON.stringify({ events });
|
||
fetch('http://YOUR_BACKEND_API', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body,
|
||
});
|
||
};
|
||
```
|
||
|
||
Due to the incremental-snapshot-chain mechanism rrweb used, we can not capture the last N events accurately. With the sample code above, you will finally get the last 200 to 400 events been sent to your backend.
|
||
|
||
Similarly, you can also configure `checkoutEveryNms` to capture the last N minutes events:
|
||
|
||
```js
|
||
// We use a two-dimensional array to store multiple events array
|
||
const eventsMatrix = [[]];
|
||
|
||
rrweb.record({
|
||
emit(event, isCheckout) {
|
||
// isCheckout is a flag to tell you the events has been checkout
|
||
if (isCheckout) {
|
||
eventsMatrix.push([]);
|
||
}
|
||
const lastEvents = eventsMatrix[eventsMatrix.length - 1];
|
||
lastEvents.push(event);
|
||
},
|
||
checkoutEveryNms: 5 * 60 * 1000, // checkout every 5 minutes
|
||
});
|
||
|
||
// send last two events array to the backend
|
||
window.onerror = function () {
|
||
const len = eventsMatrix.length;
|
||
const events = eventsMatrix[len - 2].concat(eventsMatrix[len - 1]);
|
||
const body = JSON.stringify({ events });
|
||
fetch('http://YOUR_BACKEND_API', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body,
|
||
});
|
||
};
|
||
```
|
||
|
||
With the sample code above, you will finally get the last 5 to 10 minutes of events been sent to your backend.
|
||
|
||
### Replay
|
||
|
||
You need to include the style sheet before replay:
|
||
|
||
```html
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
|
||
/>
|
||
```
|
||
|
||
And then initialize the replayer with the following code:
|
||
|
||
```js
|
||
const events = YOUR_EVENTS;
|
||
|
||
const replayer = new rrweb.Replayer(events);
|
||
replayer.play();
|
||
```
|
||
|
||
#### Control the replayer by API
|
||
|
||
```js
|
||
const replayer = new rrweb.Replayer(events);
|
||
|
||
// play
|
||
replayer.play();
|
||
|
||
// play from the third seconds
|
||
replayer.play(3000);
|
||
|
||
// pause
|
||
replayer.pause();
|
||
|
||
// pause at the fifth seconds
|
||
replayer.pause(5000);
|
||
```
|
||
|
||
#### Options
|
||
|
||
The replayer accepts options as its constructor's second parameter, and it has the following options:
|
||
|
||
| key | default | description |
|
||
| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||
| speed | 1 | replay speed ratio |
|
||
| root | document.body | the root element of replayer |
|
||
| loadTimeout | 0 | timeout of loading remote style sheet |
|
||
| skipInactive | false | whether to skip inactive time |
|
||
| showWarning | true | whether to print warning messages during replay |
|
||
| showDebug | false | whether to print debug messages during replay |
|
||
| blockClass | 'rr-block' | element with the class name will display as a blocked area |
|
||
| liveMode | false | whether to enable live mode |
|
||
| insertStyleRules | [] | accepts multiple CSS rule string, which will be injected into the replay iframe |
|
||
| triggerFocus | true | whether to trigger focus during replay |
|
||
| UNSAFE_replayCanvas | false | whether to replay the canvas element. **Enable this will remove the sandbox, which is unsafe.** |
|
||
| pauseAnimation | true | whether to pause CSS animation when the replayer is paused |
|
||
| mouseTail | true | whether to show mouse tail during replay. Set to false to disable mouse tail. A complete config can be found in this [type](https://github.com/rrweb-io/rrweb/blob/9488deb6d54a5f04350c063d942da5e96ab74075/src/types.ts#L407) |
|
||
| unpackFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) |
|
||
| logConfig | - | configuration of console output playback, refer to the [console recipe](./docs/recipes/console.md) |
|
||
| plugins | [] | load plugins to provide extended replay functions. [What is plugins?](./docs/recipes/plugin.md) |
|
||
| useVirtualDom | true | whether to use Virtual Dom optimization in the process of skipping to a new point of time |
|
||
|
||
#### Use rrweb-player
|
||
|
||
Since rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.
|
||
|
||
##### Installation
|
||
|
||
rrweb-player can also be included with `<script>`：
|
||
|
||
```html
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
|
||
/>
|
||
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
|
||
```
|
||
|
||
Or installed by using NPM：
|
||
|
||
```shell
|
||
npm install --save rrweb-player
|
||
```
|
||
|
||
```js
|
||
import rrwebPlayer from 'rrweb-player';
|
||
import 'rrweb-player/dist/style.css';
|
||
```
|
||
|
||
##### Usage
|
||
|
||
```js
|
||
new rrwebPlayer({
|
||
target: document.body, // customizable root element
|
||
props: {
|
||
events,
|
||
},
|
||
});
|
||
```
|
||
|
||
##### Options
|
||
|
||
| key | default | description |
|
||
| -------------- | ------------ | ------------------------------------------------------ |
|
||
| events | [] | the events for replaying |
|
||
| width | 1024 | the width of the replayer |
|
||
| height | 576 | the height of the replayer |
|
||
| autoPlay | true | whether to autoplay |
|
||
| speedOption | [1, 2, 4, 8] | speed options in UI |
|
||
| showController | true | whether to show the controller UI |
|
||
| tags | {} | customize the custom events style with a key-value map |
|
||
| ... | - | all the rrweb Replayer options will be bypassed |
|
||
|
||
#### Events
|
||
|
||
Developers may want to extend the rrweb's replayer or respond to its events. Such as giving notification when the replayer starts to skip inactive time.
|
||
So rrweb expose a public API `on` which allow developers to listen to the events and customize the reactions, and it has the following events:
|
||
|
||
```js
|
||
const replayer = new rrweb.Replayer(events);
|
||
replayer.on(EVENT_NAME, (payload) => {
|
||
...
|
||
})
|
||
```
|
||
|
||
The event list:
|
||
|
||
| Event | Description | Value |
|
||
| ---------------------- | ----------------------------------- | ----------------- |
|
||
| start | started to replay | - |
|
||
| pause | paused the replay | - |
|
||
| finish | finished the replay | - |
|
||
| resize | the viewport has changed | { width, height } |
|
||
| fullsnapshot-rebuilded | rebuilded a full snapshot | event |
|
||
| load-stylesheet-start | started to load remote stylesheets | - |
|
||
| load-stylesheet-end | loaded remote stylesheets | - |
|
||
| skip-start | started to skip inactive time | { speed } |
|
||
| skip-end | skipped inactive time | { speed } |
|
||
| mouse-interaction | mouse interaction has been replayed | { type, target } |
|
||
| event-cast | event has been replayed | event |
|
||
| custom-event | custom event has been replayed | event |
|
||
|
||
The rrweb-replayer also re-expose the event listener via a `component.addEventListener` API.
|
||
|
||
And there are three rrweb-replayer event will be emitted in the same way:
|
||
|
||
| Event | Description | Value |
|
||
| ---------------------- | -------------------------------- | ----------- |
|
||
| ui-update-current-time | current time has changed | { payload } |
|
||
| ui-update-player-state | current player state has changed | { payload } |
|
||
| ui-update-progress | current progress has changed | { payload } |
|
||
|
||
## REPL tool
|
||
|
||
You can also play with rrweb by using the REPL testing tool which does not need installation.
|
||
|
||
Run `yarn repl` to launch a browser and ask for a URL you want to test on the CLI:
|
||
|
||
```
|
||
Enter the url you want to record, e.g https://react-redux.realworld.io:
|
||
```
|
||
|
||
Waiting for the browser to open the specified page and print the following messages on the CLI:
|
||
|
||
```
|
||
Enter the url you want to record, e.g https://react-redux.realworld.io: https://github.com
|
||
Going to open https://github.com...
|
||
Ready to record. You can do any interaction on the page.
|
||
Once you want to finish the recording, enter 'y' to start replay:
|
||
```
|
||
|
||
At this point, you can interact on the web page. After the desired operations have been recorded, enter 'y' on the CLI, and the test tool will replay the operations to verify whether the recording was successful.
|
||
|
||
The following messages will be printed on the CLI during replay:
|
||
|
||
```
|
||
Enter 'y' to persistently store these recorded events:
|
||
```
|
||
|
||
At this point, you can enter 'y' again on the CLI. The test tool will save the recorded session into a static HTML file and prompt for the location:
|
||
|
||
```
|
||
Saved at PATH_TO_YOUR_REPO/temp/replay_2018_11_23T07_53_30.html
|
||
```
|
||
|
||
This file uses the latest rrweb bundle code, so we can run `npm run bundle:browser` after patching the code, then refresh the static file to see and debug the impact of the latest code on replay.
|