# 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 `
```
Also, you can link to a specific version number that you can update manually:
```html
```
#### 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
```
#### 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 `
```
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 |
| maxScale | 1 | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited |
| 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 |
| destroy | destroyed the replayer | - |
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.