Next.jsPrivacy
Session Replay is currently in beta. Beta features are still in-progress and may have bugs. We recognize the irony. If you have any questions, feedback or would like to report a bug, please open a GitHub issue with a link to a relevant replay or, if possible, a publicly accessible URL to the page you're attempting to record a replay of.
Session Replay supports all browser JavaScript applications. It is built to work with @sentry/browser, and our browser framework SDKs.
There are several ways to deal with personally identifiable information (PII). By default, the integration will mask all text content with * and block all media elements (img, svg, video, object, picture, embed, map, audio). This can be disabled by setting maskAllText to false. It's also possible to add the following CSS classes to specific DOM elements to prevent recording their contents: sentry-block, sentry-ignore, and sentry-mask. The following sections will show examples of how content is handled by the differing methods.
Masking
Masking replaces the text content with something else. The default masking behavior is to replace each character with a *. In this example the relevant HTML code is: <table class="sentry-mask">...</table>:
Blocking
Blocking replaces the element with a placeholder that has the same dimensions. The recording will show an empty space where the content was. In this example the relevant HTML code is: <table data-sentry-block>...</table>:
Ignoring
Ignoring only applies to form inputs. Events will be ignored on the input element so that the replay doesn't show what occurs inside of the input. In the below example, notice how the results in the table below the input changes, but no text is visible in the input:
Privacy Configuration
The following options can be configured as options to the integration, in new Replay({}):
| Key | Type | Default | description |
|---|---|---|---|
| blockAllMedia | boolean | true | Block all media elements (img, svg, video, object, picture, embed, map, audio). |
| blockClass | string | RegExp | 'sentry-block' | Redact all elements that match the class name. See Blocking above for an example. |
| blockSelector | string | '[data-sentry-block]' | Redact all elements that match the DOM selector. See Blocking above for an example. |
| ignoreClass | string | RegExp | 'sentry-ignore' | Ignores all events on the matching input field. See Ignoring above for an example. |
| maskAllInputs | boolean | true | Mask values of <input> elements. Passes input values through maskInputFn before sending to server. |
| maskAllText | boolean | true | Mask all text content. Will pass text content through maskTextFn before sending to server. |
| maskInputFn | (text: string) => string | (text) => '*'.repeat(text.length) | Function to customize how form input values are masked before sending to server. By default, masks values with *. |
| maskInputOptions | Record<string, boolean> | { password: true } | Customize which inputs type to mask. Available <input> types: color, date, datetime-local, email, month, number, range, search, tel, text, time, url, week, textarea, select, password. |
| maskTextClass | string | RegExp | 'sentry-mask' | Mask all elements that match the class name. See Masking above for an example. |
| maskTextFn | (text: string) => string | (text) => '*'.repeat(text.length) | Function to customize how text content is masked before sending to server. By default, masks text with *. |
| maskTextSelector | string | undefined | Mask all elements that match the given DOM selector. See Masking above for an example. |
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/nextjs
- Version:
- 7.34.0
- Repository:
- https://github.com/getsentry/sentry-javascript