replay: config restructure (#5927)

Author: bruno-garcia

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 

src/platforms/javascript/common/session-replay/custom-instrumentation/general-configuration.mdx renamed to 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."
 
 <Include name="beta-note-session-replay.mdx" />
 
-## 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: "[email protected]" });
-```
-
-## 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 `<image>` 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 <PlatformLink to="/enriching-events/identify-user">Identifying User Docs</PlatformLink>.
+
+```javascript
+Sentry.setUser({ email: "[email protected]" });
+```
+
 ## 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 our<PlatformLink to="/session-replay/privacy/#privacy-configuration">Session Replay privacy documentation</PlatformLink>.

src/platforms/javascript/common/session-replay/custom-instrumentation/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
@@ -35,6 +25,8 @@ redirect_from:
 
 <Include name="beta-note-session-replay.mdx" />
 
+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 <PlatformLink to="/session-replay/privacy">Session Replay Privacy</PlatformLink>.
+
 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

src/platforms/javascript/common/session-replay/index.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."
 
 <Include name="beta-note-session-replay.mdx" />
 
-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: `<table class="sentry-mask">...</table>`.
 ![Masking example](./session-replay-masking.png)
 

src/platforms/javascript/common/session-replay/custom-instrumentation/privacy-configuration.mdx renamed to src/platforms/javascript/common/session-replay/privacy.mdx

@@ -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://[email protected]/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

src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-blocking.png renamed to src/platforms/javascript/common/session-replay/session-replay-blocking.png

@@ -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://[email protected]/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

src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-ignore-input.gif renamed to src/platforms/javascript/common/session-replay/session-replay-ignore-input.gif

@@ -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://[email protected]/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

src/platforms/javascript/common/session-replay/custom-instrumentation/session-replay-masking.png renamed to src/platforms/javascript/common/session-replay/session-replay-masking.png

@@ -7,22 +7,24 @@ 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";
 import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "https://[email protected]/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()
   ],
 });
 ```

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/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://[email protected]/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

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/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://[email protected]/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

src/wizard/javascript/replay-onboarding/gatsby/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://[email protected]/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

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 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://[email protected]/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

src/wizard/javascript/replay-onboarding/nextjs/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://[email protected]/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