From 9b25525bc2b09e825583f956efbad67edd259ba6 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Wed, 7 Dec 2022 20:10:06 -0500 Subject: [PATCH 1/7] replay: config restructure --- ...al-configuration.mdx => configuration.mdx} | 75 ++++++++---------- .../custom-instrumentation/index.mdx | 24 ------ .../common/session-replay/index.mdx | 12 +-- .../privacy-configuration.mdx => privacy.mdx} | 12 +-- .../session-replay-blocking.png | Bin .../session-replay-ignore-input.gif | Bin .../session-replay-masking.png | Bin 7 files changed, 38 insertions(+), 85 deletions(-) rename src/platforms/javascript/common/session-replay/{custom-instrumentation/general-configuration.mdx => configuration.mdx} (78%) delete mode 100644 src/platforms/javascript/common/session-replay/custom-instrumentation/index.mdx rename src/platforms/javascript/common/session-replay/{custom-instrumentation/privacy-configuration.mdx => privacy.mdx} (88%) rename src/platforms/javascript/common/session-replay/{custom-instrumentation => }/session-replay-blocking.png (100%) rename src/platforms/javascript/common/session-replay/{custom-instrumentation => }/session-replay-ignore-input.gif (100%) rename src/platforms/javascript/common/session-replay/{custom-instrumentation => }/session-replay-masking.png (100%) 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 b679e73fbec38..870d5814d0058 100644 --- a/src/platforms/javascript/common/session-replay/custom-instrumentation/general-configuration.mdx +++ b/src/platforms/javascript/common/session-replay/configuration.mdx @@ -1,55 +1,18 @@ --- -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 - javascript.electron - javascript.wasm description: "Learn about the general Session Replay configuration fields." +redirect_from: + - / --- -## 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 +38,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, in order 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 +55,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 + +A series of privacy oriented settings exist. You can find it in a dedicated page about Session Replay Privacy. 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 5160c162a3589..0000000000000 --- 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 8a25d5fe46ee1..059d82e4b8731 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 fiends, 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 88% rename from src/platforms/javascript/common/session-replay/custom-instrumentation/privacy-configuration.mdx rename to src/platforms/javascript/common/session-replay/privacy.mdx index 40b7d4acd5fdd..4f78bdf487ff6 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 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,7 +11,7 @@ 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 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'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: `...
`. 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 From 2a19d36952ec329749918f0f26fd04fe25eb78a3 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Thu, 8 Dec 2022 13:34:01 -0500 Subject: [PATCH 2/7] wip --- .../javascript/common/session-replay/configuration.mdx | 4 +--- src/platforms/javascript/common/session-replay/privacy.mdx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/platforms/javascript/common/session-replay/configuration.mdx b/src/platforms/javascript/common/session-replay/configuration.mdx index 870d5814d0058..29808ab68c57b 100644 --- a/src/platforms/javascript/common/session-replay/configuration.mdx +++ b/src/platforms/javascript/common/session-replay/configuration.mdx @@ -7,8 +7,6 @@ notSupported: - javascript.electron - javascript.wasm description: "Learn about the general Session Replay configuration fields." -redirect_from: - - / --- @@ -78,4 +76,4 @@ replay.stop(); // Stop recording ## Privacy -A series of privacy oriented settings exist. You can find it in a dedicated page about Session Replay Privacy. +We take privacy seriously. A series of privacy oriented settings exist, you can find it in a dedicated page about Session Replay privacy. diff --git a/src/platforms/javascript/common/session-replay/privacy.mdx b/src/platforms/javascript/common/session-replay/privacy.mdx index 4f78bdf487ff6..78dc719221f55 100644 --- a/src/platforms/javascript/common/session-replay/privacy.mdx +++ b/src/platforms/javascript/common/session-replay/privacy.mdx @@ -1,5 +1,5 @@ --- -title: Privacy Configuration +title: Privacy sidebar_order: 4200 notSupported: - javascript.capacitor From 7745f79e79a8891475fce95199e514bf505ba699 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Thu, 8 Dec 2022 13:36:10 -0500 Subject: [PATCH 3/7] privacy --- .../javascript/common/session-replay/configuration.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platforms/javascript/common/session-replay/configuration.mdx b/src/platforms/javascript/common/session-replay/configuration.mdx index 29808ab68c57b..0adc608f5cbb6 100644 --- a/src/platforms/javascript/common/session-replay/configuration.mdx +++ b/src/platforms/javascript/common/session-replay/configuration.mdx @@ -76,4 +76,4 @@ replay.stop(); // Stop recording ## Privacy -We take privacy seriously. A series of privacy oriented settings exist, you can find it in a dedicated page about Session Replay privacy. +We take privacy seriously so we provide a number of privacy-oriented settings. Learn more about these in our ourSession Replay privacy documentation. From 2f954712256b330b36a994642a04e627bcb1dd83 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Thu, 8 Dec 2022 13:42:26 -0500 Subject: [PATCH 4/7] wizard --- .../replay-onboarding/angular/2.configure.md | 4 ++-- .../replay-onboarding/ember/2.configure.md | 4 ++-- .../replay-onboarding/gatsby/2.configure.md | 4 ++-- .../javascript/2.configure.md | 18 ++++++++++-------- .../replay-onboarding/nextjs/2.configure.md | 4 ++-- .../replay-onboarding/react/2.configure.md | 4 ++-- .../replay-onboarding/remix/2.configure.md | 4 ++-- .../replay-onboarding/svelte/2.configure.md | 4 ++-- .../replay-onboarding/vue/2.configure.md | 4 ++-- 9 files changed, 26 insertions(+), 24 deletions(-) diff --git a/src/wizard/javascript/replay-onboarding/angular/2.configure.md b/src/wizard/javascript/replay-onboarding/angular/2.configure.md index fb734e81ed4ec..9a0b77867c653 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 01685a877207f..cc2b6b27a202b 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 accadf09a48e6..6d5941aa878f2 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 b8481ef521dbe..8abb412dacb7e 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 9e37f86e1356d..f2d244769d2e4 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 77e43690eaf9a..6aceba8527cf5 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 80d15fcf3e7d7..b4693aec88a4e 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 253b9d3b537d9..7830bd53b0215 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 afa4fc9d19bd3..98ca615f58dde 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 From 80b347dcd58e9965d87ce102999d7cf2155167f9 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Thu, 8 Dec 2022 13:44:04 -0500 Subject: [PATCH 5/7] Apply suggestions from code review Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com> --- .../javascript/common/session-replay/configuration.mdx | 4 ++-- src/platforms/javascript/common/session-replay/index.mdx | 2 +- src/platforms/javascript/common/session-replay/privacy.mdx | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/platforms/javascript/common/session-replay/configuration.mdx b/src/platforms/javascript/common/session-replay/configuration.mdx index 0adc608f5cbb6..c3f70ed12ffea 100644 --- a/src/platforms/javascript/common/session-replay/configuration.mdx +++ b/src/platforms/javascript/common/session-replay/configuration.mdx @@ -38,7 +38,7 @@ The following options can be configured as options to the integration, in `new R ## Identifying Users -You can use the Sentry SDK to set the user of a session, in order to associate a user identity to a session replay, refer to the Identifying User Docs. +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" }); @@ -56,7 +56,7 @@ new Replay({ ## 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(): +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 diff --git a/src/platforms/javascript/common/session-replay/index.mdx b/src/platforms/javascript/common/session-replay/index.mdx index 059d82e4b8731..afc9f565a63f2 100644 --- a/src/platforms/javascript/common/session-replay/index.mdx +++ b/src/platforms/javascript/common/session-replay/index.mdx @@ -11,7 +11,7 @@ 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 fiends, so no personally identifiable information (PII) is collected, eliminating any concerns with General Data Protection Regulation (GDPR). Learn more on Session Replay Privacy. +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. diff --git a/src/platforms/javascript/common/session-replay/privacy.mdx b/src/platforms/javascript/common/session-replay/privacy.mdx index 78dc719221f55..d7894a3e1bd67 100644 --- a/src/platforms/javascript/common/session-replay/privacy.mdx +++ b/src/platforms/javascript/common/session-replay/privacy.mdx @@ -11,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'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. +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) From e1061c387abce0244ed18ac2745a98d5b134bdd4 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Thu, 8 Dec 2022 13:50:27 -0500 Subject: [PATCH 6/7] link --- .../session-replay/setup-session-replay/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 001ed7246df84..f41f6bbed8cd3 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 From 57ddd535c464b0b6b235293756d8234df192ce4d Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Thu, 8 Dec 2022 13:55:42 -0500 Subject: [PATCH 7/7] Update src/platform-includes/session-replay/setup-session-replay/javascript.mdx --- .../session-replay/setup-session-replay/javascript.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f41f6bbed8cd3..e8072ad74c2fc 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//) 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