@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 @sentry/tracing rrweb

with yarn:

yarn add @sentry/replay @sentry/browser @sentry/replay @sentry/tracing rrweb

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';
import '@sentry/tracing';

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