From 7d2054eda1425e8b9cd1f76d82027b25d8ec0401 Mon Sep 17 00:00:00 2001 From: Ahmad Ibrahim Date: Mon, 23 Jun 2025 13:55:13 -0700 Subject: [PATCH 1/2] error-reporting/backtrace-javascript, browser: add session replay section to readme --- packages/browser/README.md | 57 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/browser/README.md b/packages/browser/README.md index ce95aad5..92a41cbb 100644 --- a/packages/browser/README.md +++ b/packages/browser/README.md @@ -16,6 +16,7 @@ easy, after which you can explore the rich set of Backtrace features. - [Attributes](#attributes) - [File Attachments](#file-attachments) - [Breadcrumbs](#breadcrumbs) + - [Session Replay](#session-replay) - [Application Stability Metrics](#application-stability-metrics) - [Metrics Configuration](#metrics-configuration) - [Metrics Usage](#metrics-usage) @@ -266,6 +267,62 @@ client.breadcrumbs?.info('This is a manual breadcrumb.', { --- +### Session Replay + +The optional `@backtrace/session-replay` module allows you to capture and replay the user's interactions leading up to an error. This provides a video-like context for your error reports, making it much easier to reproduce and debug issues. + +The Session Replay module is designed with privacy as a top priority. By default, it automatically masks all text and input fields to avoid capturing sensitive user data. + +For full details on session replay configuration, sampling, and advanced privacy controls, please see the **[Session Replay Module Documentation](../session-replay/README.md)**. + +#### 1. Install the additional package + +In addition to `@backtrace/browser`, you will also need to install the session replay package. + +```bash +$ npm install @backtrace/session-replay +``` + +#### 2. Add the module to the client + +To enable session replay, you must use the BacktraceClient.builder() and add the BacktraceSessionReplayModule. This replaces the standard BacktraceClient.initialize(). + +```ts +// Import the necessary modules +import { BacktraceClient, BacktraceConfiguration } from '@backtrace/react'; +import { BacktraceSessionReplayModule } from '@backtrace/session-replay'; + +// Configure client options +const options: BacktraceConfiguration = { + name: 'MyWebPage', + version: '1.2.3', + url: 'https://submit.backtrace.io///json', +}; + +// Initialize the client using the builder to add the session replay module +const client = BacktraceClient.builder(options) + .useModule( + new BacktraceSessionReplayModule({ + // Configuration for session replay goes here. + maxEventCount: 100, + privacy: { + blockClass: 'do-not-send', + }, + sampling: { + input: 'last', + } + }), + ) + .build(); + +// The client is now initialized with Session Replay enabled. +// Any errors captured by the client or the ErrorBoundary will now include a session replay. +``` + +When an error is captured, a link to the session replay will be available on the Debugger page for that specific error in the Backtrace UI. + +--- + ### Application Stability Metrics The Backtrace Browser SDK has the ability to send usage Metrics to be viewable in the Backtrace UI. From ff10944e15bcc4d6198f0216648924071decc6bf Mon Sep 17 00:00:00 2001 From: Ahmad Ibrahim Date: Mon, 23 Jun 2025 13:55:34 -0700 Subject: [PATCH 2/2] error-reporting/backtrace-javascript, react: add session replay section to readme --- packages/react/README.md | 57 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/react/README.md b/packages/react/README.md index bd72ff3c..32ac17e6 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -17,6 +17,7 @@ after which you can explore the rich set of Backtrace features. - [Attributes](#attributes) - [File Attachments](#file-attachments) - [Breadcrumbs](#breadcrumbs) + - [Session Replay](#session-replay) - [Application Stability Metrics](#application-stability-metrics) - [Metrics Configuration](#metrics-configuration) - [Metrics Usage](#metrics-usage) @@ -295,6 +296,62 @@ client.breadcrumbs?.info('This is a manual breadcrumb.', { --- +### Session Replay + +The optional `@backtrace/session-replay` module allows you to capture and replay the user's interactions leading up to an error. This provides a video-like context for your error reports, making it much easier to reproduce and debug issues. + +The Session Replay module is designed with privacy as a top priority. By default, it automatically masks all text and input fields to avoid capturing sensitive user data. + +For full details on session replay configuration, sampling, and advanced privacy controls, please see the **[Session Replay Module Documentation](../session-replay/README.md)**. + +#### 1. Install the additional package + +In addition to `@backtrace/react`, you will also need to install the session replay package. + +```bash +$ npm install @backtrace/session-replay +``` + +#### 2. Add the module to the client + +To enable session replay, you must use the BacktraceClient.builder() and add the BacktraceSessionReplayModule. This replaces the standard BacktraceClient.initialize(). + +```ts +// Import the necessary modules +import { BacktraceClient, BacktraceConfiguration } from '@backtrace/react'; +import { BacktraceSessionReplayModule } from '@backtrace/session-replay'; + +// Configure client options +const options: BacktraceConfiguration = { + name: 'MyWebPage', + version: '1.2.3', + url: 'https://submit.backtrace.io///json', +}; + +// Initialize the client using the builder to add the session replay module +const client = BacktraceClient.builder(options) + .useModule( + new BacktraceSessionReplayModule({ + // Configuration for session replay goes here. + maxEventCount: 100, + privacy: { + blockClass: 'do-not-send', + }, + sampling: { + input: 'last', + } + }), + ) + .build(); + +// The client is now initialized with Session Replay enabled. +// Any errors captured by the client or the ErrorBoundary will now include a session replay. +``` + +When an error is captured, a link to the session replay will be available on the Debugger page for that specific error in the Backtrace UI. + +--- + ### Application Stability Metrics The Backtrace React SDK has the ability to send usage Metrics to be viewable in the Backtrace UI.