JavaScript SDK: Replays

Replays for our JavaScript SDK allow you to record and replay users’ interactions on the web. This is especially handy for bug reports, where you’d like to replay the last actions a user took before a bug occured.

Enable replays

Replays can be activated by navigating to Project settings -> Developer options —> Enable 🎥 web replays. Simply activate the option and reload your web app.

Configuration options

This document provides detailed information on the configuration options available for replays. You must set the replay options before Gleap.initialize("API_KEY"); gets called.

Gleap.setReplayOptions({
  // Replay options go here.
});

Available options

Key	Default	Description
`blockClass`	`'rr-block'`	Use a string or RegExp to configure which elements should be blocked. Refer to the privacy chapter.
`blockSelector`	`null`	Use a string to configure which selector should be blocked. Refer to the privacy chapter.
`ignoreClass`	`'rr-ignore'`	Use a string or RegExp to configure which elements should be ignored. Refer to the privacy chapter.
`ignoreSelector`	`null`	Use a string to configure which selector should be ignored. Refer to the privacy chapter.
`ignoreCSSAttributes`	`null`	Array of CSS attributes that should be ignored.
`maskTextClass`	`'rr-mask'`	Use a string or RegExp to configure which elements should be masked: their text, and the values of fields inside them. Refer to the privacy chapter.
`maskTextSelector`	`null`	Use a string to configure which selector should be masked: text, and the values of fields inside matching elements. Refer to the privacy chapter.
`maskAllInputs`	`false`	Mask every input value as `*`, in replays and (from SDK 18.1.1) screenshots. Off by default; the fields masked automatically stay masked either way.
`maskInputOptions`	`{ password: true }`	Mask some kinds of input as `*`, in replays and (from SDK 18.1.1) screenshots. Refer to the list. From SDK 18.1.1, password fields stay masked whatever you pass.
`maskInputFn`	-	`(text, element) => string`: customize how the values that `maskInputOptions` or `maskAllInputs` mask are recorded, in replays and (from SDK 18.1.1) screenshots. Not used for the fields masked automatically, which are always masked as `*`.
`maskTextFn`	-	Customize mask text content recording logic.
`slimDOMOptions`	`{}`	Remove unnecessary parts of the DOM.
`dataURLOptions`	`{}`	Canvas image format and quality. This parameter will be passed to the `OffscreenCanvas.convertToBlob()`. Using this parameter effectively reduces the size of the recorded data.
`inlineStylesheet`	`true`	Whether to inline the stylesheet in the events.
`hooks`	`{}`	Hooks for events.
`packFn`	-	Refer to the storage optimization recipe.
`sampling`	-	Refer to the storage optimization recipe.
`recordCanvas`	`false`	Whether to record the canvas element. Available options: `false`, `true`.
`recordCrossOriginIframes`	`false`	Whether to record cross origin iframes. rrweb (see the docs below) has to be injected in each child iframe for this to work. Available options: `false`, `true`.
`recordAfter`	`'load'`	If the document is not ready, then the recorder will start recording after the specified event is fired. Available options: `DOMContentLoaded`, `load`.
`inlineImages`	`false`	Whether to record the image content.
`collectFonts`	`false`	Whether to collect fonts in the website.
`userTriggeredOnInput`	`false`	Whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. What is `userTriggered`?
`plugins`	`[]`	Load plugins to provide extended record functions. What are `plugins`?

Storage Optimization Recipe

Use the sampling config in the recording can reduce the storage size by dropping some events:

Block DOM element

Some DOM elements may emit lots of events, and some of them may not be the thing user cares about. So you can use the block class to ignore these kinds of elements. Some common patterns may emit lots of events are:

long list
complex SVG
element with JS controlled animation
canvas animations

Sampling

Gleap.setReplayOptions({
  sampling: {
    // do not record mouse movement
    mousemove: false,
    // do not record mouse interaction
    mouseInteraction: false,
    // set the interval of scrolling event
    scroll: 150,
    // set the interval of media interaction event
    media: 800,
    // set the timing of record input
    input: "last", // When input mulitple characters, only record the final input
  },
});

Gleap.setReplayOptions({
   sampling: {
    // Configure which kins of mouse interaction should be recorded
    mouseInteraction: {
      MouseUp: false,
      MouseDown: false,
      Click: false,
      ContextMenu: false,
      DblClick: false,
      Focus: false,
      Blur: false,
      TouchStart: false,
      TouchEnd: false,
    }
});

Recording canvas

Canvas is a special HTML element, and will not be recorded by replays by default. There are some options for recording and replaying Canvas. Enable recording Canvas：

Gleap.setReplayOptions({
  recordCanvas: true,
  sampling: {
    canvas: 15,
  },
  // optional image format settings
  dataURLOptions: {
    type: "image/webp",
    quality: 0.6,
  },
});

Cross origin iframes

To facilitate the replay functionality for cross-origin iframes, some extra configurations are required. Gleap employs rrweb for capturing the replay sessions. For a comprehensive guide on configuring iframes for this purpose, please refer to the following documentation: rrweb Cross-Origin Iframes Setup.

Privacy

Replays always mask password fields and, from JavaScript SDK 18.1.1, fields whose autocomplete attribute contains current-password, new-password, one-time-code, cc-number or cc-csc; options cannot turn this off. Other form values stay visible for debugging. You can flag other fields or even complete blocks to be masked, or set maskAllInputs: true to mask every input. Screenshots follow the same rules, see Privacy controls.

Mask text fields

Add the class rr-mask to a field, or to an element that contains fields, and replays mask their values as well as the text inside the element. This needs JavaScript SDK 18.1.1 or later: earlier versions mask only the text, so use maskInputOptions or maskAllInputs to mask input values there. Select menus are masked only through maskInputOptions: { select: true } or maskAllInputs.

Mask blocks

Simply add the class rr-block to the elements you want to block. Replays will add a blank placeholder with the dimensions of the blocked element. This is especially handy to mask privacy sensitive blocks.

Mask input options

Set a kind to true to mask all fields of that kind. From JavaScript SDK 18.1.1, the object adds to the automatic masking: password fields stay masked even if you pass { password: false } or leave password out. Earlier versions replace the default with your object, so include password: true there.

export type MaskInputOptions = Partial<{
  color: boolean,
  date: boolean,
  "datetime-local": boolean,
  email: boolean,
  month: boolean,
  number: boolean,
  range: boolean,
  search: boolean,
  tel: boolean,
  text: boolean,
  time: boolean,
  url: boolean,
  week: boolean,
  // unify textarea and select element with text input
  textarea: boolean,
  select: boolean,
  password: boolean,
}>;

Get Started

SDKs

Kai Code

Surveys

Server-side event tracking

Guides

Enable replays

Configuration options

Available options

Storage Optimization Recipe

Block DOM element

Sampling

Recording canvas

Cross origin iframes

Privacy

Mask text fields

Mask blocks

Mask input options

​Enable replays

​Configuration options

​Available options

​Storage Optimization Recipe

​Block DOM element

​Sampling

​Recording canvas

​Cross origin iframes

​Privacy

​Mask text fields

​Mask blocks

​Mask input options

Enable replays

Configuration options

Available options

Storage Optimization Recipe

Block DOM element

Sampling

Recording canvas

Cross origin iframes

Privacy

Mask text fields

Mask blocks

Mask input options