---
title: "Session Replay"
description: "Learn how to enable Session Replay in your mobile app."
url: https://docs.sentry.io/platforms/react-native/session-replay/
---

# Set Up Session Replay | Sentry for React Native

[Session Replay](https://docs.sentry.io/product/explore/session-replay.md) helps you get to the root cause of an error or latency issue faster by providing you with a reproduction of what was happening in the user's device before, during, and after the issue. You can rewind and replay your application's state and see key user interactions, like taps, swipes, network requests, and console entries, in a single UI.

By default, our Session Replay SDK masks all text content, images, and user input, giving you heightened confidence that no sensitive data will leave the device. To learn more, see [product docs](https://docs.sentry.io/product/explore/session-replay.md).

**Potential masking issues introduced when using Apple's Liquid Glass rendering in iOS 26.0**

Due to potential masking issues introduced by Apple's Liquid Glass rendering changes in iOS 26.0 we recommend that you thoroughly test your application before enabling Session Replay on iOS 26+ to prevent potential PII leaks. [Please refer to our iOS documentation for more details on the issue](https://docs.sentry.io/platforms/apple/guides/ios/session-replay.md) and follow the progress on fixing masking for iOS 26.0 (Liquid Glass) in [GitHub issue #6390](https://github.com/getsentry/sentry-cocoa/issues/6390)

## [Pre-requisites](https://docs.sentry.io/platforms/react-native/session-replay.md#pre-requisites)

Make sure your Sentry React Native SDK version is at least 6.5.0.

## [Install](https://docs.sentry.io/platforms/react-native/session-replay.md#install)

If you already have the SDK installed, you can update it to the latest version with:

```bash
npm install @sentry/react-native --save
```

## [Set Up](https://docs.sentry.io/platforms/react-native/session-replay.md#set-up)

To set up the integration, add the following to your Sentry initialization.

```javascript
import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.mobileReplayIntegration()],
});
```

## [Verify](https://docs.sentry.io/platforms/react-native/session-replay.md#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`.

## [User Session](https://docs.sentry.io/platforms/react-native/session-replay.md#user-session)

A user session starts when the Sentry SDK is initialized or when the application enters the foreground. The session will capture screen transitions, navigations, touches and other events until the application is sent to the background. If the application is brought back to the foreground within 30 seconds (default), the same `replay_id` will be used and the session will continue.

The session will be terminated if the application has spent in the background more than 30 seconds or when the maximum duration of 60 minutes is reached. You can adjust the [session tracking interval](https://docs.sentry.io/platforms/react-native/configuration/releases.md#sessions) to extend or shorten the duration of a single replay, depending on your needs. Note that if the application exits abnormally while running in the background, the session will also be terminated.

### [Replay Captures on Errors Only](https://docs.sentry.io/platforms/react-native/session-replay.md#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](https://docs.sentry.io/platforms/react-native/session-replay.md#sampling) section for configuration options.

## [Sampling](https://docs.sentry.io/platforms/react-native/session-replay.md#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.

### [Ignore Certain Errors from Error Sampling](https://docs.sentry.io/platforms/react-native/session-replay.md#ignore-certain-errors-from-error-sampling)

Once you've enabled `replaysOnErrorSampleRate`, you can further customize which errors should trigger a replay capture by using the `beforeErrorSampling` callback. This is useful if you want to capture replays only for unhandled errors, or exclude certain error types from replay capture.

The `beforeErrorSampling` callback is called when an error occurs and receives the event and hint as arguments. Returning `false` will prevent the replay from being captured for that specific error.

```javascript
import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.mobileReplayIntegration({
      beforeErrorSampling: (event, hint) => {
        // Only capture replays for unhandled errors
        const isHandled = event.exception?.values?.some(
          (exception) => exception.mechanism?.handled === true,
        );
        return !isHandled;
      },
    }),
  ],
});
```

## [Privacy](https://docs.sentry.io/platforms/react-native/session-replay.md#privacy)

The SDK is recording and aggressively masking all text, images, and webviews by default. If your app has any sensitive data, you should only turn the default masking off after explicitly masking out any sensitive data, using the APIs described below. However, if you're working on a mobile app that doesn't contain any PII or private data, you can opt out of the default text and image-masking settings. To learn more about Session Replay privacy, [read our docs](https://docs.sentry.io/platforms/react-native/session-replay/privacy.md).

If you are manually initializing native SDKs before JS, use Sentry React Native SDK version [6.15.1](https://github.com/getsentry/sentry-react-native/releases/tag/6.15.1) or newer (includes Sentry Cocoa SDK version [8.52.1](https://github.com/getsentry/sentry-cocoa/releases/tag/8.52.1)). For more details, please, see [GH-4853](https://github.com/getsentry/sentry-react-native/issues/4853).

To disable redaction altogether (not to be used on applications with sensitive data):

```javascript
integrations: [
  // You can pass options to the mobileReplayIntegration function during init:
  Sentry.mobileReplayIntegration({
    maskAllText: false,
    maskAllImages: false,
    maskAllVectors: false,
  }),
];
```

If you encounter any data not being redacted with the default settings, please let us know through a [GitHub issue](https://github.com/getsentry/sentry-react-native/issues/new?assignees=\&labels=Platform%3A+React-Native%2CType%3A+%F0%9F%AA%B2+Bug\&projects=\&template=BUG_REPORT.md).

### [Screenshot Strategy (Android only)](https://docs.sentry.io/platforms/react-native/session-replay.md#screenshot-strategy-android-only)

*Available in version 7.5.0 of the React Native SDK*

The SDK offers two strategies for recording replays on Android: `PixelCopy` and `Canvas`.

`PixelCopy` uses Android's [PixelCopy](https://developer.android.com/reference/android/view/PixelCopy) API to capture screenshots of the current screen and takes a snapshot of the view hierarchy within the same frame. The view hierarchy is then used to find the position of controls such as text boxes, images, labels, and buttons and mask them with a block that's drawn over these controls. This strategy has slightly lower performance overhead but may result in masking misalignments due to the asynchronous nature of the PixelCopy API. We recommend using this strategy for apps that do not have strict PII requirements or do not require masking functionality.

`Canvas` uses Android's custom [Canvas](https://developer.android.com/reference/android/graphics/Canvas) API to redraw the screen contents onto a bitmap, masking all `drawText` and `drawBitmap` operations in the process to produce a masked screenshot. This strategy has a slightly higher performance overhead but provides more reliable masking. We recommend using this strategy for apps with strict PII requirements.

The `Canvas` screenshot strategy is currently experimental and does **not** support any masking options. When the screenshot strategy is set to `Canvas`, it will **always** mask all texts, input fields and images, disregarding any masking options set. If you need more flexibility with masking, switch back to `PixelCopy`.

You can change the strategy as follows:

```javascript
integrations: [
  // You can pass options to the mobileReplayIntegration function during init:
  Sentry.mobileReplayIntegration({
    screenshotStrategy: "canvas", // or 'pixelCopy' (default)
  }),
];
```

## [React Component Names](https://docs.sentry.io/platforms/react-native/session-replay.md#react-component-names)

Sentry helps you capture your React components and unlock additional insights in your application. You can set it up to use React component names.

So instead of looking at this:

```html
View > Touchable > View > Text
```

You can also see exactly which React component was used, like:

```html
MyCard (View, MyCard.ts) > MyButton (Touchable, MyCard.ts) > View > Text
```

To add React Component Names use `annotateReactComponents` in `metro.config.js`.

```js
const { getDefaultConfig } = require("@react-native/metro-config");
const { withSentryConfig } = require("@sentry/react-native/metro");
module.exports = withSentryConfig(getDefaultConfig(__dirname), {
  annotateReactComponents: true,
});
```

## [Error Linking](https://docs.sentry.io/platforms/react-native/session-replay.md#error-linking)

Errors that happen 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.

## [Troubleshooting](https://docs.sentry.io/platforms/react-native/session-replay.md#troubleshooting)

### [Crashes During View Hierarchy Traversal on iOS](https://docs.sentry.io/platforms/react-native/session-replay.md#crashes-during-view-hierarchy-traversal-on-ios)

*Supported in React Native SDK v7.9.0 and later*

When capturing session replays on iOS, the SDK traverses the view hierarchy to capture screenshots and view information. Some view hierarchies may contain problematic views that can cause crashes during traversal. You can prevent these crashes by filtering which views are included or excluded from traversal. Use `includedViewClasses` to only traverse specific view classes (only views that are instances of these classes or their subclasses will be traversed), or `excludedViewClasses` to skip problematic view classes (views of these classes or their subclasses will be skipped entirely, including all their children). If both `includedViewClasses` and `excludedViewClasses` are set, `excludedViewClasses` takes precedence: views matching excluded classes won't be traversed even if they match an included class.

```javascript
import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.mobileReplayIntegration({
      includedViewClasses: ["UILabel", "UIView", "MyCustomView"],
      excludedViewClasses: ["WKWebView", "UIWebView"],
    }),
  ],
});
```

For more information, see the [Ignore View Types from Subtree Traversal](https://docs.sentry.io/platforms/apple/guides/ios/session-replay/customredact.md#ignore-view-types-from-subtree-traversal) section in the iOS documentation.

## Pages in this section

- [Privacy](https://docs.sentry.io/platforms/react-native/session-replay/privacy.md)
- [Performance Overhead](https://docs.sentry.io/platforms/react-native/session-replay/performance-overhead.md)