@sentry-internal/rrweb-player
TypeScript icon, indicating that this package has built-in type declarations

2.12.0 • Public • Published

Looking for a Vue.js version? Go here --> @preflight-hq/rrweb-player-vue


rrweb-player

Since rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.

How is this different from rrweb.Replayer?

rrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those.

Installation

rrweb-player can also be included with <script>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>

Or installed by using NPM:

npm install --save rrweb-player
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';

Usage

new rrwebPlayer({
  target: document.body, // customizable root element
  props: {
    events,
  },
});

Options

key default description
events [] the events for replaying
width 1024 the width of the replayer
height 576 the height of the replayer
maxScale 1 the maximum scale of the replayer (1 = 100%), set to 0 for unlimited
autoPlay true whether to autoplay
speed 1 The default speed to play at
speedOption [1, 2, 4, 8] speed options in UI
showController true whether to show the controller UI
tags {} customize the custom events style with a key-value map
inactiveColor #D4D4D4 Customize the color of inactive periods indicator in the progress bar with a valid CSS color string.
... - all the rrweb Replayer options will be bypassed

methods on the rrwebPlayer component

addEventListener(event: string, handler: (params: any) => unknown): void;
addEvent(event: eventWithTime): void;
getMetaData() => {
    startTime: number;
    endTime: number;
    totalTime: number;
}
getReplayer() => Replayer;
getMirror() => Mirror;

Toggles between play/pause

toggle();

Sets speed of player

setSpeed(speed: number)

Turns on/off skip inactive

toggleSkipInactive();

Triggers resize, do this whenever you change width/height

triggerResize();

Plays replay

play();

Pauses replay

pause();

Go to a point in time and pause or play from then

goto(timeOffset: number, play?: boolean)

Plays from a time to a time and (optionally) loop

playRange(
    timeOffset: number,
    endTimeOffset: number,
    startLooping: boolean = false,
    afterHook: undefined | (() => void) = undefined,
  )

Versions

Current Tags

Version History

Package Sidebar

Install

npm i @sentry-internal/rrweb-player

Weekly Downloads

3,078

Version

2.12.0

License

MIT

Unpacked Size

2.05 MB

Total Files

13

Last publish

Collaborators

  • haza
  • sentry-bot
  • mitsuhiko
  • zeeg
  • leedongwei
  • evanpurkhiser
  • billyvg
  • jauer
  • markstory