--- title: "JavaScript SDK: Replays" description: "Record and replay user interactions for bug reports with the Gleap JavaScript SDK. Follow the integration code examples." url: https://docs.gleap.ai/en/articles/399-javascript-sdk-replays collection: "JavaScript" updated: 2026-11-01 language: en --- # JavaScript SDK: Replays Record and replay user interactions for bug reports with the Gleap JavaScript SDK. Follow the integration code examples. 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**. ```js 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 ```js 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 }, }); ``` ```js 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： ```js 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](https://github.com/rrweb-io/rrweb/blob/master/docs/recipes/cross-origin-iframes.md). ## 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](https://gleap-developer-docs.gleap.help/en/articles/420-javascript-sdk-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. ```typescript 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, }>; ``` ## Related - [JavaScript SDK setup](https://docs.gleap.ai/en/articles/393-javascript-sdk-setup.md) - [JavaScript SDK: Code snippet](https://docs.gleap.ai/en/articles/394-javascript-sdk-code-snippet.md) - [JavaScript SDK: User identity](https://docs.gleap.ai/en/articles/395-javascript-sdk-user-identity.md) - [JavaScript SDK: Callbacks](https://docs.gleap.ai/en/articles/396-javascript-sdk-callbacks.md) - [JavaScript SDK: AI chatbar](https://docs.gleap.ai/en/articles/397-javascript-sdk-ai-chatbar.md)