Set Up Session Replay

Session Replay helps you get to the root cause of an error or latency issue faster by providing you with a video-like reproduction of what was happening in the user's browser before, during, and after the issue. You can rewind and replay your application's DOM state and see key user interactions, like mouse clicks, scrolls, network requests, and console entries, in a single combined UI inspired by your browser's DevTools.

By default, our Session Replay SDK masks all DOM text content, images, and user input, giving you heightened confidence that no sensitive data will leave the browser. To learn more, see Session Replay Privacy.

Pre-requisites

For the sentry-replay integration to work, you must have the Sentry Capacitor SDK package installed. The minimum version required for the SDK is 0.11.0. If you're on an older version of the SDK, please check the troubleshooting document to help on migration.

Install

Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you're using, such as Angular in this example:

# npm
npm install --save @sentry/capacitor @sentry/angular-ivy

# yarn
yarn add @sentry/capacitor @sentry/angular-ivy

Set Up

To set up the integration, add the following to your Sentry initialization. There are several options you can pass to the integration constructor. See the configuration documentation for more details.

Several options are supported and passable using the integration constructor. See the configuration documentation for more details. To set up the integration, add the following to your Sentry initialization:

import * as Sentry from "@sentry/capacitor";
import { Replay } from "@sentry/replay";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // This sets the sample rate at 10%. You may want this to be 100% while
  // in development, then sample at a lower rate in production.
  replaysSessionSampleRate: 0.1,

  // If the entire session is not sampled, use the below sample rate to sample
  // sessions when an error occurs.
  replaysOnErrorSampleRate: 1.0,

  integrations: [
    replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Session replays with errors, will always be captured with the settings above. You can verify this by adding the following snippet anywhere in your code and running it:

setTimeout(() => {
  throw new Error("Sentry Test Error");
});

PII & Privacy Considerations

Personally identifiable information (PII) and privacy are important considerations when enabling Session Replay. There are multiple ways in which Sentry helps you avoid collecting PII, including:

• Masking, which replaces the text content with something else -- the default behavior being to replace each character with a *.
• Making network request, response bodies, and headers an opt-in feature, because the best way to avoid getting PII into Sentry is by not adding URLs of endpoints that may contain PII.

While we have certain privacy considerations in place, Sentry's Session Replay allows you to set up the privacy configurations that work best for your use case. For example, if you're working on a static website that's free of PII or other types of private data, you can opt out of the default text masking and image blocking settings. To learn more about Session Replay privacy, read our docs.

Content Security Policy (CSP)

Session Replay uses a WebWorker to perform work (for example, compression) off the main UI thread so as not to degrade the performance of your application. Add the below entry to make sure that workers can be loaded:

worker-src 'self' blob:

Safari versions <= 15.4 do not support worker-src, you will need to additionally add an entry for child-src:

child-src 'self' blob:

If you're unable to update your CSP policy to allow inline web workers, you can also use a custom compression worker instead.

User Session

A user session starts when the Session Replay SDK is first loaded and initialized. The session will capture any pageloads, refreshes, or navigations as long as the SDK is re-initialized on the same domain, and in the same browser tab, each time. Sessions continue capturing data until 5 minutes pass without any user interactions or until a maximum of 60 minutes have elapsed. Closing the browser tab will end the session immediately, according to the rules for SessionStorage.

Replay Captures on Errors Only

If you prefer not to record an entire session, you can elect to capture a replay only if an error occurs. In this case, the integration will buffer up to one minute worth of events prior to the error being thrown. It will continue to record the session, following the rules above regarding session life and activity. Read the sampling section for configuration options.

Sampling

Sampling allows you to control how much of your website's traffic will result in a Session Replay. There are two sample rates you can adjust to get the replays relevant to you:

1. replaysSessionSampleRate - The sample rate for replays that begin recording immediately and last the entirety of the user's session.
2. replaysOnErrorSampleRate - The 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.

Sampling begins as soon as a session starts. replaysSessionSampleRate is evaluated first. If it's sampled, the replay recording will begin. Otherwise, replaysOnErrorSampleRate is evaluated and if it's sampled, the integration will begin buffering the replay and will only upload it to Sentry if an error occurs. The remainder of the replay will behave similarly to a whole-session replay.

Error Linking

Errors that happen on the page while a replay is running will be linked to the replay, making it possible to jump between related issues and replays. However, it's possible that in some cases the error count reported on the Replays Details page won't match the actual errors that have been captured. That's because errors can be lost, and while this is uncommon, there are a few reasons why it could happen:

• The replay was rate-limited and couldn't be accepted.
• The replay was deleted by a member of your org.
• There were network errors and the replay wasn't saved.

Verify

While you're testing, we recommend that you set replaysSessionSampleRate to 1.0. This ensures that every user session will be sent to Sentry.

Once testing is complete, we recommend lowering this value in production. We still recommend keeping replaysOnErrorSampleRate set to 1.0.

Next Steps