---
title: "Session Replay for Web"
description: "Learn about Session Replay and its video-like reproductions of user interactions, which can help you see when users are frustrated and build a better web experience."
url: https://docs.sentry.io/product/session-replay/web/
---

# Session Replay for Web

Session Replay gives you video-like reproductions of real user sessions, effectively putting [DevTools](https://developer.chrome.com/docs/devtools/overview/) in your production environment. Each replay ties together user interactions, network requests, DOM events, console messages, errors, and traces on a single timeline.

**Key capabilities:**

* **Full session context** — See clicks, navigations, scrolls, and input in relation to network requests, console logs, and DOM mutations.
* **DOM state inspection** — Click on any element in the replay player to inspect the underlying DOM tree, including HTML structure and attributes, at that point in time.
* **Error, trace, and logs correlation** — Replays are linked to errors on the [Issue Details](https://docs.sentry.io/product/issues/issue-details.md) page and slow traces on the [Transaction Summary](https://docs.sentry.io/product/dashboards/sentry-dashboards/transaction-summary.md) page. [Backend errors](https://docs.sentry.io/product/session-replay/web.md#replays-for-backend-errors) are included in the replay timeline, [breadcrumbs](https://docs.sentry.io/product/issues/issue-details/breadcrumbs.md), and error list. You can also find logs as a tab in the replay timeline details panel.
* **User Feedback integration** — Replays automatically attach to [User Feedback](https://docs.sentry.io/product/user-feedback.md) submissions, capturing up to 60 seconds of activity before the user reported the issue. You can watch exactly what the user experienced and read their description side by side.
* **Frustration detection** — [Rage clicks and dead clicks](https://docs.sentry.io/product/issues/issue-details/replay-issues/rage-clicks.md) are surfaced in the replay timeline so you can jump directly to moments of user frustration.
* **AI-powered replay summaries** — Get an automatic play-by-play of what happened during a session without watching the full replay. Requires the **Show Generative AI Features** setting in **Settings > General**.
* **Custom recording control** — Start, stop, and flush replays programmatically based on any application logic: specific users, URLs, feature flags, support widget interactions, or custom events. See [Understanding Sessions](https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions.md) for the full API and examples.

## [What is Session Replay?](https://docs.sentry.io/product/session-replay/web.md#what-is-session-replay)

A session replay is **not** a video recording. It's a video-like reproduction of a user session, built using the [rrweb recording library](https://www.rrweb.io/). Replays are created from snapshots of your web application's DOM state (the browser's in-memory representation of HTML). When each snapshot is played back, you see a recording of what the user did throughout their entire session, including pageloads, refreshes, and navigations.

Because replays capture the actual DOM, you can click on any element in the replay player to inspect its HTML structure and attributes — just like you would with browser DevTools, but for a production session that already happened.

The start of a session replay recording can be triggered by:

* A user session being part of a sampling rate, as controlled by [`replaysSessionSampleRate`](https://docs.sentry.io/platforms/javascript/session-replay.md#sampling). (When a user loads a page, a decision is made whether to sample it or not.)
* An error occurring during a session that's not being recorded. The session is then recorded based on [`replaysOnErrorSampleRate`](https://docs.sentry.io/platforms/javascript/session-replay.md#sampling).
* Manually calling the [`replay.start()`](https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions.md#manually-starting-replay) method.

The end of a session replay recording can be triggered by:

* User inactivity within the tab or page that's being recorded. (It's considered inactivity when a user doesn't click or navigate around the site for more than 15 minutes. Mouse scrolls, mouse movements, and keyboard events don't currently qualify as activity.)
* User closing the tab or page that's being recorded.
* A recording reaching the maximum replay duration limit. (Currently, this is 60 minutes.)
* Manually calling the [`replay.stop()`](https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions.md#manually-stopping-replay) method.

Unlike [sessions](https://docs.sentry.io/product/releases/health.md#session) on the **Releases** page, user sessions in Session Replay can span multiple page loads.

## [Supported SDKs](https://docs.sentry.io/product/session-replay/web.md#supported-sdks)

Session Replay supports all browser-based applications. This includes static websites, single-page applications, and also server-side-rendered. This includes frameworks such as: [Django](https://docs.sentry.io/platforms/python/integrations/django.md), [Spring](https://docs.sentry.io/platforms/java/guides/spring-boot.md), [ASP.NET](https://docs.sentry.io/platforms/dotnet/guides/aspnetcore.md), [Laravel](https://docs.sentry.io/platforms/php/guides/laravel.md), [Express](https://docs.sentry.io/platforms/javascript/guides/express.md) and [Rails](https://docs.sentry.io/platforms/ruby/guides/rails.md). If you don't use `npm` or `yarn`, you can use [our Loader `script` tag](https://docs.sentry.io/platforms/javascript/install/loader.md) on your main HTML template.

The Sentry SDK that records the replay runs on the client's browser, and it's built-in to `@sentry/browser` and our browser framework SDKs:

* [Vanilla JavaScript](https://docs.sentry.io/platforms/javascript/session-replay.md)
* [Angular](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay.md)
* [Astro](https://docs.sentry.io/platforms/javascript/guides/astro/session-replay.md)
* [Capacitor](https://docs.sentry.io/platforms/javascript/guides/capacitor/session-replay.md)
* [Electron](https://docs.sentry.io/platforms/javascript/guides/electron/session-replay.md)
* [Ember](https://docs.sentry.io/platforms/javascript/guides/ember/session-replay.md)
* [Gatsby](https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay.md)
* [Next.js](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay.md)
* [React](https://docs.sentry.io/platforms/javascript/guides/react/session-replay.md)
* [Remix](https://docs.sentry.io/platforms/javascript/guides/remix/session-replay.md)
* [Svelte](https://docs.sentry.io/platforms/javascript/guides/svelte/session-replay.md)
* [SvelteKit](https://docs.sentry.io/platforms/javascript/guides/sveltekit/session-replay.md)
* [Vue](https://docs.sentry.io/platforms/javascript/guides/vue/session-replay.md)

## [Replays for Backend Errors](https://docs.sentry.io/product/session-replay/web.md#replays-for-backend-errors)

Replays are integrated with Sentry's tracing data model, enabling you to see replays associated with backend errors. For these replays, you can view backend errors in the Timeline, the Breadcrumbs and Errors tabs, and other places when you go to the **Replay Details** view. You'll also see a Replays tab and replay previews in the **Issue Details** page for any backend error that has a linked replay.

To see replays for backend errors, you need to have Sentry set up for both your frontend and backend, along with [distributed tracing](https://docs.sentry.io/product/sentry-basics/concepts/tracing.md). This provides end-to-end data connectivity on your APIs, allowing Sentry to link replays to backend endpoints.

Make sure you've set up [trace propagation](https://docs.sentry.io/product/sentry-basics/concepts/tracing.md#trace-propagation) in your backend projects. For example:

```javascript
Sentry.init({
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>";
  tracePropagationTargets: ["https://myproject.org", /^\/api\//],
});
```

Currently, replays for backend errors are supported for the following SDK versions or newer:

* JavaScript (or related framework) [7.51.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.51.0)
* Python [1.26.0](https://github.com/getsentry/sentry-python/releases/tag/1.26.0)
* Node [7.48.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.48.0)
* PHP [3.18.0](https://github.com/getsentry/sentry-php/releases/tag/3.18.0)
* .NET [3.31.0](https://github.com/getsentry/sentry-dotnet/releases/tag/3.31.0)
* Java [6.17.0](https://github.com/getsentry/sentry-java/releases/tag/6.17.0)
* Ruby [5.9.0](https://github.com/getsentry/sentry-ruby/releases/tag/5.9.0)
* Go [0.21.0](https://github.com/getsentry/sentry-go/releases/tag/v0.21.0)

## Pages in this section

- [Replay Performance Overhead](https://docs.sentry.io/product/session-replay/web/performance-overhead.md)