From 91171b74d2a131a298e277f06de9ac4ddd4d81fe Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 19 Sep 2023 17:37:02 -0400 Subject: [PATCH 1/6] replay commit --- .../install/javascript.angular.mdx | 37 +++++++++++++++++++ .../install/javascript.capacitor.mdx | 16 ++++++-- .../install/javascript.electron.mdx | 8 ++++ .../install/javascript.ember.mdx | 3 ++ .../session-replay/install/javascript.mdx | 2 - .../install/javascript.nextjs.mdx | 5 +++ .../install/javascript.react.mdx | 7 ++++ .../install/javascript.remix.mdx | 23 ++++++++++++ .../install/javascript.svelte.mdx | 7 ++++ .../install/javascript.sveltekit.mdx | 22 +++++++++++ .../session-replay/install/javascript.vue.mdx | 7 ++++ .../setup/javascript.angular.mdx | 0 .../session-replay/setup/javascript.ember.mdx | 0 .../setup/javascript.nextjs.mdx | 0 .../session-replay/setup/javascript.react.mdx | 0 .../session-replay/setup/javascript.remix.mdx | 0 .../setup/javascript.svelte.mdx | 0 .../setup/javascript.sveltekit.mdx | 0 .../session-replay/setup/javascript.vue.mdx | 0 19 files changed, 132 insertions(+), 5 deletions(-) create mode 100644 src/platform-includes/session-replay/install/javascript.angular.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.ember.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.nextjs.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.react.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.remix.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.svelte.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.sveltekit.mdx create mode 100644 src/platform-includes/session-replay/install/javascript.vue.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.angular.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.ember.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.nextjs.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.react.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.remix.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.svelte.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.sveltekit.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.vue.mdx diff --git a/src/platform-includes/session-replay/install/javascript.angular.mdx b/src/platform-includes/session-replay/install/javascript.angular.mdx new file mode 100644 index 0000000000000..75c905c3c7a6f --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.angular.mdx @@ -0,0 +1,37 @@ +```bash {tabTitle:npm} +# Angular 12 and newer: +npm install --save @sentry/angular-ivy + +# Angular 10 and 11: +npm install --save @sentry/angular +``` + +```bash {tabTitle:Yarn} +# Angular 12 and newer: +yarn add @sentry/angular-ivy + +# Angular 10 and 11: +yarn add @sentry/angular +``` + +### Angular Version Compatibility + +Because of the way Angular libraries are compiled, you need to use a specific version of the Sentry SDK for each corresponding version of Angular as shown below: + +| Angular version | Recommended Sentry SDK | +| --------------- | ---------------------- | +| 12 and newer | `@sentry/angular-ivy` | +| 10, 11 | `@sentry/angular` | +| Older versions | See note below | + + + +Support for any Angular version below 10 was discontinued in version 7 of the SDK. If you need to use Angular 9 or older, try version 6 (`@sentry/angular@^6.x`) of the SDK. For AngularJS/1.x, use `@sentry/browser@^6.x` and our [AngularJS integration](/platforms/javascript/guides/angular/angular1). Note, that these versions of the SDK are no longer maintained or tested. + + + + + +If you are using Angular 16 or newer, `@sentry/angular` will no longer work as it doesn't support Angular's rendering engine Ivy natively. Please use `@sentry/angular-ivy` instead. + + diff --git a/src/platform-includes/session-replay/install/javascript.capacitor.mdx b/src/platform-includes/session-replay/install/javascript.capacitor.mdx index c60906f36a3b9..d26b4cbb83e8f 100644 --- a/src/platform-includes/session-replay/install/javascript.capacitor.mdx +++ b/src/platform-includes/session-replay/install/javascript.capacitor.mdx @@ -1,7 +1,17 @@ -```bash {tabTitle: Yarn} -yarn add @sentry/capacitor @sentry/replay +Install the Sentry Capacitor SDK alongside the corresponding Sentry SDK for the framework you're using, such as Angular in this example: + +```bash {tabTitle:Angular} +# npm +npm install --save @sentry/capacitor @sentry/angular-ivy @sentry/replay + +# yarn +yarn add @sentry/capacitor @sentry/angular-ivy @sentry/replay ``` -```html {tabTitle: npm} +```bash {tabTitle:Other Frameworks} +# npm npm install --save @sentry/capacitor @sentry/replay + +# yarn +yarn add @sentry/capacitor @sentry/replay ``` diff --git a/src/platform-includes/session-replay/install/javascript.electron.mdx b/src/platform-includes/session-replay/install/javascript.electron.mdx index fb25249be9002..8e5bc4d4f6976 100644 --- a/src/platform-includes/session-replay/install/javascript.electron.mdx +++ b/src/platform-includes/session-replay/install/javascript.electron.mdx @@ -1 +1,9 @@ The Replay integration is **already included** with the Electron SDK package. + +```bash {tabTitle: npm} +npm install --save @sentry/electron +``` + +```bash {tabTitle: Yarn} +yarn add @sentry/electron +``` diff --git a/src/platform-includes/session-replay/install/javascript.ember.mdx b/src/platform-includes/session-replay/install/javascript.ember.mdx new file mode 100644 index 0000000000000..89515011d2da4 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.ember.mdx @@ -0,0 +1,3 @@ +```bash {tabTitle:ember-cli} +ember install @sentry/ember +``` diff --git a/src/platform-includes/session-replay/install/javascript.mdx b/src/platform-includes/session-replay/install/javascript.mdx index 6e34d33b4bedb..726dcaf99bcbb 100644 --- a/src/platform-includes/session-replay/install/javascript.mdx +++ b/src/platform-includes/session-replay/install/javascript.mdx @@ -1,12 +1,10 @@ The Replay integration is **already included** in your browser or framework SDK NPM packages. If you're using CDN bundles instead of NPM packages, you need to load the Replay integration CDN bundle in addition to your browser bundle: ```bash {tabTitle: npm} -# Make sure to have @sentry/browser or a Framework SDK (e.g. @sentry/react) installed npm install --save @sentry/browser ``` ```bash {tabTitle: Yarn} -# Make sure to have @sentry/browser or a Framework SDK (e.g. @sentry/react) installed yarn add @sentry/browser ``` diff --git a/src/platform-includes/session-replay/install/javascript.nextjs.mdx b/src/platform-includes/session-replay/install/javascript.nextjs.mdx new file mode 100644 index 0000000000000..6283e1ca7f284 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.nextjs.mdx @@ -0,0 +1,5 @@ +We recommend installing the SDK through our installation wizard: + +```bash +npx @sentry/wizard@latest -i nextjs +``` diff --git a/src/platform-includes/session-replay/install/javascript.react.mdx b/src/platform-includes/session-replay/install/javascript.react.mdx new file mode 100644 index 0000000000000..80038bf5da6b9 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.react.mdx @@ -0,0 +1,7 @@ +```bash {tabTitle:npm} +npm install --save @sentry/react +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/react +``` diff --git a/src/platform-includes/session-replay/install/javascript.remix.mdx b/src/platform-includes/session-replay/install/javascript.remix.mdx new file mode 100644 index 0000000000000..7f5b2b30458b1 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.remix.mdx @@ -0,0 +1,23 @@ +We recommend installing the SDK through our installation wizard: + +```bash +npx @sentry/wizard@latest -i remix +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create two files in the root directory of your project, `entry.client.tsx` and `entry.server.tsx` (if they don't already exist). +- add the default `Sentry.init()` for the client in `entry.client.tsx` and the server in `entry.server.tsx`. +- create `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`). +- adjust your `build` script in `package.json` to automatically upload source maps to Sentry when you build your application. + +If you use [Remix future flags](https://remix.run/docs/en/main/pages/api-development-strategy#current-future-flags), the wizard will instrument your application accordingly to support Remix v2 features. + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. +You can also manually capture errors. + + + +If the wizard setup isn't working for you, you can set up the SDK manually. + + diff --git a/src/platform-includes/session-replay/install/javascript.svelte.mdx b/src/platform-includes/session-replay/install/javascript.svelte.mdx new file mode 100644 index 0000000000000..6385387054bf0 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.svelte.mdx @@ -0,0 +1,7 @@ +```bash {tabTitle:npm} +npm install --save @sentry/svelte +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/svelte +``` diff --git a/src/platform-includes/session-replay/install/javascript.sveltekit.mdx b/src/platform-includes/session-replay/install/javascript.sveltekit.mdx new file mode 100644 index 0000000000000..07ffb583e14c6 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.sveltekit.mdx @@ -0,0 +1,22 @@ +We recommend installing the SDK by running our installation wizard in the root directory of your project: + +```bash +npx @sentry/wizard@latest -i sveltekit +``` + +The wizard will prompt you to log in to Sentry. It will then automatically do the following steps for you: + +- create or update SvelteKit files with the default Sentry configuration: + - `hooks.(client|server).js` to initialize the SDK and instrument [SvelteKit's hooks](https://kit.svelte.dev/docs/hooks) + - `vite.config.js` to add source maps upload and auto-instrumentation via Vite plugins. +- create a `.sentryclirc` file with an auth token to upload source maps (this file is automatically added to `.gitignore`) +- add an example page to your app to verify your Sentry setup + +After the wizard setup is completed, the SDK will automatically capture unhandled errors, and monitor performance. +You can also manually capture errors. + + + +If the setup through the wizard doesn't work for you, you can also set up the SDK manually. + + diff --git a/src/platform-includes/session-replay/install/javascript.vue.mdx b/src/platform-includes/session-replay/install/javascript.vue.mdx new file mode 100644 index 0000000000000..7ceea0f06b239 --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.vue.mdx @@ -0,0 +1,7 @@ +```bash {tabTitle:npm} +npm install --save @sentry/vue +``` + +```bash {tabTitle:Yarn} +yarn add @sentry/vue +``` diff --git a/src/platform-includes/session-replay/setup/javascript.angular.mdx b/src/platform-includes/session-replay/setup/javascript.angular.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.ember.mdx b/src/platform-includes/session-replay/setup/javascript.ember.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.nextjs.mdx b/src/platform-includes/session-replay/setup/javascript.nextjs.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.react.mdx b/src/platform-includes/session-replay/setup/javascript.react.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.remix.mdx b/src/platform-includes/session-replay/setup/javascript.remix.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.svelte.mdx b/src/platform-includes/session-replay/setup/javascript.svelte.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx b/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d diff --git a/src/platform-includes/session-replay/setup/javascript.vue.mdx b/src/platform-includes/session-replay/setup/javascript.vue.mdx new file mode 100644 index 0000000000000..e69de29bb2d1d From ac2bca0f2ff3bad71af8baa878e37ff3b4a3f6e3 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 19 Sep 2023 17:46:24 -0400 Subject: [PATCH 2/6] setup --- .../setup/javascript.angular.mdx | 45 ++++++++++++++++++ .../setup/javascript.electron.mdx | 8 ---- .../session-replay/setup/javascript.ember.mdx | 45 ++++++++++++++++++ .../session-replay/setup/javascript.mdx | 4 -- .../setup/javascript.nextjs.mdx | 47 +++++++++++++++++++ .../session-replay/setup/javascript.react.mdx | 45 ++++++++++++++++++ .../session-replay/setup/javascript.remix.mdx | 47 +++++++++++++++++++ .../setup/javascript.svelte.mdx | 45 ++++++++++++++++++ .../setup/javascript.sveltekit.mdx | 47 +++++++++++++++++++ .../session-replay/setup/javascript.vue.mdx | 45 ++++++++++++++++++ .../common/session-replay/index.mdx | 4 ++ 11 files changed, 370 insertions(+), 12 deletions(-) diff --git a/src/platform-includes/session-replay/setup/javascript.angular.mdx b/src/platform-includes/session-replay/setup/javascript.angular.mdx index e69de29bb2d1d..6ce5e36e1a1da 100644 --- a/src/platform-includes/session-replay/setup/javascript.angular.mdx +++ b/src/platform-includes/session-replay/setup/javascript.angular.mdx @@ -0,0 +1,45 @@ +```javascript +import * as Sentry from "@sentry/angular-ivy"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/angular-ivy"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.electron.mdx b/src/platform-includes/session-replay/setup/javascript.electron.mdx index 0dd59719528d8..3263afa69fe5d 100644 --- a/src/platform-includes/session-replay/setup/javascript.electron.mdx +++ b/src/platform-includes/session-replay/setup/javascript.electron.mdx @@ -1,11 +1,3 @@ -To set up the integration, add the following to your Sentry initialization in -Electron renderers. Several options are supported and passable using the integration -constructor. See the [configuration -documentation](/platforms/javascript/session-replay/configuration/) for more -details. - - - ```javascript import * as Sentry from "@sentry/electron/renderer"; diff --git a/src/platform-includes/session-replay/setup/javascript.ember.mdx b/src/platform-includes/session-replay/setup/javascript.ember.mdx index e69de29bb2d1d..2b406944686dc 100644 --- a/src/platform-includes/session-replay/setup/javascript.ember.mdx +++ b/src/platform-includes/session-replay/setup/javascript.ember.mdx @@ -0,0 +1,45 @@ +```javascript +import * as Sentry from "@sentry/ember"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/ember"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.mdx b/src/platform-includes/session-replay/setup/javascript.mdx index 9f86255eb7603..d789fe781c3a7 100644 --- a/src/platform-includes/session-replay/setup/javascript.mdx +++ b/src/platform-includes/session-replay/setup/javascript.mdx @@ -1,7 +1,3 @@ -To set up the integration, add the following to your Sentry initialization. Several options are supported and passable using the integration constructor. See the [configuration documentation](/platforms/javascript/session-replay/configuration/) for more details. - - - ```javascript // import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser import * as Sentry from "@sentry/browser"; diff --git a/src/platform-includes/session-replay/setup/javascript.nextjs.mdx b/src/platform-includes/session-replay/setup/javascript.nextjs.mdx index e69de29bb2d1d..69e00bc537497 100644 --- a/src/platform-includes/session-replay/setup/javascript.nextjs.mdx +++ b/src/platform-includes/session-replay/setup/javascript.nextjs.mdx @@ -0,0 +1,47 @@ +```javascript +On your client-side NextJS app, add: + +import * as Sentry from "@sentry/nextjs"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/nextjs"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.react.mdx b/src/platform-includes/session-replay/setup/javascript.react.mdx index e69de29bb2d1d..95b3698bf15f1 100644 --- a/src/platform-includes/session-replay/setup/javascript.react.mdx +++ b/src/platform-includes/session-replay/setup/javascript.react.mdx @@ -0,0 +1,45 @@ +```javascript +import * as Sentry from "@sentry/react"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/react"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.remix.mdx b/src/platform-includes/session-replay/setup/javascript.remix.mdx index e69de29bb2d1d..d9c7e30d55340 100644 --- a/src/platform-includes/session-replay/setup/javascript.remix.mdx +++ b/src/platform-includes/session-replay/setup/javascript.remix.mdx @@ -0,0 +1,47 @@ +On your client-side Remix app, add: + +```javascript +import * as Sentry from "@sentry/remix"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/remix"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.svelte.mdx b/src/platform-includes/session-replay/setup/javascript.svelte.mdx index e69de29bb2d1d..d3b22f6b0f487 100644 --- a/src/platform-includes/session-replay/setup/javascript.svelte.mdx +++ b/src/platform-includes/session-replay/setup/javascript.svelte.mdx @@ -0,0 +1,45 @@ +```javascript +import * as Sentry from "@sentry/svelte"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/svelte"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx b/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx index e69de29bb2d1d..30abbccf7531f 100644 --- a/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx +++ b/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx @@ -0,0 +1,47 @@ +On your client-side SvelteKit app, add: + +```javascript +import * as Sentry from "@sentry/sveltekit"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/sveltekit"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platform-includes/session-replay/setup/javascript.vue.mdx b/src/platform-includes/session-replay/setup/javascript.vue.mdx index e69de29bb2d1d..d5e067ed409ae 100644 --- a/src/platform-includes/session-replay/setup/javascript.vue.mdx +++ b/src/platform-includes/session-replay/setup/javascript.vue.mdx @@ -0,0 +1,45 @@ +```javascript +import * as Sentry from "@sentry/vue"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/vue"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` diff --git a/src/platforms/javascript/common/session-replay/index.mdx b/src/platforms/javascript/common/session-replay/index.mdx index 889af1b826883..0cf2107b7822c 100644 --- a/src/platforms/javascript/common/session-replay/index.mdx +++ b/src/platforms/javascript/common/session-replay/index.mdx @@ -60,6 +60,10 @@ By default, our Session Replay SDK masks all DOM text content, images, and user ## Set Up +To set up the integration, add the following to your Sentry initialization. Several options are supported and passable using the integration constructor. See the [configuration documentation](/platforms/javascript/session-replay/configuration/) for more details. + + + ### Content Security Policy (CSP) From 7bfaf2415f0b870dcb85ec271333d5b805518729 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 19 Sep 2023 17:58:45 -0400 Subject: [PATCH 3/6] angular version --- .../session-replay/install/javascript.angular.mdx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/platform-includes/session-replay/install/javascript.angular.mdx b/src/platform-includes/session-replay/install/javascript.angular.mdx index 75c905c3c7a6f..96105f56c2a66 100644 --- a/src/platform-includes/session-replay/install/javascript.angular.mdx +++ b/src/platform-includes/session-replay/install/javascript.angular.mdx @@ -22,16 +22,3 @@ Because of the way Angular libraries are compiled, you need to use a specific ve | --------------- | ---------------------- | | 12 and newer | `@sentry/angular-ivy` | | 10, 11 | `@sentry/angular` | -| Older versions | See note below | - - - -Support for any Angular version below 10 was discontinued in version 7 of the SDK. If you need to use Angular 9 or older, try version 6 (`@sentry/angular@^6.x`) of the SDK. For AngularJS/1.x, use `@sentry/browser@^6.x` and our [AngularJS integration](/platforms/javascript/guides/angular/angular1). Note, that these versions of the SDK are no longer maintained or tested. - - - - - -If you are using Angular 16 or newer, `@sentry/angular` will no longer work as it doesn't support Angular's rendering engine Ivy natively. Please use `@sentry/angular-ivy` instead. - - From fce4f855c5016cf0b0577ca0bc9aa298356dfbbe Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 19 Sep 2023 18:02:20 -0400 Subject: [PATCH 4/6] gatsby --- .../install/javascript.gatsby.mdx | 9 ++++ .../setup/javascript.gatsby.mdx | 45 +++++++++++++++++++ 2 files changed, 54 insertions(+) create mode 100644 src/platform-includes/session-replay/install/javascript.gatsby.mdx create mode 100644 src/platform-includes/session-replay/setup/javascript.gatsby.mdx diff --git a/src/platform-includes/session-replay/install/javascript.gatsby.mdx b/src/platform-includes/session-replay/install/javascript.gatsby.mdx new file mode 100644 index 0000000000000..9b3c83704316e --- /dev/null +++ b/src/platform-includes/session-replay/install/javascript.gatsby.mdx @@ -0,0 +1,9 @@ +The Replay integration is **already included** with the Gatsby SDK package. + +```bash {tabTitle: npm} +npm install --save @sentry/gatsby +``` + +```bash {tabTitle: Yarn} +yarn add @sentry/gatsby +``` diff --git a/src/platform-includes/session-replay/setup/javascript.gatsby.mdx b/src/platform-includes/session-replay/setup/javascript.gatsby.mdx new file mode 100644 index 0000000000000..5af92f4e82c3a --- /dev/null +++ b/src/platform-includes/session-replay/setup/javascript.gatsby.mdx @@ -0,0 +1,45 @@ +```javascript +import * as Sentry from "@sentry/gatsby"; + +Sentry.init({ + 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 + 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, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], +}); +``` + +With the settings above, session replays with errors are always captured. +You can verify that with the following: + +```javascript +myUndefinedFunction(); +``` + +### Lazy-loading Replay + +Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: + +```js +Sentry.init({ + // Note, Replay is NOT instantiated below: + integrations: [], +}); + +// Sometime later +const { getCurrentHub, Replay } = await import("@sentry/gatsby"); +getCurrentHub().getClient().addIntegration(new Replay()); +``` From 30e098f69a04fb0f78de6c06060a4270fd741440 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Tue, 19 Sep 2023 18:04:48 -0400 Subject: [PATCH 5/6] fix comment outside code block --- .../session-replay/setup/javascript.nextjs.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform-includes/session-replay/setup/javascript.nextjs.mdx b/src/platform-includes/session-replay/setup/javascript.nextjs.mdx index 69e00bc537497..3d4d0464b72f3 100644 --- a/src/platform-includes/session-replay/setup/javascript.nextjs.mdx +++ b/src/platform-includes/session-replay/setup/javascript.nextjs.mdx @@ -1,6 +1,6 @@ -```javascript On your client-side NextJS app, add: +```javascript import * as Sentry from "@sentry/nextjs"; Sentry.init({ From f7d3dd168bda46c3ee95d6d35bf9d1953d6a7db7 Mon Sep 17 00:00:00 2001 From: Bruno Garcia Date: Sat, 23 Sep 2023 15:59:20 -0400 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Shana Matthews --- .../session-replay/install/javascript.nextjs.mdx | 2 +- .../session-replay/install/javascript.react.mdx | 2 ++ .../session-replay/install/javascript.remix.mdx | 2 +- .../session-replay/install/javascript.svelte.mdx | 2 ++ .../session-replay/install/javascript.sveltekit.mdx | 2 +- src/platform-includes/session-replay/install/javascript.vue.mdx | 2 ++ src/platforms/javascript/common/session-replay/index.mdx | 2 +- 7 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/platform-includes/session-replay/install/javascript.nextjs.mdx b/src/platform-includes/session-replay/install/javascript.nextjs.mdx index 6283e1ca7f284..3050f964b7f1a 100644 --- a/src/platform-includes/session-replay/install/javascript.nextjs.mdx +++ b/src/platform-includes/session-replay/install/javascript.nextjs.mdx @@ -1,4 +1,4 @@ -We recommend installing the SDK through our installation wizard: +The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard: ```bash npx @sentry/wizard@latest -i nextjs diff --git a/src/platform-includes/session-replay/install/javascript.react.mdx b/src/platform-includes/session-replay/install/javascript.react.mdx index 80038bf5da6b9..2ef398672b48a 100644 --- a/src/platform-includes/session-replay/install/javascript.react.mdx +++ b/src/platform-includes/session-replay/install/javascript.react.mdx @@ -1,3 +1,5 @@ +The Replay integration is **already included** with the React SDK package. + ```bash {tabTitle:npm} npm install --save @sentry/react ``` diff --git a/src/platform-includes/session-replay/install/javascript.remix.mdx b/src/platform-includes/session-replay/install/javascript.remix.mdx index 7f5b2b30458b1..ef2d6bd611c79 100644 --- a/src/platform-includes/session-replay/install/javascript.remix.mdx +++ b/src/platform-includes/session-replay/install/javascript.remix.mdx @@ -1,4 +1,4 @@ -We recommend installing the SDK through our installation wizard: +The Replay integration is already included with the Sentry SDK. We recommend installing the SDK through our installation wizard: ```bash npx @sentry/wizard@latest -i remix diff --git a/src/platform-includes/session-replay/install/javascript.svelte.mdx b/src/platform-includes/session-replay/install/javascript.svelte.mdx index 6385387054bf0..4b0645dad7483 100644 --- a/src/platform-includes/session-replay/install/javascript.svelte.mdx +++ b/src/platform-includes/session-replay/install/javascript.svelte.mdx @@ -1,3 +1,5 @@ +The Replay integration is **already included** with the Svelte SDK package. + ```bash {tabTitle:npm} npm install --save @sentry/svelte ``` diff --git a/src/platform-includes/session-replay/install/javascript.sveltekit.mdx b/src/platform-includes/session-replay/install/javascript.sveltekit.mdx index 07ffb583e14c6..1c22fa4d2d73e 100644 --- a/src/platform-includes/session-replay/install/javascript.sveltekit.mdx +++ b/src/platform-includes/session-replay/install/javascript.sveltekit.mdx @@ -1,4 +1,4 @@ -We recommend installing the SDK by running our installation wizard in the root directory of your project: +The Replay integration is already included with the Sentry SDK. We recommend installing the SDK by running our installation wizard in the root directory of your project: ```bash npx @sentry/wizard@latest -i sveltekit diff --git a/src/platform-includes/session-replay/install/javascript.vue.mdx b/src/platform-includes/session-replay/install/javascript.vue.mdx index 7ceea0f06b239..f5ddd3a0d8d18 100644 --- a/src/platform-includes/session-replay/install/javascript.vue.mdx +++ b/src/platform-includes/session-replay/install/javascript.vue.mdx @@ -1,3 +1,5 @@ +The Replay integration is **already included** with the Vue SDK package. + ```bash {tabTitle:npm} npm install --save @sentry/vue ``` diff --git a/src/platforms/javascript/common/session-replay/index.mdx b/src/platforms/javascript/common/session-replay/index.mdx index 0cf2107b7822c..91f2b7777cc97 100644 --- a/src/platforms/javascript/common/session-replay/index.mdx +++ b/src/platforms/javascript/common/session-replay/index.mdx @@ -60,7 +60,7 @@ By default, our Session Replay SDK masks all DOM text content, images, and user ## Set Up -To set up the integration, add the following to your Sentry initialization. Several options are supported and passable using the integration constructor. See the [configuration documentation](/platforms/javascript/session-replay/configuration/) for more details. +To set up the integration, add the following to your Sentry initialization. There are several options you can pass to the integration constructor. See the [configuration documentation](/platforms/javascript/session-replay/configuration/) for more details.