Skip to content

Commit c93f605

Browse files
authored
docs(replay): Update replay README (#6398)
1 parent 682efa5 commit c93f605

File tree

1 file changed

+58
-28
lines changed

1 file changed

+58
-28
lines changed

packages/replay/README.md

Lines changed: 58 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
# sentry-replay
1+
# Sentry Session Replay
22

33
Note: Session Replay is currently in beta.
44

55
## Pre-requisites
66

7-
For the sentry-replay integration to work, you must have the [Sentry browser SDK package](https://www.npmjs.com/package/@sentry/browser), or an equivalent framework SDK (e.g. [@sentry/react](https://www.npmjs.com/package/@sentry/react)) installed. The minimum version required for the SDK is `7.x`.
7+
For the sentry-replay integration to work, you must have the [Sentry browser SDK package](https://www.npmjs.com/package/@sentry/browser), or an equivalent framework SDK (e.g. [@sentry/react](https://www.npmjs.com/package/@sentry/react)) installed. The minimum version required for the SDK is `7.23.0`.
88

9+
Make sure to use the exact same version of `@sentry/replay` as your other Sentry package(s), e.g. `@sentry/browser` or `@sentry/react`.
910

1011
`@sentry/replay` requires Node 12+, and browsers newer than IE11.
1112

@@ -34,27 +35,21 @@ import { Replay } from '@sentry/replay';
3435

3536
Sentry.init({
3637
dsn: '__DSN__',
38+
39+
// This sets the sample rate to be 10%. You may want this to be 100% while
40+
// in development and sample at a lower rate in production
41+
replaysSampleRate: 0.1,
42+
43+
// If the entire session is not sampled, use the below sample rate to sample
44+
// sessions when an error occurs.
45+
replaysOnErrorSampleRate: 1.0,
46+
3747
integrations: [
3848
new Replay({
39-
// This sets the sample rate to be 10%. You may want this to be 100% while
40-
// in development and sample at a lower rate in production
41-
sessionSampleRate: 0.1,
42-
43-
// If the entire session is not sampled, use the below sample rate to sample
44-
// sessions when an error occurs.
45-
errorSampleRate: 1.0,
46-
47-
// Mask all text content with asterisks (*). Passes text
48-
// content through to `maskTextFn` before sending to server.
49-
//
50-
// Defaults to true, uncomment to change
51-
// maskAllText: true,
52-
53-
// Block all media elements (img, svg, video, object,
54-
// picture, embed, map, audio)
55-
//
56-
// Defaults to true, uncomment to change
57-
// blockAllMedia: true,
49+
// Additional SDK configuration goes in here, for example:
50+
maskAllText: true,
51+
blockAllMedia: true
52+
// See below for all available options
5853
})
5954
],
6055
// ...
@@ -96,24 +91,37 @@ Alternatively, rather than recording an entire session, you can capture a replay
9691

9792
Sampling allows you to control how much of your website's traffic will result in a Session Replay. There are two sample rates you can adjust to get the replays more relevant to your interests:
9893

99-
- `sessionSampleRate` - The sample rate for replays that begin recording immediately and last the entirety of the user's session.
100-
- `errorSampleRate` - The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends.
94+
- `replaysSampleRate` - The sample rate for replays that begin recording immediately and last the entirety of the user's session.
95+
- `replaysOnErrorSampleRate` - The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends.
10196

102-
Sampling occurs when the session is first started. `sessionSampleRate` is evaluated first. If it is sampled, then the replay recording begins. Otherwise, `errorSampleRate` is evaluated and if it is sampled, the integration will begin buffering the replay and will only upload a replay to Sentry when an error occurs. The remainder of the replay will behave similarly to a whole-session replay.
97+
Sampling occurs when the session is first started. `replaysSampleRate` is evaluated first. If it is sampled, then the replay recording begins. Otherwise, `replaysOnErrorSampleRate` is evaluated and if it is sampled, the integration will begin buffering the replay and will only upload a replay to Sentry when an error occurs. The remainder of the replay will behave similarly to a whole-session replay.
10398

10499

105100
## Configuration
106101

107-
### General Configuration
102+
### SDK Configuration
103+
104+
The following options can be configured on the root level of your browser-based Sentry SDK, in `init({})`:
105+
106+
107+
| key | type | default | description |
108+
| ------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
109+
| replaysSampleRate | number | `0.1` | The sample rate for replays that begin recording immediately and last the entirety of the user's session. 1.0 will collect all replays, 0 will collect no replays. |
110+
| replaysOnErrorSampleRate | number | `1.0` |The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends. 1.0 capturing all sessions with an error, and 0 capturing none.
111+
112+
### General Integration Configuration
113+
114+
The following options can be configured as options to the integration, in `new Replay({})`:
108115

109116
| key | type | default | description |
110117
| ------------------- | ------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
111-
| sessionSampleRate | number | `0.1` | The sample rate for all sessions, which will capture the entirety from when a user begins a session until the session ends. (1.0 will collect all replays, 0 will collect no replays) |
112-
| errorSampleRate | number | `1.0` | If a session isn't already being recorded via `sessionSampleRate`, based on `errorSampleRate` the SDK will send the captured replay when an error occurs. (1.0 capturing all sessions with an error, and 0 capturing none). |
113118
| stickySession | boolean | `true` | 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. |
114119

120+
115121
### Privacy Configuration
116122

123+
The following options can be configured as options to the integration, in `new Replay({})`:
124+
117125
| key | type | default | description |
118126
| ---------------- | ------------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
119127
| maskAllText | boolean | `true` | Mask _all_ text content. Will pass text content through `maskTextFn` before sending to server. |
@@ -126,16 +134,30 @@ Sampling occurs when the session is first started. `sessionSampleRate` is evalua
126134
| blockSelector | string | `'[data-sentry-block]'` | Redact all elements that match the DOM selector. See [privacy](#blocking) section for an example. |
127135
| ignoreClass | string \| RegExp | `'sentry-ignore'` | Ignores all events on the matching input field. See [privacy](#ignoring) section for an example. |
128136
| maskTextClass | string \| RegExp | `'sentry-mask'` | Mask all elements that match the class name. See [privacy](#masking) section for an example. |
137+
| maskTextSelector | string | `undefined` | Mask all elements that match the given DOM selector. See [privacy](#masking) section for an example. |
129138

130139
### Optimization Configuration
131140

141+
The following options can be configured as options to the integration, in `new Replay({})`:
142+
132143
| key | type | default | description |
133144
| ---------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
134145
| collectFonts | boolean | `false` | Should collect fonts used on the website |
135146
| inlineImages | boolean | `false` | Should inline `<image>` content |
136147
| inlineStylesheet | boolean | `true` | Should inline stylesheets used in the recording |
137148
| recordCanvas | boolean | `false` | Should record `<canvas>` elements |
138-
| slimDOMOptions | Record<string, boolean> | `{}` | Remove unnecessary parts of the DOM <br /> Available keys: `script, comment, headFavicon, headWhitespace, headMetaDescKeywords, headMetaSocial, headMetaRobots, headMetaHttpEquiv, headMetaAuthorship, headMetaVerification` |
149+
150+
151+
### rrweb Configuration
152+
153+
In addition to the options described above, you can also directly pass configuration to [rrweb](https://github.com/rrweb-io/rrweb/blob/rrweb%401.1.3/guide.md), which is the underlying library used to make the recordings:
154+
155+
```js
156+
new Replay({
157+
// any further configuration here is passed directly to rrweb
158+
});
159+
```
160+
139161

140162
## Privacy
141163
There are several ways to deal with PII. By default, the integration will mask all text content with `*` and block all media elements (`img, svg, video, object, picture, embed, map, audio`). This can be disabled by setting `maskAllText` to `false`. It is also possible to add the following CSS classes to specific DOM elements to prevent recording its contents: `sentry-block`, `sentry-ignore`, and `sentry-mask`. The following sections will show examples of how content is handled by the differing methods.
@@ -153,3 +175,11 @@ Ignoring only applies to form inputs. Events will be ignored on the input elemen
153175

154176
https://user-images.githubusercontent.com/79684/192815134-a6451c3f-d3cb-455f-a699-7c3fe04d0a2e.mov
155177

178+
## Error Linking
179+
180+
Currently, errors that happen on the page while a replay is running are linked to the Replay,
181+
making it as easy as possible to jump between related issues/replays.
182+
However, please note that it is _possible_ that the error count reported on the Replay Detail page
183+
does not match the actual errors that have been captured.
184+
The reason for that is that errors _can_ be lost, e.g. a network request fails, or similar.
185+
This should not happen to often, but be aware that it is theoretically possible.

0 commit comments

Comments
 (0)