rrweb docs

English

简体中文

English

简体中文

@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 casePackage 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 <script> Include (UMD fallback) ​

Use this only for compatibility with non-module environments.

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

The legacy UMD global is rrweb, so you will need to prefix the example APIs, e.g. rrweb.record, new rrweb.Replayer(...), rrweb.pack, and rrweb.unpack, rather than using these functions directly.

Edit README on GitHub

Release Notes for @rrweb/all ​

2.1.1 ​

Patch Changes ​

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

2.1.0 ​

Patch Changes ​

  • Updated dependencies [7f0f75f, 6fe4fed]:
    • rrweb@2.1.0
    • @rrweb/types@2.1.0
    • @rrweb/packer@2.1.0

2.0.1 ​

Patch Changes ​

  • #1857 201a528 Thanks @Juice10! - Ship dist/style.css from @rrweb/all by importing rrweb's replay styles in the bundle entry and exporting the CSS subpath.

  • Updated dependencies [5f52d63]:

    • rrweb@2.0.1
    • @rrweb/types@2.0.1
    • @rrweb/packer@2.0.1

2.0.0 ​

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 ​

2.0.0-alpha.20 ​

Patch Changes ​

  • Updated dependencies [6388fb5]:
    • rrweb@2.0.0-alpha.20
    • @rrweb/types@2.0.0-alpha.20
    • @rrweb/packer@2.0.0-alpha.20

2.0.0-alpha.19 ​

Patch Changes ​

2.0.0-alpha.18 ​

Patch Changes ​

  • #1593 5a78938 Thanks @daibhin! - NodeType enum was moved from rrweb-snapshot to @rrweb/types The following types where moved from rrweb-snapshot to @rrweb/types: documentNode, documentTypeNode, legacyAttributes, textNode, cdataNode, commentNode, elementNode, serializedNode, serializedNodeWithId, serializedElementNodeWithId, serializedTextNodeWithId, IMirror, INode, mediaAttributes, attributes and DataURLOptions
  • Updated dependencies [04ee6ed, 5fbb904, 5a78938, 53b83bb]:
    • rrweb@2.0.0-alpha.18
    • @rrweb/types@2.0.0-alpha.18
    • @rrweb/packer@2.0.0-alpha.18

2.0.0-alpha.17 ​

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 ​