rrweb Documentation

Record and replay the web

20,296 stars TypeScript TypeScript 1 file · ~113,654 tokens #fullstory#hotjar#logrocket#recorder#session-replay
RAW Doc

Technical Documentation: rrweb-io/rrweb

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`)

rrweb

(new!) rrweb cloud - hosted rrweb backend is now available



中文文档

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. 📚

🍳 Recipes 🍳

📺 Presentation: Hacking the browser to digital twin your users 📺

Project Structure

rrweb is composed of the following principal 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. This package can be used on it's own to provide a static HTML based 'screenshot' of the current web page state, with all Javascript deactivated.
  • record, builds on an initial snapshot to record all HTML state changes (mutations) and user interactions as the user browses the web page. Multiple page loads can be chained together into a single recording.
  • replay, rebuilds the inital snapshot and replays the list or stream of subsequent events to show a 'session replay'
  • rrweb-player, a player UI on top of the replay package to provide GUI-based functions like pause, fast-forward, drag and drop to play at any time.

Roadmap

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.

Typescript handbook

For the latest setup, testing, and pull request workflow, see Contributing to rrweb.

In addition to adding integration tests and unit tests, rrweb also provides a REPL testing tool.

Using the REPL tool

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site.

Gold Sponsors 🥇







Silver Sponsors 🥈







Bronze Sponsors 🥉









Backers

Core Team Members

| Juice10
open for rrweb consulting | eoghanmurray | Yun Feng |

| --- | --- | --- |

Who's using rrweb?

Overview (`.changeset/README.md`)

Changesets

Hello and welcome! This folder has been automatically generated by @changesets/cli, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it in our repository

We have a quick list of common questions to get you started engaging with this project in
our documentation

Overview (`packages/README.md`)

rrweb Packages

rrweb is a monorepo containing the following packages:

  • rrweb — Original package including both record and replay; deprecated in favour of @rrweb/record + @rrweb/replay (or @rrweb/all)
  • @rrweb/record — The record related code in rrweb and is designed to be published in a frontend app/webpage
  • @rrweb/replay — Rebuild and replay recorded events in an iframe
  • rrweb-player (ui) — Builds on @rrweb/replay to provide a feature-rich playback UI out of the box
  • rrweb-snapshot — Snapshot the DOM into a stateful and serializable data structure — basis of the FullSnapshot event in an rrweb recording
  • @rrweb/types — Shared types used across rrweb packages
  • @rrweb/utils — Shared utility functions used across rrweb packages
  • rrdom — a virtual dom library used to fast forward DOM mutation during replay
  • rrdom-nodejs — A Node.js implementation of the rrdom library for use in server side processing of rrweb data
  • rrvideo — A tool for transforming the session recorded by rrweb into a video
  • web-extension — Provides a browser extension for recording and replaying web pages
  • @rrweb/packer — Basic per-event compression before network transmission
  • @rrweb/all — Convenience package that includes record, replay + the packer, but no longer includes any plugins

See also plugin packages.

Overview (`packages/all/README.md`)

@rrweb/all

Overview

Convenience package that includes a bundle of rrweb packages.

In most production setups, the recorder and replayer are deployed to different pages/apps. Use @rrweb/record on recorded pages and @rrweb/replay (or rrweb-player to include UI) on replay pages.

Use case Package choice
Most new apps (explicit record/replay dependencies) @rrweb/record + @rrweb/replay
Single import for record, replay + packer @rrweb/all

Use @rrweb/all when you intentionally want one package for convenience (for example demos, tooling, or simplified setups); the deprecated rrweb package also served a similar all-in-one purpose.

Includes the following packages:

Installation

1) Bundler / npm

bash
npm install @rrweb/all
js
import { record, Replayer, pack, unpack } from '@rrweb/all';
import '@rrweb/all/dist/style.css';

For API details and examples, see the guide.

2) Browser Without Bundler (ESM)

html
<link rel="stylesheet" href="https://cdn.rrweb.com/all/current/style.css" />
<script type="module">
  import {
    record,
    Replayer,
    pack,
    unpack,
  } from 'https://cdn.rrweb.com/all/current/all.js';
</script>

Use current for the latest stable release, or pin an exact version such as
https://cdn.rrweb.com/all/2.0.1/all.js and
https://cdn.rrweb.com/all/2.0.1/style.css for immutable production URLs. See the
CDN assets docs for the full URL
shape and catalog.

3) Legacy Direct `