@sentry/replay

What is @sentry/replay?

The @sentry/replay package is designed to capture and replay web application interactions to help in debugging and monitoring. It allows developers to record user sessions, including clicks, inputs, and navigation, which can be replayed to understand user behavior or diagnose issues.

What are @sentry/replay's main functionalities?

Session Recording

This feature enables the recording of user sessions, capturing interactions such as clicks, inputs, and page navigation. The code snippet shows how to initialize Sentry with the Replay integration.

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  integrations: [new Sentry.Replay({})]
});

Replay Events

Allows developers to capture and send replay events to Sentry. This can include a series of user interactions that led to an error or an interesting event.

Sentry.captureReplay({
  url: window.location.href,
  interactions: capturedInteractions
});

Other packages similar to @sentry/replay

rrweb

rrweb stands for 'record and replay the web', which is a tool for recording and replaying users' interactions on the web. It offers similar functionalities to @sentry/replay by capturing user sessions and interactions for replay. However, rrweb is more focused on the recording aspect and can be used independently of error tracking systems.

logrocket

LogRocket is a more comprehensive solution that combines session replay, performance monitoring, and error tracking. It offers similar session replay capabilities to @sentry/replay but is part of a larger suite of tools designed for debugging and monitoring web applications. LogRocket provides detailed insights into users' interactions, network requests, and console logs alongside the replay feature.

README

sentry-replay

This integration is a WIP.

Pre-Requisites

For the sentry-replay integration to work, you must have the Sentry browser SDK package and the rrweb package installed.

Installation

To install the stable version:

with npm:

npm install --save @sentry/browser @sentry/replay

with yarn:

yarn add @sentry/replay @sentry/browser @sentry/replay

Setup

To set up the integration add the following to your Sentry initialization. Several options are supported and passable via the integration constructor. See the rrweb documentation for advice on configuring these values.

import * as Sentry from '@sentry/browser';
import { SentryReplay } from '@sentry/replay';

Sentry.init({
  dsn: '__DSN__',
  integrations: [
    new SentryReplay({
      stickySession: true, // Default is false
      recordingConfig: {
        maskAllInputs: false, // Default is true
      },
    }),
  ],
  // ...
});

Configuration

key	type	default	description
flushMinDelay	number	5000	The minimum time to wait (in ms) before sending the recording payload. The payload is sent if flushMinDelay ms have elapsed between two events.
flushMaxDelay	number	15000	The maximum time to wait (in ms) when sending the recording payload. The payload is sent if events occur at an interval less than flushMinDelay and flushMaxDelay ms have elapsed since the last time a payload was sent.
initialFlushDelay	number	5000	The amount of time to wait (in ms) before sending the initial recording payload. This helps drop recordings where users visit and close the page quickly.
stickySession	boolean	false	Keep track of the user across page loads. Note a single user using multiple tabs will result in multiple sessions. Closing a tab will result in the session being closed as well.
useCompression	boolean	true	Uses WebWorkers (if available) to compress the recording payload before uploading to Sentry.
captureOnlyOnError	boolean	false	Only capture the recording when an error happens.
replaysSamplingRate	number	1.0	The rate at which to sample replays. (1.0 will collect all replays, 0 will collect no replays).
maskAllInputs	boolean	true	Mask all <input> elements
blockClass	string	'sr-block'	Redact all elements with the class name sr-block
ignoreClass	string	'sr-ignore'	Ignores all elements with the class name sr-ignore
maskTextClass	string	'sr-mask'	Mask all elements with the class name sr-ignore