Configuration

The following options can be configured on the root level of your browser-based Sentry SDK, in init({}):

KeyTypeDefaultDescription
replaysSessionSampleRatenumber0The sample rate for replays that begin recording immediately and last the entirety of the user's session. 1.0 collects all replays, and 0 collects none.
replaysOnErrorSampleRatenumber0The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends. 1.0 captures all sessions with an error, and 0 captures none.

The following can be configured as integration options in replayIntegration({}):

KeyTypeDefaultDescription
stickySessionbooleantrueKeep track of users across page loads. Note, because closing a tab ends the session, a single user using multiple tabs will be recorded as multiple sessions.
mutationLimitnumber10000The upper bound of mutations to process before Session Replay stops recording due to performance impacts. See Mutation Limits
mutationBreadcrumbLimitnumber750The upper bound of mutations to process before Session Replay sends a breadcrumb to warn of large mutations. See Mutation Limits
minReplayDurationnumber5000The length of the replay, in milliseconds, before the SDK should start sending to Sentry. Max value is 15000.
workerUrlstringundefinedA URL for a self-hosted worker for compression Replay data. See Using a Custom Compression Worker to learn more.
networkDetailAllowUrls(string|RegExp)[][]Capture request and response details for XHR and fetch requests that match the given URLs.
networkDetailDenyUrls(string|RegExp)[][]Do not capture request and response details for these URLs. Takes precedence over networkDetailAllowUrls.
networkCaptureBodiesbooleantrueDecide whether to capture request and response bodies for URLs defined in networkDetailAllowUrls.
networkRequestHeadersstring[][]Additional request headers to capture for URLs defined in networkDetailAllowUrls. See Network Details to learn more.
networkResponseHeadersstring[][]Additional response headers to capture for URLs defined in networkDetailAllowUrls. See Network Details to learn more.
beforeAddRecordingEvent(event) => event|nulli => iFilter additional recording events that include console logs and network requests/responses.
beforeErrorSampling(event) => booleani => trueFilter error events which should be skipped for error sampling. Return false if error sampling should be skipped for this error event, or true to sample for this error.
slowClickIgnoreSelectorsstring[][]Ignore slow/rage click detection on elements matching the given CSS selector(s).

We take privacy seriously, so we provide a number of privacy-oriented settings. Learn more about these in our our Session Replay privacy documentation.

If you're working on a static website that's free of personal identifiable or other type of private data, you can opt out of the default text masking and image blocking by configuring the maskAllText and blockAllMedia configuration options respectively:

Copied
Sentry.replayIntegration({
  maskAllText: false,
  blockAllMedia: false,
});

The following is a complete list of options that can be used in replayIntegration({}):

keytypedefaultdescription
maskstring[]['.sentry-mask', '[data-sentry-mask]']Mask all elements that match the given DOM selectors. See Masking section for an example. Note that any configured selectors will be in addition to the defaults.
maskAllTextbooleantrueMask all text content. Will pass text content through maskFn before sending to server.
maskAllInputsbooleantrueMask values of <input> elements. Passes input values through maskFn before sending to server.
blockstring[]['.sentry-block', '[data-sentry-block]']Redact all elements that match the DOM selector(s). See Blocking section for an example. Note that any configured selectors will be in addition to the defaults.
blockAllMediabooleantrueBlock all media elements (img, svg, video, object, picture, embed, map, audio).
ignorestring[]['.sentry-ignore', '[data-sentry-ignore]']Ignores all events on the matching input fields. See Ignoring above for an example.
maskFn(text: string) => string(s) => '*'.repeat(s.length)Function to customize how text content is masked before sending to server. By default, masks text with *.
unblockstring[]['.sentry-unblock', '[data-sentry-unblock]']Don't redact any elements that match the DOM selectors. Used to unblock specific media elements that are blocked with blockAllMedia. This doesn't affect sensitive elements such as password.
unmaskstring[]['.sentry-unmask', '[data-sentry-unmask]']Unmask all elements that match the given DOM selectors. Used to unmask specific elements that are masked with maskAllText.

To learn more about how session sampling works, check out our Default Session Initialization docs.

By default, Replay will capture basic information about all outgoing fetch and XHR requests in your application. This includes the URL, request and response body size, method, and status code. The intention is to limit the chance of collecting private data.

To capture additional information such as request and response headers or bodies, you'll need to opt-in via networkDetailAllowUrls (requires SDK version >= 7.50.0). This will make it possible for you to elect to only add URLs that are safe for capturing bodies and avoid any endpoints that may contain Personal Identifiable Information, (PII).

Any URL matching the given pattern(s) will then be captured with additional details:

Copied
replayIntegration({
  networkDetailAllowUrls: [window.location.origin],
});

If you give us a string, we'll match any URL that contains that string. You can use a regex to handle exact or more complex matches.

Requests to a URL matched by the configured patterns will be enhanced with the request and response body, as well as the following default headers:

  • Content-Type
  • Content-Length
  • Accept

If you want to capture additional headers, you'll have to configure them with the options networkRequestHeaders and networkResponseHeaders, for example:

Copied
replayIntegration({
  networkDetailAllowUrls: [
    window.location.origin,
    "api.example.com",
    /^https:\/\/api\.example\.com/,
  ],
  networkRequestHeaders: ["Cache-Control"],
  networkResponseHeaders: ["Referrer-Policy"],
});

You can use the Sentry SDK to link a user to a session. Read more about it in our Identify Users docs.

Copied
Sentry.setUser({ email: "jane.doe@example.com" });

By default, Session Replay will use an inlined web worker script to compress Replay data before sending it over the network. This drastically reduces the amount of data transferred, improving performance and reducing network overhead. Because compressing data is CPU intensive, we use a web worker to offload this work to a separate thread.

While an inlined worker will work well for most applications, there are two main problems with this:

  1. Since the worker code is inlined, it increases the main bundle size of your application.
  2. Using inline workers can cause CSP violations if your application has a very strict CSP policy. See our CSP docs for more information.

To solve these problems, we provide the ability to use a custom worker script. This allows you to host the worker script on your own domain, and avoid the CSP issues that come with inline workers. Additionally, the worker script can then be removed from the main application bundle and served and cached separately.

Follow these steps in order to use a custom compression worker:

  1. Download the example worker script from our Github repository.
  2. Host this worker script on the same domain as your application. For example, if your application is hosted at https://example.com, you could host the worker script at https://example.com/assets/worker.min.js.
  3. Configure your custom worker script in Replay:
Copied
replayIntegration({
  workerUrl: "/assets/worker.min.js",
});
  1. You can now Tree Shake the default included worker script. If you are using our bundler plugins (version 2.10.0 or later), you can do:
Copied
sentryPlugin({
  // other config
  bundleSizeOptimizations: {
    excludeReplayWorker: true,
  },
});

Since you are hosting this script yourself, you are responsible for keeping it up to date. We recommend that you check for updates to the worker script periodically, and update it as needed. The worker script API is guaranteed to remain stable inside of a major version, so any v7 worker script should be backward and forward compatible with any v7 SDK version. However, we may make improvements or bug fixes to the worker script, which you will miss out on if you don't update it.

Session Replay works by recording incremental DOM changes that occur in your web application. Generally, these changes occur in small batches and cause minimal overhead. However, it can be easy to overlook cases that will cause a large amount of DOM mutations to happen in a single update. An example is a custom dropdown component that has an unbounded list of options to render. This can negatively impact performance without Session Replay and its effects will be magnified with Session Replay enabled. In order to avoid this scenario, Session Replay will stop recording if it detects a large number of mutations (default: 10,000), which can be configured by setting mutationLimit. Additionally, we provide breadcrumbs in the replay to warn you when a large number of mutations are detected (default: 750).

Copied
replayIntegration({
  mutationBreadcrumbLimit: 1000,
  mutationLimit: 1500,
});
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").