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

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:

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.
input[type="password"] will be ignored as default.
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

azoom-t-d-tuan/rrweb-summary.md

Use Cases

Try rrweb

Implement

Note

References