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

Turn on Web replays under Settings → Developer → Developer options → Replays. Reload your app after saving. Replays are in beta; check the current plan requirement and test them in a staging environment first.

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

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 kinds 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,
}>;