rrweb docs

English

简体中文

English

简体中文

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 casePackage 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:

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

Convenience single-package option:

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

Legacy compatibility package:

shell
npm install rrweb
js
import { record, Replayer } from 'rrweb';
import 'rrweb/dist/style.css';

2) Browser Without Bundler (ESM) ​

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

html
<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>

Edit README on GitHub

Release Notes for rrweb ​

2.1.1 ​

Patch Changes ​

  • Updated dependencies []:
    • rrweb-snapshot@2.1.1
    • rrdom@2.1.1
    • @rrweb/types@2.1.1
    • @rrweb/utils@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 [b08a06f, 6fe4fed]:

    • rrweb-snapshot@2.1.0
    • @rrweb/types@2.1.0
    • rrdom@2.1.0
    • @rrweb/utils@2.1.0

2.0.1 ​

Patch Changes ​

  • #1854 5f52d63 Thanks @eoghanmurray! - Fix broken MutationObserver in Webkit/Safari when a webpage has been monkey patched by a 3rd party library

  • Updated dependencies [5f52d63]:

    • rrweb-snapshot@2.0.1
    • @rrweb/utils@2.0.1
    • rrdom@2.0.1
    • @rrweb/types@2.0.1

2.0.0 ​

Major Changes ​

  • #1497 2606a2a Thanks @Juice10! - Split plugins out of rrweb and move them into their own packages: @rrweb/packer, @rrweb/rrweb-plugin-canvas-webrtc-record, @rrweb/rrweb-plugin-canvas-webrtc-replay, @rrweb/rrweb-plugin-sequential-id-record, @rrweb/rrweb-plugin-sequential-id-replay, @rrweb/rrweb-plugin-console-record, @rrweb/rrweb-plugin-console-replay. Check out the README of each package for more information or check out https://github.com/rrweb-io/rrweb/pull/1033 to see the 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.

  • #1031 ad9bc3e Thanks @Juice10! - Move shared rrweb event and recorder types into the new @rrweb/types package.

  • #868 e4f680e Thanks @Juice10! - Remove INode / node.__sn usage and use Mirror as the source of truth.

  • #913 74f553a Thanks @Yuyz0112! - Move browser-only rrdom features into the new rrdom package.

Minor Changes ​

  • #1129 979d2b1 Thanks @eoghanmurray! - click events now include a .pointerType attribute which distinguishes between 'pen', 'mouse' and 'touch' events. There is no new PenDown/PenUp events, but these can be detected with a MouseDown/MouseUp + pointerType=pen

  • #1432 123a81e Thanks @Juice10! - Full overhawl of video and audio element playback. More robust and fixes lots of bugs related to pausing/playing/skipping/muting/playbackRate etc.

  • #1188 bc84246 Thanks @benjackwhite! - feat: Extends maskInputFn to pass the HTMLElement to the deciding function

  • #1170 d2582e9 Thanks @mydea! - feat: Ensure password inputs remain masked when switching input type

  • #1107 a225d8e Thanks @mydea! - feat: Allow to pass errorHandler as record option

  • #1503 335639a Thanks @Juice10! - Support top-layer <dialog> components. Fixes #1381.

  • #1310 7c0dc9d Thanks @benjackwhite! - Extends maskTextFn to pass the HTMLElement to the deciding function

  • #1543 53b83bb Thanks @JonasBa! - Optimize isParentRemoved check

  • #1035 2a80949 Thanks @Juice10! - Add support for recording cross-origin iframes via recordCrossOriginIframes.

  • #989 3809060 Thanks @YunFeng0817! - Add support for recording and replaying constructable adoptedStyleSheets, including stylesheet mutations, replace/replaceSync, shadow roots, iframes, live mode, and virtual DOM replay.

  • #936 b2d5689 Thanks @0jinxing! - Add recording and replay support for text selection events.

  • #953 5f59f91 Thanks @YunFeng0817! - Add a destroy() method to fully remove a replayer instance and emit a destroy event.

  • #976 a8478f1 Thanks @Juice10! - Add canvas WebRTC record and replay plugins for live-streaming canvas contents.

  • #1000 ce6019d Thanks @wfk007! - Add support for recording and replaying media playbackRate changes.

  • #967 bac1d7b Thanks @QxQstar! - Add dataURLOptions to control canvas snapshot image format and quality.

  • #894 5ba933c Thanks @dbseel! - Add ignoreCSSAttributes and apply blockSelector checks consistently across recorder observers.

  • #859 e238462 Thanks @Juice10! - Add support for recording canvas snapshots at a configured FPS.

  • #895 de755ae Thanks @Juice10! - Add the fast-forward virtual DOM optimization for replay.

Patch Changes ​

2.0.0-alpha.20 ​

Patch Changes ​

  • #1763 6388fb5 Thanks @wfk007! - fix: wujie monkeypatches ownerDocument

  • Updated dependencies [6388fb5]:

    • @rrweb/utils@2.0.0-alpha.20
    • rrweb-snapshot@2.0.0-alpha.20
    • rrdom@2.0.0-alpha.20
    • @rrweb/types@2.0.0-alpha.20

2.0.0-alpha.19 ​

Patch Changes ​

2.0.0-alpha.18 ​

Minor Changes ​

Patch Changes ​

  • #1535 04ee6ed Thanks @eoghanmurray! - Slight simplification to how we replace :hover after #1458

  • #1437 5fbb904 Thanks @eoghanmurray! - Edge case: Provide support for mutations on a <style> element which (unusually) has multiple text nodes

  • #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 [8e55c45, 02cc62d, 04ee6ed, 5fbb904, 5a78938]:

    • rrdom@2.0.0-alpha.18
    • rrweb-snapshot@2.0.0-alpha.18
    • @rrweb/types@2.0.0-alpha.18
    • @rrweb/utils@2.0.0-alpha.18

2.0.0-alpha.17 ​

Minor Changes ​

Patch Changes ​

  • #1417 40bbc25 Thanks @YunFeng0817! - fix: duplicate textContent for style elements cause incremental style mutations to be invalid

  • #1527 68076b7 Thanks @arredgroup! - Export takeFullSnapshot function for a recording process

  • #1515 8059d96 Thanks @okejminja! - Added support for deprecated addRule & removeRule methods

  • #1509 be6bf52 Thanks @Juice10! - Reverse monkey patch built in methods to support LWC (and other frameworks like angular which monkey patch built in methods).

  • Updated dependencies [40bbc25, 335639a, 335639a, d350da8, be6bf52]:

    • rrweb-snapshot@2.0.0-alpha.17
    • rrdom@2.0.0-alpha.17
    • @rrweb/types@2.0.0-alpha.17
    • @rrweb/utils@2.0.0-alpha.17

2.0.0-alpha.16 ​

Patch Changes ​

  • #1386 a2c8a1a Thanks @ababik! - Fix that the optional maskInputFn was being accidentally ignored during the creation of the full snapshot

  • #1512 d08624c Thanks @eoghanmurray! - optimisation: skip mask check on leaf elements

  • Updated dependencies [a2c8a1a, d08624c]:

    • rrweb-snapshot@2.0.0-alpha.16
    • rrdom@2.0.0-alpha.16
    • @rrweb/types@2.0.0-alpha.16

2.0.0-alpha.15 ​

Major Changes ​

  • #1497 2606a2a Thanks @Juice10! - Split plugins out of rrweb and move them into their own packages: @rrweb/packer, @rrweb/rrweb-plugin-canvas-webrtc-record, @rrweb/rrweb-plugin-canvas-webrtc-replay, @rrweb/rrweb-plugin-sequential-id-record, @rrweb/rrweb-plugin-sequential-id-replay, @rrweb/rrweb-plugin-console-record, @rrweb/rrweb-plugin-console-replay. Check out the README of each package for more information or check out https://github.com/rrweb-io/rrweb/pull/1033 to see the 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 ​

  • #1033 7261c43 Thanks @Juice10! - Export ReplayPlugin from rrweb directly. Previously we had to do import type { ReplayPlugin } from 'rrweb/dist/types'; now we can do import type { ReplayPlugin } from 'rrweb';

  • #1468 4014305 Thanks @eoghanmurray! - inlineImages: during snapshot avoid adding an event listener for inlining of same-origin images (async listener mutates the snapshot which can be problematic)

  • #1489 609b7fa Thanks @JonasBa! - Optimize performance of isParentRemoved by converting it to an iterative procedure

  • #1493 82f6fec Thanks @eoghanmurray! - Replay: Replace negative lookbehind in regexes from css parser as it causes issues with Safari 16

  • #1353 5c27b76 Thanks @YunFeng0817! - Fix: some nested cross-origin iframes can't be recorded

  • #1328 d38893f Thanks @eoghanmurray! - Refactor to preclude the need for a continuous raf loop running in the background which is related to shadowDom

  • #1295 d7cf8dd Thanks @colingm! - Return early for child same origin frames

  • #760 e08706a Thanks @eoghanmurray! - Add slimDOM option to block animation on <title> tag; enabled when the 'all' value is used for slimDOM

  • Updated dependencies [4014305, 82f6fec, 2606a2a, f3cf092, e08706a]:

    • rrweb-snapshot@2.0.0-alpha.15
    • rrdom@2.0.0-alpha.15
    • @rrweb/types@2.0.0-alpha.15

2.0.0-alpha.14 ​

Patch Changes ​

2.0.0-alpha.13 ​

Minor Changes ​

  • #1432 123a81e Thanks @Juice10! - Full overhawl of video and audio element playback. More robust and fixes lots of bugs related to pausing/playing/skipping/muting/playbackRate etc.

Patch Changes ​

2.0.0-alpha.12 ​

Minor Changes ​

Patch Changes ​

2.0.0-alpha.11 ​

Patch Changes ​

2.0.0-alpha.10 ​

Patch Changes ​

  • #1269 7103625 Thanks @eoghanmurray! - Don't include redundant data from text/attribute mutations on just-added nodes

  • #1268 d872d28 Thanks @eoghanmurray! - Compact style mutation fixes and improvements

    • fixes when style updates contain a 'var()' on a shorthand property #1246
    • further ensures that style mutations are compact by reverting to string method if it is shorter

  • #1262 36da39d Thanks @billyvg! - feat: Add ignoreSelector option

    Similar to ignoreClass, but accepts a CSS selector so that you can use any CSS selector.

  • #1251 bbbfa22 Thanks @wfk007! - fix: Resize and MediaInteraction events repeat generated after the iframe appeared

  • #1254 d0fbe23 Thanks @mydea! - Handle case where event is null/undefined

  • #1273 a3de582 Thanks @Juice10! - Canvas FPS recording: override preserveDrawingBuffer: true on canvas creation. Canvas replay: fix flickering canvas elemenrs. Canvas FPS recording: fix bug that wipes webgl(2) canvas backgrounds while recording.

  • Updated dependencies [d872d28, c6600e7]:

    • @rrweb/types@2.0.0-alpha.10
    • rrweb-snapshot@2.0.0-alpha.10
    • rrdom@2.0.0-alpha.10

2.0.0-alpha.9 ​

Patch Changes ​

  • #1196 490b3e2 Thanks @eoghanmurray! - Guard against presence of older 3rd party javascript libraries which redefine Date.now()

  • #1220 a1ec9a2 Thanks @wfk007! - perf: optimize performance of the DoubleLinkedList get

  • #1196 490b3e2 Thanks @eoghanmurray! - Guard against redefinition of Date.now by third party libraries which are also present on a page alongside rrweb

  • #1183 d7c72bf Thanks @mydea! - fix: Ensure attributes are lowercased when checking

  • #1214 ebcbe8b Thanks @wfk007! - perf: optimize the performance of record in processMutation phase

  • Updated dependencies [b798f2d, d7c72bf]:

    • rrdom@2.0.0-alpha.9
    • rrweb-snapshot@2.0.0-alpha.9
    • @rrweb/types@2.0.0-alpha.9

2.0.0-alpha.8 ​

Minor Changes ​

Patch Changes ​

  • #1198 b5e30cf Thanks @charliegracie! - Reset the finished flag in Controller goto instead of handleProgressClick so that it is properly handled if goto is called directly.

  • #1184 aa79db7 Thanks @mydea! - fix: Ensure getting the type of inputs works

  • Updated dependencies [979d2b1, bc84246, d0fdc0f]:

    • @rrweb/types@2.0.0-alpha.8
    • rrweb-snapshot@2.0.0-alpha.8
    • rrdom@2.0.0-alpha.8

2.0.0-alpha.7 ​

Minor Changes ​

Patch Changes ​

  • #1179 e0f862b Thanks @wfk007! - Fix: #1178 remove warning related to worker_threads while building

  • #1186 267e990 Thanks @YunFeng0817! - Fix: processed-node-manager is created even in the environment that doesn't need a recorder

  • #1145 a82a3b4 Thanks @eoghanmurray! - For a mutation which removes a node, reduce the number of spurious warnings to take into account that an anscestor (rather than just a parent) may have been just removed

  • #1191 1e6f71b Thanks @Juice10! - Only apply touch-active styling on flush

  • #1191 1e6f71b Thanks @Juice10! - Trigger mouse movement and hover with mouse up and mouse down events when replayer.pause(...) is called.

  • #1163 4cb4d0e Thanks @zhaobosky! - Fix: some websites rebuild imcomplete

    1. Some websites, addedSet in emit function is not empty, but the result converted from Array.from is empty.
    2. Some websites polyfill classList functions of HTML elements. Their implementation may throw errors and cause the snapshot to fail. I add try-catch statements to make the code robust.

  • Updated dependencies [d2582e9, e7f0c80]:

    • rrweb-snapshot@2.0.0-alpha.7
    • rrdom@2.0.0-alpha.7
    • @rrweb/types@2.0.0-alpha.7

2.0.0-alpha.6 ​

Patch Changes ​

2.0.0-alpha.5 ​

Patch Changes ​

1.0.0 ​

Minor Changes ​

  • Support recording same-origin non-sandboxed iframes.
  • Support recording open-mode shadow DOM.
  • Implement the plugin API.
  • Export record.takeFullSnapshot as a public API.
  • Record and replay drag events.
  • Add options to mask texts (#540).

Patch Changes ​

  • Get the original MutationObserver when Angular patched it.
  • Fix RangeError: Maximum call stack size exceeded (#479).
  • Fix the linked-list implementation in the recorder.
  • Don't perform newly added actions if the player is paused (#539).
  • Fix inaccurate mouse position (#522).

Major Changes ​

  • Deprecated the usage of rrweb.mirror. Please use record.mirror and replayer.getMirror() instead.
  • Deprecated built-in console recording and replay options. See the plugin API in the console recipe.