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.initialized("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. Refer to the privacy chapter.
`maskTextSelector`	`null`	Use a string to configure which selector should be masked. Refer to the privacy chapter.
`maskAllInputs`	`false`	Mask all user input values as `*`. Off by default (only password inputs are masked); set to `true` to mask every input.
`maskInputOptions`	`{ password: true }`	Mask some kinds of input `*`. Refer to the list.
`maskInputFn`	-	Customize mask input content recording logic.
`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. Refer to the list.
`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

By default, replays only mask secure (password) input fields, so 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.

Mask text fields

Simply add the class rr-mask to the textfield, and Gleap replays will mask the input.

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

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

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