rrweb docs

English

简体中文

English

简体中文

@rrweb/replay ​

Overview ​

This package contains all the necessary code to replay recorded events. See the replay section of the guide for more info.

This package handles basic replay, but leaves UI and controls up to you. For a pre-built UI check out the rrweb-player package.

Installation ​

1) Bundler / npm (Recommended) ​

bash
npm install @rrweb/replay
js
import { Replayer } from '@rrweb/replay';
import '@rrweb/replay/dist/style.css';

2) Browser Without Bundler (ESM) ​

Use the CDN-hosted @rrweb/replay browser asset when loading directly in the browser:

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

Use current for the latest stable release, or pin an exact version such as 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.

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

The legacy UMD global is rrwebReplay.

Usage ​

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

const replayer = new Replayer(events, {
  // options
});
replayer.play();

Notes ​

Currently this package is really just a wrapper around the Replayer class in the main rrweb package. All Replayer related code will get moved here in the future.

Edit README on GitHub

Release Notes for @rrweb/replay ​

2.1.1 ​

Patch Changes ​

  • Updated dependencies []:
    • rrweb@2.1.1
    • @rrweb/types@2.1.1

2.1.0 ​

Patch Changes ​

  • #1864 7f0f75f Thanks @eoghanmurray! - Fix that the replayer getCurrentTime() was getting 'stuck' in liveMode after last event was exhausted

  • Updated dependencies [7f0f75f, 6fe4fed]:

    • rrweb@2.1.0
    • @rrweb/types@2.1.0

2.0.1 ​

Patch Changes ​

  • Updated dependencies [5f52d63]:
    • rrweb@2.0.1
    • @rrweb/types@2.0.1

2.0.0 ​

Major Changes ​

  • #1762 22bc4c3 Thanks @Juice10! - BREAKING CHANGE: Rename UMD global names from rrweb to rrwebRecord for the recorder and rrwebReplay for the replayer. This avoids conflicts when both are loaded on the same page.

  • #1497 2606a2a Thanks @Juice10! - Distributed files have new filenames, paths and extensions. Important: If you reference distributed files or types directly, you might have to update your paths/filenames. E.g. you import from rrweb/typings/... or rrdom/es. However you run import rrweb from 'rrweb' you won't notice a difference with this change. If you include rrweb files directly in a script tag, you might have to update that path to include a the .umd.cjs files instead. All .js files now use ES modules which can be used in modern browsers, node.js and bundlers that support ES modules. All npm packages now also ship .cjs and .umd.cjs files. The .umd.cjs files are CommonJS modules that bundle all files together to make it easy to ship one file to browser environments (similar to the previous .js files). The .cjs files are CommonJS modules that can be used in older Node.js environments. Types should be better defined in package.json and if you need specific types they might be exported from new packages (for example PlayerMachineState and SpeedMachineState are now exported from @rrweb/replay). Check the package.json's main and exports field for the available files.

  • #1497 2606a2a Thanks @Juice10! - Remove the rrweb-all.js, rrweb-record.js, and rrweb-replay.js files from rrweb package. Now you can use @rrweb/all, @rrweb/record, and @rrweb/replay packages instead. Check out the README of each package for more information or check out PR #1033 to see the changes.

Patch Changes ​

2.0.0-alpha.17—20 ​

Patch Changes only following changes to rrweb and @rrweb/types

Patch Changes ​

2.0.0-alpha.15 ​

Major Changes ​

  • #1497 2606a2a Thanks @Juice10! - Distributed files have new filenames, paths and extensions. Important: If you reference distributed files or types directly, you might have to update your paths/filenames. E.g. you import from rrweb/typings/... or rrdom/es. However you run import rrweb from 'rrweb' you won't notice a difference with this change. If you include rrweb files directly in a script tag, you might have to update that path to include a the .umd.cjs files instead. All .js files now use ES modules which can be used in modern browsers, node.js and bundlers that support ES modules. All npm packages now also ship .cjs and .umd.cjs files. The .umd.cjs files are CommonJS modules that bundle all files together to make it easy to ship one file to browser environments (similar to the previous .js files). The .cjs files are CommonJS modules that can be used in older Node.js environments. Types should be better defined in package.json and if you need specific types they might be exported from new packages (for example PlayerMachineState and SpeedMachineState are now exported from @rrweb/replay). Check the package.json's main and exports field for the available files.

  • #1497 2606a2a Thanks @Juice10! - Remove the rrweb-all.js, rrweb-record.js, and rrweb-replay.js files from rrweb package. Now you can use @rrweb/all, @rrweb/record, and @rrweb/replay packages instead. Check out the README of each package for more information or check out PR #1033 to see the changes.

Patch Changes ​