Skip to content

Commit

Permalink
Error Reporting - adding session replay for web
Browse files Browse the repository at this point in the history
Error Reporting will now include a new page for session replay to describe the feature for web integrations.
  • Loading branch information
peter-shao committed Jul 26, 2024
1 parent 5f8e63c commit 5d1ea30
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/error-reporting/platform-integrations/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ Integrate Backtrace in your games and apps across languages and platforms with o
<h2>Other Integrations</h2>
<ul>
<li><a href="/error-reporting/platform-integrations/source-map/">Source Maps</a></li>
<li><a href="/error-reporting/platform-integrations/session-replay/">Session Replay</a></li>
<li><a href="/error-reporting/platform-integrations/apache/">Apache Traffic Server</a></li>
<li><a href="/error-reporting/platform-integrations/minidump/">Minidump</a></li>
<li><a href="/error-reporting/platform-integrations/file-attachments/">File Attachments</a></li>
Expand Down
65 changes: 65 additions & 0 deletions docs/error-reporting/platform-integrations/session-replay.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
id: session-replay
title: Session Replay for Web
sidebar_label: Session Replay
description: Configure session replay in your web applications.
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import useBaseUrl from '@docusaurus/useBaseUrl';

:::note

Session Replay is currently in beta and only available for web applications. Replays are limited during this phase.

:::

Session Replay allows you to capture a visual recreation of user sessions. This simplifies the replication of user errors to determine the root cause. Combining session replays with breadcrumbs and callstacks can give a complete view of the user experience.

## Overview of Session Replay
Session replay works by capturing the DOM state periodically when the user interacts wtih your application. The user session is then recreated when viewing the error in Backtrace. Unlike a video recording, these packages are lightweight and allow for additional processing prior to being sent and stored in Backtrace (i.e. masking for PII considerations). Currently, Backtrace SDK will snip the session around a triggering error, allowing your team to hone in on specific issues.

The Backtrace implementation makes use of [rrweb](https://github.com/rrweb-io/rrweb/blob/master/guide.md).

## Prerequisites
- A Backtrace account ([log in](https://backtrace.io/login) or sign up for a [free trial license](https://backtrace.io/sign-up)).
- Follow the ([JavaScript integration guide](https://docs.saucelabs.com/error-reporting/language-integrations/javascript/)).

## Setting Up Session Replay

### Install the package
```bash
npm install @backtrace/session-replay
```
### Integrate the session replay module

Add the following code to the build the session replay module:

```javascript
import { BacktraceClient, BacktraceConfiguration } from '@backtrace/browser';
import { BacktraceSessionReplayModule } from '@backtrace/session-replay';

// Configure client options
const options: BacktraceConfiguration = {
// Name of the website/application
name: 'MyWebPage',
// Version of the website
version: '1.2.3',
// Submission url
// <universe> is the subdomain of your Backtrace instance (<universe>.backtrace.io)
// <token> can be found in Project Settings/Submission tokens
url: 'https://submit.backtrace.io/<universe>/<token>/json',
};

// Initialize the client with the options
// Make sure to add `useModule` with `BacktraceSessionReplayModule`
const client = BacktraceClient.builder(options)
.useModule(
new BacktraceSessionReplayModule({
maxEventCount: 100,
}),
)
.build();
```
Additional options for event limiting, masking, privacy, and more can be found on [Backtrace github](https://github.com/backtrace-labs/backtrace-javascript/tree/main/packages/session-replay).
1 change: 1 addition & 0 deletions sidebars.js
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ module.exports = {
],
},
'error-reporting/platform-integrations/source-map',
'error-reporting/platform-integrations/session-replay',
'error-reporting/platform-integrations/apache',
'error-reporting/platform-integrations/minidump',
'error-reporting/platform-integrations/file-attachments',
Expand Down

0 comments on commit 5d1ea30

Please sign in to comment.