Session Replay
Get to the root cause of an issue faster by watching replays of real user sessions with best-in-class privacy controls. Understand when, where, and how an error is impacting your website or mobile app without having to repro it yourself, talk to a customer, or expose sensitive data.
Visual Debugging for Developers
Navigate your application’s console output, network calls, and even watch reproductions of user actions. Get the insights and context that matters, right inside Sentry.
Lock down your debugging experience without sacrificing user privacy with a range of privacy controls to ensure no sensitive user information leaves your users device.
Maintain a 5 star mobile app experience by getting device-level insight into a given user session including battery level, device orientation, and connectivity.
How Sentry helps
Private by Default
Sessions prioritize user privacy.
Associated Errors and Performance
Link replays to error and performance issues.
Hydration Error Diff Tool (EA)
Pinpoint hydration errors through session replays.
Rage & Dead Click Detection
Identify unresponsive elements users engage with.
User Feedback
Collect direct user feedback on issues.
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.
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.
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:
npm install --save @sentry/browserSet 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.
// 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
# Angular 12 and newer:
npm install --save @sentry/angular-ivy
# Angular 10 and 11:
npm install --save @sentry/angularAngular 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
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.
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.
npx astro add @sentry/astroSet 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.
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:
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:
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:
# npm
npm install --save @sentry/capacitor @sentry/vue
# yarn
yarn add @sentry/capacitor @sentry/vue
Set Up
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
npm install --save @sentry/electronSet 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.
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
# ember-cli
ember install @sentry/emberSet 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.
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.
npm install --save @sentry/gatsbySet 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.
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:
npx @sentry/wizard@latest -i nextjsSet 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.
On your client-side NextJS app, add:
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.
npm install --save @sentry/reactSet 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.
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:
npx @sentry/wizard@latest -i remixThe 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.tsxandentry.server.tsx(if they don't already exist). - add the default
Sentry.init()for the client inentry.client.tsxand the server inentry.server.tsx. - create
.sentryclircwith an auth token to upload source maps (this file is automatically added to.gitignore). - adjust your
buildscript inpackage.jsonto 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
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.
On your client-side Remix app, add:
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.
npm install --save @sentry/svelteSet 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.
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:
npx @sentry/wizard@latest -i sveltekitThe 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).jsto initialize the SDK and instrument SvelteKit's hooksvite.config.jsto add source maps upload and auto-instrumentation via Vite plugins.
- create a
.sentryclircfile 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
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.
On your client-side SvelteKit app, add:
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.
npm install --save @sentry/vueSet 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.
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:
npm install @sentry/react-native --saveSet Up
To set up the integration, add the following to your Sentry initialization.
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.
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:
dependencies {
implementation("io.sentry:sentry-android:7.20.0")
}Set Up
To set up the integration, add the following to your Sentry initialization.
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.
.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.
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:
dependencies:
sentry_flutter: ^8.9.0Install
To set up the integration, add the following to your Sentry initialization:
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:
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.