@kalayanasundaram123/rrweb

rrweb

Overview

Deprecated. rrweb is kept for backward compatibility only. New projects should depend on @rrweb/record and @rrweb/replay directly, or use @rrweb/all for a single convenience import. Moving to these entrypoints lets us slim down and eventually remove this package.

rrweb refers to 'record and replay the web', a tool for recording and replaying users' interactions on the web.

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 apps (explicit record/replay dependencies)	@rrweb/record + @rrweb/replay
Single import for record, replay + packer	@rrweb/all

Dev Note

As this was the original rrweb package, typescript code for both @rrweb/record and @rrweb/replay still lives in src/record and src/replay in this package. These will be refactored into their respective packages in due course, but for now this package is the principal one for both record and replay related PRs. See Contributing to rrweb for more info.

Installation

1) Bundler / npm (Recommended)

For new projects:

npm install @rrweb/record @rrweb/replay

import { record } from '@rrweb/record';
import { Replayer } from '@rrweb/replay';
import '@rrweb/replay/dist/style.css';

Convenience single-package option:

npm install @rrweb/all

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

Legacy compatibility package:

npm install rrweb

import { record, Replayer } from 'rrweb';
import 'rrweb/dist/style.css';

2) Browser Without Bundler (ESM)

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

Use current for the latest stable release, or pin exact versions such as https://cdn.rrweb.com/record/2.0.0/dist/record.js and https://cdn.rrweb.com/replay/2.0.0/dist/replay.js for immutable production URLs.

3) Legacy Direct <script> Include (UMD fallback)

Use this only for compatibility with non-module environments; modern browsers support the ESM method above.

<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/replay/current/dist/style.css"
/>
<script src="https://cdn.rrweb.com/record/current/dist/record.umd.cjs"></script>
<script src="https://cdn.rrweb.com/replay/current/dist/replay.umd.cjs"></script>

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

Yuyz0112

Yun Feng

eoghanmurray

Juice10 open for rrweb consulting

Who's using rrweb?