rrweb-summary.md

RRweb is an open source web session replay library, which provides easy-to-use APIs to record user's interactions and replay it remotely.

Use Cases

• User analysis
• Reproduce bugs
• Demonstrate web

Also, for more details on other use cases, please see here

Try rrweb

• https://www.rrweb.io/demo/checkout-form/
• https://www.rrweb.io/demo/chat
• https://www.rrweb.io/demo/tetris?lan=en

Implement

This example integrates rrweb into the NuxtJS project

• Install package:

yarn add rrweb rrweb-player

• Import package:

import { record } from 'rrweb'
import RrwebReplay from 'rrweb-player'

• Add record action:

Create a events data to store events emit.

data() {
    return {
      events: [],
    }
}

Add action:

record({
    emit(event) {
        // do something here
        // ex: this.events.push() -> push event to events array data
    }
})

• Add replay action

Creates a div element to display as a replay frame:

<div id="rrweb" class="replay"></div>

You can also use this css file to style: https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css

Add action:

const rrwebEl = document.getElementById('rrweb')
new RrwebReplay({
    target: rrwebEl,
    data: {
        events: this.events,
        autoPlay: true,
    },
})

Note

• Some contents on the webpage which are not willing to be recorded:

1. An element with the class name .rr-block will not be recorded. Instead, it will replay as a placeholder with the same dimension.

2. An element with the class name .rr-ignore will not record its input events.

3. input[type="password"] will be ignored as default.

4. Mask options to mask the content in input elements.

• Events can be saved to the database via Backend API or saved to file, localStorage for get and replay.

• You can config options for record, replay and controller actions, details can be found here

References

• https://github.com/rrweb-io/rrweb
• https://www.rrweb.io/
• https://github.com/azoom-t-d-tuan/rrweb-vuejs-example