diff --git a/src/platform-includes/session-replay/setup-session-replay/javascript.mdx b/src/platform-includes/session-replay/setup-session-replay/javascript.mdx index 001ed7246df840..e8072ad74c2fca 100644 --- a/src/platform-includes/session-replay/setup-session-replay/javascript.mdx +++ b/src/platform-includes/session-replay/setup-session-replay/javascript.mdx @@ -1,4 +1,4 @@ -To set up the integration, add the following to your Sentry initialization. Several options are supported and passable via the integration constructor. See the [configuration sections](/platforms/javascript/session-replay/custom-instrumentation/) for more details. +To set up the integration, add the following to your Sentry initialization. Several options are supported and passable via the integration constructor. See the [configuration sections](/platforms/javascript/session-replay/) for more details. ```javascript {tabTitle: ESM} // import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser diff --git a/src/platforms/javascript/common/session-replay/custom-instrumentation/general-configuration.mdx b/src/platforms/javascript/common/session-replay/configuration.mdx similarity index 78% rename from src/platforms/javascript/common/session-replay/custom-instrumentation/general-configuration.mdx rename to src/platforms/javascript/common/session-replay/configuration.mdx index b679e73fbec38b..c3f70ed12ffea9 100644 --- a/src/platforms/javascript/common/session-replay/custom-instrumentation/general-configuration.mdx +++ b/src/platforms/javascript/common/session-replay/configuration.mdx @@ -1,16 +1,6 @@ --- -title: General Configuration +title: Configuration sidebar_order: 410 -supported: - - javascript - - javascript.angular - - javascript.ember - - javascript.gatsby - - javascript.nextjs - - javascript.react - - javascript.remix - - javascript.svelte - - javascript.vue notSupported: - javascript.capacitor - javascript.cordova @@ -21,35 +11,6 @@ description: "Learn about the general Session Replay configuration fields." -## Identifying Users - -If you have only followed the above instructions to setup session replays, you will only see IP addresses in Sentry's UI. In order to associate a user identity to a session replay, use [setUser](/platforms/javascript/enriching-events/identify-user/). - -```javascript -import * as Sentry from "@sentry/browser"; -Sentry.setUser({ email: "jane.doe@example.com" }); -``` - -## Start and Stop Recording - -Replay recording only starts automatically when it is included in the integrations key when calling Sentry.init. Otherwise you can initialize the plugin and manually call the start() method on the integration instance. To stop recording you can call the stop(). - -```javascript {tabTitle: ESM} -const replay = new Replay(); // This will *NOT* begin recording replays - -replay.start(); // Start recording - -replay.stop(); // Stop recording -``` - -```javascript {tabTitle: CDN} -const replay = new Sentry.Integrations.Replay(); // This will *NOT* begin recording replays - -replay.start(); // Start recording - -replay.stop(); // Stop recording -``` - ## General Integration Configuration The following options can be configured on the root level of your browser-based Sentry SDK, in `init({})`: @@ -75,6 +36,14 @@ The following options can be configured as options to the integration, in `new R | inlineImages | boolean | `false` | Should inline `` content | | inlineStylesheet | boolean | `true` | Should inline stylesheets used in the recording | +## Identifying Users + +You can use the Sentry SDK to set the user of a session. To associate a user identity to a session replay, refer to the Identifying User Docs. + +```javascript +Sentry.setUser({ email: "jane.doe@example.com" }); +``` + ## rrweb Configuration 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: @@ -84,3 +53,27 @@ new Replay({ // any further configuration here is passed directly to rrweb }); ``` + +## Start and Stop Recording + +Replay recording only starts automatically when it's included in the integrations key when calling `Sentry.init`. Otherwise, you can initialize the plugin and manually call the `start()` method on the integration instance. To stop recording you can call the `stop()`: + +```javascript {tabTitle: ESM} +const replay = new Replay(); // This will *NOT* begin recording replays + +replay.start(); // Start recording + +replay.stop(); // Stop recording +``` + +```javascript {tabTitle: CDN} +const replay = new Sentry.Integrations.Replay(); // This will *NOT* begin recording replays + +replay.start(); // Start recording + +replay.stop(); // Stop recording +``` + +## Privacy + +We take privacy seriously so we provide a number of privacy-oriented settings. Learn more about these in our ourSession Replay privacy documentation. diff --git a/src/platforms/javascript/common/session-replay/custom-instrumentation/index.mdx b/src/platforms/javascript/common/session-replay/custom-instrumentation/index.mdx deleted file mode 100644 index 5160c162a3589f..00000000000000 --- a/src/platforms/javascript/common/session-replay/custom-instrumentation/index.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Custom Instrumentation -sidebar_order: 4100 -supported: - - javascript - - javascript.angular - - javascript.ember - - javascript.gatsby - - javascript.nextjs - - javascript.react - - javascript.remix - - javascript.svelte - - javascript.vue -notSupported: - - javascript.capacitor - - javascript.cordova - - javascript.electron - - javascript.wasm -description: "Learn how to set up General and Privacy aware configuration fields." ---- - - - - diff --git a/src/platforms/javascript/common/session-replay/index.mdx b/src/platforms/javascript/common/session-replay/index.mdx index 8a25d5fe46ee17..afc9f565a63f28 100644 --- a/src/platforms/javascript/common/session-replay/index.mdx +++ b/src/platforms/javascript/common/session-replay/index.mdx @@ -1,16 +1,6 @@ --- title: Set Up Session Replay sidebar_order: 4000 -supported: - - javascript - - javascript.angular - - javascript.ember - - javascript.gatsby - - javascript.nextjs - - javascript.react - - javascript.remix - - javascript.svelte - - javascript.vue notSupported: - javascript.capacitor - javascript.cordova @@ -21,6 +11,8 @@ description: "Learn how to enable Session Replay in your app if it is not alread +Sentry's Replay product is geared toward developers. By default, it'll mask all fields, so no personally identifiable information (PII) is collected, eliminating any concerns with General Data Protection Regulation (GDPR). Learn more on Session Replay Privacy. + With [session replays](/product/session-replay/) you can get to the root cause of an error or latency issue faster by seeing all the technical details related to that issue in one visual replay on your web application. Sentry provides a video-like reproduction of user interactions on a site or web app. All user interactions - including page visits, mouse movements, clicks, and scrolls - are captured, helping developers connect the dots between a known issue and how a user experienced it in the UI. ## Pre-requisites diff --git a/src/platforms/javascript/common/session-replay/custom-instrumentation/privacy-configuration.mdx b/src/platforms/javascript/common/session-replay/privacy.mdx similarity index 82% rename from src/platforms/javascript/common/session-replay/custom-instrumentation/privacy-configuration.mdx rename to src/platforms/javascript/common/session-replay/privacy.mdx index 40b7d4acd5fdd9..d7894a3e1bd671 100644 --- a/src/platforms/javascript/common/session-replay/custom-instrumentation/privacy-configuration.mdx +++ b/src/platforms/javascript/common/session-replay/privacy.mdx @@ -1,16 +1,6 @@ --- -title: Privacy Configuration +title: Privacy sidebar_order: 4200 -supported: - - javascript - - javascript.angular - - javascript.ember - - javascript.gatsby - - javascript.nextjs - - javascript.react - - javascript.remix - - javascript.svelte - - javascript.vue notSupported: - javascript.capacitor - javascript.cordova @@ -21,9 +11,10 @@ description: "Configuring Session Replay to maintain user and data privacy." -There are several ways to deal with PII (personally identifiable information). 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. +There are several ways to deal with personally identifiable information (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's also possible to add the following CSS classes to specific DOM elements to prevent recording their contents: `sentry-block`, `sentry-ignore`, and `sentry-mask`. The following sections will show examples of how content is handled by the differing methods. ### Masking + Masking replaces the text content with something else. The default masking behavior is to replace each character with a `*`. In this example the relevant html code is: `...
`. ![Masking example](./session-replay-masking.png) diff --git a/src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-blocking.png b/src/platforms/javascript/common/session-replay/session-replay-blocking.png similarity index 100% rename from src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-blocking.png rename to src/platforms/javascript/common/session-replay/session-replay-blocking.png diff --git a/src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-ignore-input.gif b/src/platforms/javascript/common/session-replay/session-replay-ignore-input.gif similarity index 100% rename from src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-ignore-input.gif rename to src/platforms/javascript/common/session-replay/session-replay-ignore-input.gif diff --git a/src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-masking.png b/src/platforms/javascript/common/session-replay/session-replay-masking.png similarity index 100% rename from src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-masking.png rename to src/platforms/javascript/common/session-replay/session-replay-masking.png diff --git a/src/wizard/javascript/replay-onboarding/angular/2.configure.md b/src/wizard/javascript/replay-onboarding/angular/2.configure.md index fb734e81ed4ecb..9a0b77867c6534 100644 --- a/src/wizard/javascript/replay-onboarding/angular/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/angular/2.configure.md @@ -7,14 +7,14 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/angular/session-replay/). ```javascript import * as Sentry from "@sentry/angular"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/ember/2.configure.md b/src/wizard/javascript/replay-onboarding/ember/2.configure.md index 01685a877207f5..cc2b6b27a202b6 100644 --- a/src/wizard/javascript/replay-onboarding/ember/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/ember/2.configure.md @@ -7,14 +7,14 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/ember/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/ember/session-replay/). ```javascript import * as Sentry from "@sentry/ember"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/gatsby/2.configure.md b/src/wizard/javascript/replay-onboarding/gatsby/2.configure.md index accadf09a48e6b..6d5941aa878f2e 100644 --- a/src/wizard/javascript/replay-onboarding/gatsby/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/gatsby/2.configure.md @@ -7,7 +7,7 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/gatsby/session-replay/). Include the `@sentry/gatsby` plugin: @@ -28,7 +28,7 @@ import * as Sentry from "@sentry/gatsby"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/javascript/2.configure.md b/src/wizard/javascript/replay-onboarding/javascript/2.configure.md index b8481ef521dbe7..8abb412dacb7e9 100644 --- a/src/wizard/javascript/replay-onboarding/javascript/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/javascript/2.configure.md @@ -7,7 +7,7 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay in our Github [Readme](https://github.com/getsentry/sentry-replay/blob/main/README.md). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/session-replay/). ```javascript import * as Sentry from "@sentry/browser"; @@ -15,14 +15,16 @@ import { Replay } from "@sentry/replay"; Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", - integrations: [ - new Replay({ - // Capture 10% of all sessions - sessionSampleRate: 0.1, + + // This sets the sample rate to be 10%. You may want this to be 100% while + // in development and sample at a lower rate in production + replaysSessionSampleRate: 0.1, + // If the entire session is not sampled, use the below sample rate to sample + // sessions when an error occurs. + replaysOnErrorSampleRate: 1.0, - // Of the remaining 90% of sessions, if an error happens start capturing - errorSampleRate: 1.0, - }) + integrations: [ + new Replay() ], }); ``` diff --git a/src/wizard/javascript/replay-onboarding/nextjs/2.configure.md b/src/wizard/javascript/replay-onboarding/nextjs/2.configure.md index 9e37f86e1356d2..f2d244769d2e4d 100644 --- a/src/wizard/javascript/replay-onboarding/nextjs/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/nextjs/2.configure.md @@ -7,14 +7,14 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/session-replay/). ```javascript {filename:sentry.client.config.js} import * as Sentry from "@sentry/nextjs"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/react/2.configure.md b/src/wizard/javascript/replay-onboarding/react/2.configure.md index 77e43690eaf9a9..6aceba8527cf5c 100644 --- a/src/wizard/javascript/replay-onboarding/react/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/react/2.configure.md @@ -7,14 +7,14 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/react/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/react/session-replay/). ```javascript import * as Sentry from "@sentry/react"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/remix/2.configure.md b/src/wizard/javascript/replay-onboarding/remix/2.configure.md index 80d15fcf3e7d78..b4693aec88a4e9 100644 --- a/src/wizard/javascript/replay-onboarding/remix/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/remix/2.configure.md @@ -7,14 +7,14 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/remix/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/remix/session-replay/). ```javascript {filename: entry.client.tsx} import * as Sentry from "@sentry/remix"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/svelte/2.configure.md b/src/wizard/javascript/replay-onboarding/svelte/2.configure.md index 253b9d3b537d90..7830bd53b02159 100644 --- a/src/wizard/javascript/replay-onboarding/svelte/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/svelte/2.configure.md @@ -7,7 +7,7 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/svelte/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/svelte/session-replay/). ```javascript import "./app.css"; @@ -17,7 +17,7 @@ import * as Sentry from "@sentry/svelte"; import { Replay } from "@sentry/replay"; Sentry.init({ - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production diff --git a/src/wizard/javascript/replay-onboarding/vue/2.configure.md b/src/wizard/javascript/replay-onboarding/vue/2.configure.md index afa4fc9d19bd36..98ca615f58ddee 100644 --- a/src/wizard/javascript/replay-onboarding/vue/2.configure.md +++ b/src/wizard/javascript/replay-onboarding/vue/2.configure.md @@ -7,7 +7,7 @@ type: language #### Configure -Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/custom-instrumentation/). +Add the following to your SDK config. There are several privacy and sampling options available, all of which can be set via the `integrations` constructor. Learn more about configuring Session Replay by reading the [configuration docs](https://docs.sentry.io/platforms/javascript/guides/vue/session-replay/). #### Vue 2 @@ -25,7 +25,7 @@ const router = new Router({ Sentry.init({ Vue, - dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", + dsn: "___PUBLIC_DSN___", // This sets the sample rate to be 10%. You may want this to be 100% while // in development and sample at a lower rate in production