🎥 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	'gl-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	'gl-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	'gl-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 input content as *.
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 will already mask secure text input fields. You can also flag other fields or even complete blocks to be masked.

Mask text fields

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

Mask blocks

Simply add the class gl-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;
}>;
``