> ## Documentation Index
> Fetch the complete documentation index at: https://sentrydocs.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Session Replay

> Watch video-like replays of user sessions to debug faster

Session Replay records what users actually did in your app — their clicks, scrolls, page navigations, and network requests — and plays it back as a video-like timeline. When a bug is hard to reproduce from a stack trace alone, a replay lets you watch exactly what happened.

## What Session Replay captures

Sentry's replay recorder captures DOM mutations and user interactions without taking screenshots. Instead it records a structured representation of the page that can be replayed faithfully. For each session you get:

| Tab             | What you see                                                                                    |
| --------------- | ----------------------------------------------------------------------------------------------- |
| **Replay**      | Visual playback of what the user saw, rendered from DOM snapshots and mutations                 |
| **Network**     | All HTTP/fetch/XHR requests, their status codes, and timing                                     |
| **Console**     | `console.log`, `console.warn`, and `console.error` output                                       |
| **Breadcrumbs** | Clicks, navigations, and Sentry events in chronological order                                   |
| **Errors**      | Any Sentry errors that occurred during the session, linked directly to the moment they happened |

## Privacy controls

Sentry masks sensitive data by default:

* All text content on the page is masked (replaced with `*` characters)
* Input fields are blocked (replaced with a placeholder box)
* Images are replaced with a placeholder

You can adjust the masking behavior using the `maskAllText`, `blockAllMedia`, and `mask`/`unmask` / `block`/`unblock` options in the Replay integration. You can also use CSS classes (`sentry-mask`, `sentry-block`, `sentry-unmask`) to control masking on specific elements.

<Warning>
  Review your masking configuration before deploying to production. The defaults are conservative — you may need to explicitly unmask elements that are safe to record.
</Warning>

## Enabling Session Replay

Add the `Replay` integration to your `Sentry.init` call:

```javascript theme={null}
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://your-dsn@sentry.io/project-id",

  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,      // Mask all text content (default: true)
      blockAllMedia: true,    // Replace images and video (default: true)
    }),
  ],

  // Sample 10% of all sessions
  replaysSessionSampleRate: 0.1,

  // Always capture a replay when an error occurs
  replaysOnErrorSampleRate: 1.0,
});
```

## Sampling

Two sampling rates control which sessions Sentry records:

<CardGroup cols={2}>
  <Card title="replaysSessionSampleRate" icon="percentage">
    A number between `0.0` and `1.0`. This fraction of all sessions will be recorded in full, regardless of whether an error occurred. Set to `0` to disable session-based sampling.
  </Card>

  <Card title="replaysOnErrorSampleRate" icon="triangle-exclamation">
    A number between `0.0` and `1.0`. When an error is captured, Sentry uses this rate to decide whether to upload the replay buffer for that session. Set to `1.0` to always capture replays on errors.
  </Card>
</CardGroup>

<Note>
  When `replaysOnErrorSampleRate` is greater than `0`, Sentry keeps a rolling buffer of the session in memory even if `replaysSessionSampleRate` is `0`. If an error occurs, it uploads the buffered data so you get the full session leading up to the error.
</Note>

## Viewing replays

You can find replays in two places:

<Steps>
  <Step title="From an issue">
    Open any JavaScript error in the **Issues** section. If a replay was captured for the session where the error occurred, you'll see a **Replay** tab in the issue detail. Jump directly to the moment the error happened.
  </Step>

  <Step title="From the Replays section">
    Navigate to **Replays** in the left sidebar to browse all captured sessions. Filter by URL, user, error presence, duration, or date range to find the session you're looking for.
  </Step>
</Steps>

## What you can do in the player

The replay player gives you tools to investigate efficiently:

* **Scrub the timeline** — click anywhere on the timeline to jump to that moment
* **Jump to errors** — use the error markers on the timeline to skip directly to when an error occurred
* **Speed controls** — play at 1×, 2×, or 4× speed to move through long sessions quickly
* **Network tab** — see every request, its URL, method, status code, and duration
* **Console tab** — read log output in context with what the user was doing
* **Breadcrumbs tab** — see a structured list of all events: clicks, navigations, XHR requests, and Sentry breadcrumbs

## Supported platforms

Session Replay is available for browser JavaScript. It works with any framework that Sentry supports (React, Vue, Angular, Svelte, plain JS, etc.) via the `@sentry/browser`, `@sentry/react`, `@sentry/vue`, and other browser SDK packages.

<Tip>
  Session Replay requires the `@sentry/browser` SDK at version 7.27.0 or later.
</Tip>