Session Replay for debugging

Debug production issues faster with replays that show exactly what the user experienced — not just the error, but everything leading up to it. Privacy controls keep sensitive data out by default.

Try Sentry for Free Get a Demo

Sentry Session Replay showing a masked checkout form session, with dead clicks, rage clicks, and an error flagged in the activity timeline.

Debug with context-connected replays

Watch a reproduction of user actions alongside a stream of relevant context: web vitals, console output, logs, network calls, errors, and traces. When replays are tied to errors, they appear directly in issue details and include any user feedback.

Read the docs

Protect your users' privacy

See what your users see without sacrificing their privacy. By default, all text, inputs, and media are masked before data leaves the user's browser. Additional server-side scrubbing, custom masking rules, and element-level controls let you decide exactly what gets recorded.

Learn more

Debug mobile issues with device context

Understand exactly what the user was experiencing when something went wrong. Battery level, device orientation, and connectivity show up alongside every mobile session replay.

Read the Docs

How Sentry Helps

Connected to AI

Every replay comes with an AI summary out of the box. Use Seer Agent to search for sessions by behavior, page, or any pattern. Plug replay context into your existing AI tools via MCP.

Connected to errors and performance issues

Configure Session Replay to show up in issue details. No hunting required.

Private by Default

By default, the Session Replay SDK masks all text content and blocks all media elements before they're sent to the server.

Hydration error diff tool

See what's not loading in React, with side-by-side and slider comparisons.

Rage Click & Dead Click detection

Using Session Replay surfaces the unresponsive elements frustrating your users as trackable issues.

Connect replays to user feedback

See user feedback pop up within session replays, and see replays in user feedback details.

Session Replay has been instrumental in helping us resolve hydration errors. With Replay, we can visually see the jankiness of the page and pinpoint which components were impacted, saving us hours of manual debugging.

Laszlo Gaal

Fullstack JavaScript Engineer,

Lablab.ai

I have been using Session Replay in a few of my company's apps and it is a really great feature! Not only has it helped me and my team to be more efficient on resolving very oddly-specific issues and things related to UI, but also has helped me spot issues with non-error sessions as well.

John Victor

Fullstack Software Developer,

Jornadayu

Getting started with Sentry is simple

We support every technology (except the ones we don't).
Get started with just a few lines of code.

Install

The Replay integration is already included in your browser or framework SDK NPM packages. If you're using CDN bundles instead of NPM packages, you need to load the Replay integration CDN bundle in addition to your browser bundle:

Shell

npm install --save @sentry/browser

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.

JavaScript

// import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser
import * as Sentry from "@sentry/browser";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

Shell

# Angular 12 and newer:
npm install --save @sentry/angular-ivy

# Angular 10 and 11:
npm install --save @sentry/angular

Angular Version Compatibility

Because of the way Angular libraries are compiled, you need to use a specific version of the Sentry SDK for each corresponding version of Angular as shown below:

Angular Version	Recommended Sentry SDK
12 and newer	`@sentry/angular-ivy`
10, 11	`@sentry/angular`

Set Up

JavaScript

import * as Sentry from "@sentry/angular-ivy";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Sentry Astro SDK.

Shell

npx astro add @sentry/astro

Set Up

Session replay is enabled by default if you use the SDK configuration in your astro.config.mjs file.

You can customize Replay sample rates like so:

JavaScript

import { defineConfig } from "astro/config";
import sentry from "@sentry/astro";

export default defineConfig({
  integrations: [
    sentry({
      dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
      replaysSessionSampleRate: 0.2, // defaults to 0.1
      replaysOnErrorSampleRate: 1.0, // defaults to 1.0
    }),
  ],
});

If you have a custom SDK configuration file for the client side (sentry.client.config.js), add the Sentry Replay integration:

JavaScript

import * as sentry from "@sentry/astro";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.replayIntegration()],
});

Install

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

Shell

# npm
npm install --save @sentry/capacitor @sentry/vue

# yarn
yarn add @sentry/capacitor @sentry/vue

Set Up

JavaScript

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,
    }),
  ],
});

Install

Shell

npm install --save @sentry/electron

Set Up

JavaScript

import * as Sentry from "@sentry/electron/renderer";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

Shell

# ember-cli
ember install @sentry/ember

Set Up

JavaScript

import * as Sentry from "@sentry/ember";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Gatsby SDK package.

Shell

npm install --save @sentry/gatsby

Set Up

JavaScript

import * as Sentry from "@sentry/gatsby";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard:

Shell

npx @sentry/wizard@latest -i nextjs

Set Up

On your client-side NextJS app, add:

JavaScript

import * as Sentry from "@sentry/nextjs";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the React SDK package.

Shell

npm install --save @sentry/react

Set Up

JavaScript

import * as Sentry from "@sentry/react";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard:

Shell

npx @sentry/wizard@latest -i remix

The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you:

create two files in the root directory of your project, entry.client.tsx and entry.server.tsx (if they don't already exist).
add the default Sentry.init() for the client in entry.client.tsx and the server in entry.server.tsx.
create .sentryclirc with an auth token to upload source maps (this file is automatically added to .gitignore).
adjust your build script in package.json to automatically upload source maps to Sentry when you build your application.
add an example page to your app to verify your Sentry setup

After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. You can also manually capture errors.

Set Up

On your client-side Remix app, add:

JavaScript

import * as Sentry from "@sentry/remix";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Svelte SDK package.

Shell

npm install --save @sentry/svelte

Set Up

JavaScript

import * as Sentry from "@sentry/svelte";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Sentry SDK. We recommend installing the SDK by running our installation wizard in the root directory of your project:

Shell

npx @sentry/wizard@latest -i sveltekit

The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you:

create or update SvelteKit files with the default Sentry configuration:
- hooks.(client|server).js to initialize the SDK and instrument SvelteKit's hooks
- vite.config.js to add source maps upload and auto-instrumentation via Vite plugins.
create a .sentryclirc file with an auth token to upload source maps (this file is automatically added to .gitignore)
add an example page to your app to verify your Sentry setup

After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. You can also manually capture errors.

Set Up

On your client-side SvelteKit app, add:

JavaScript

import * as Sentry from "@sentry/sveltekit";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Vue SDK package.

Shell

npm install --save @sentry/vue

Set Up

JavaScript

import * as Sentry from "@sentry/vue";

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

  // This sets the sample rate to be 10%. You may want this to be 100% while
  // in development and 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: [
    Sentry.replayIntegration({
      // Additional SDK configuration goes in here, for example:
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Install

The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard:

Shell

npm install @sentry/react-native --save

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: "https://examplePublicKey@o0.ingest.sentry.io/0",
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
  integrations: [Sentry.mobileReplayIntegration()],
});

Install

The easiest way to update through the Sentry Android Gradle plugin to your app module's build.gradle file.

Kotlin

plugins {
  id("com.android.application")
  id("io.sentry.android.gradle") version "4.14.1"
}

If you have the SDK installed without the Sentry Gradle Plugin, you can update the version directly in the build.gradle through:

Kotlin

dependencies {
    implementation("io.sentry:sentry-android:7.20.0")
}

Set Up

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

Kotlin

SentryAndroid.init(context) { options ->
  options.dsn = "https://examplePublicKey@o0.ingest.sentry.io/0"
  options.isDebug = true

  options.sessionReplay.onErrorSampleRate = 1.0
  options.sessionReplay.sessionSampleRate = 0.1
}

Install

The easiest way to update through the Sentry iOS CocoaPods file.

Swift

.package(url: "https://github.com/getsentry/sentry-cocoa", from: "8.43.0"),

Set Up

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

Swift

SentrySDK.start(configureOptions: { options in
  options.dsn = "https://examplePublicKey@o0.ingest.sentry.io/0"
  options.debug = true

  options.sessionReplay.onErrorSampleRate = 1.0
  options.sessionReplay.sessionSampleRate = 0.1
})

Prerequisites

Make sure your Sentry Flutter SDK version is at least 8.9.0, which is required for Session Replay. You can update your pubspec.yaml to the matching version:

YAML

dependencies:
  sentry_flutter: ^8.9.0

Install

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

Dart

await SentryFlutter.init((options) {
  ...
  options.experimental.replay.sessionSampleRate = 1.0;
  options.experimental.replay.onErrorSampleRate = 1.0;
});

Session Replay supports all browser-based applications. This includes static websites, single-page-applications and also server-side-rendered, that includes frameworks such as: Django, Spring, ASP.NET, Laravel, Express and Rails.

This also include mobile frameworks such as: React Native, Android, iOS, and Flutter.

FAQs

Sentry’s Session Replay provides a video-like reproduction of user interactions on a web or mobile app, giving developers the details they need to resolve errors and performance issues faster. All user interactions - including page visits, mouse movements, clicks, and scrolls - are captured, helping developers connect the dots between a known issue and how a user experienced it in the UI.

Session Replay is available for web-based and mobile applications. It supports all web applications whether it’s static or dynamic, server-side rendered or single-page applications.

It is built to work with @sentry/browser, and our browser framework SDKs:

Vanilla JavaScript
Angular
Capacitor
Electron
Ember
Gatsby
Next.js
React
Remix
Solid
Svelte
Vue This means Session Replay is supported on server-side rendered Web applications such as Express, Laravel, Rails, Django, ASP.NET, Spring Boot and others. We recommend creating a separate project in Sentry to track frontend errors from your backend. And adding Session Replay to your frontend via npm, or using the loader.

Session Replay for mobile supports the following SDKs:

Session Replay has minimal impact on the performance on your web application. We employ standard optimizations such as data compression, which is performed in a web worker outside of the browser’s UI thread in such a way that minimizes impact on your application. You can measure the overhead of Session Replay on your application without deploying to production by following these instructions.

You will be able to set up Session Replay with only a few lines of code. Your existing @sentry/browser basic setup + DSN can be used for configuration.

We offer a range of privacy controls to ensure that no sensitive user information leaves the browser. By default, our privacy configuration is very aggressive and masks all text and images, but you can – for example – choose to just mask user input text. More on that can be found in our documentation. We also provide server-side scrubbing to additionally filter on the server in case anything slips by. Additionally, we offer a self-serve deletion capability of individual replays in the UI. Session Replay adheres to the same security standards and is subject to the same compliance requirements as all of our software. Please see our Security page for further details.

Please check out our pricing page for details.

Of course we have more content

Get monthly product updates from Sentry

Sign up for our newsletter.

And yes, it really is monthly. Ok, maybe the occasional twice a month, but for sure not like one of those daily ones that you just tune out after a while.

Fix It

Get started with the only application monitoring platform that empowers developers to fix application problems without compromising on velocity.

Try Sentry for Free Get a Demo

Solutions

Products

Products

AI Debugging

AI Debugging

Integrations

Integrations

Learn

Learn

Support

Support

Hang out with us

Hang out with us

Bi-weekly Intro to Sentry Demo

Session Replay for debugging

Debug with context-connected replays

Debug with context-connected replays

Protect your users' privacy

Protect your users' privacy

Debug mobile issues with device context

Debug mobile issues with device context

How Sentry Helps

Connected to AI

Connected to errors and performance issues

Private by Default

Hydration error diff tool

Rage Click & Dead Click detection

Connect replays to user feedback

Getting started with Sentry is simple

Install

Set Up

Install

Angular Version Compatibility

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Install

Set Up

Prerequisites

Install

FAQs

What is Session Replay

Which platforms does Session Replay support?

What is the performance ovehead of Session Replay?

Is Session Replay easy to set up?

How do you protect user data?

How much does Session Replay cost?

Of course we have more content

Common NextJS errors

Debugging context

Reproduce Errors Without User Feedback

Get monthly product updates from Sentry

Sign up for our newsletter.

Fix It