ref(replay): Update Replay installation with SDK-package import (#5971)

This PR updates the Session Replay docs after we released version 7.27.0 of the JS SDKs. With this new version, users don't need to explicitly install `@sentry/replay` anymore, as it is now a dependency of `@sentry/browser` which [exports the Replay integration](getsentry/sentry-javascript#6508). 

* Update the session replay setup page
* Update the session replay onboarding wizard

ref #getsentry/sentry-javascript#6326

Note: I'd like to keep this PR open for a few days (Monday or so) just to make sure 7.27.0 isn't breaking anything

Author: Lms24

src/platform-includes/session-replay/install/javascript.mdx

@@ -1,13 +1,13 @@
-Install the Replay package with the package manager of your choice. Alternatively, you can load the Replay integration using a CDN bundle:
+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: ESM}
+```bash {tabTitle: NPM}
 # Make sure to have @sentry/browser or a Framework SDK (e.g. @sentry/react) installed
+npm install --save @sentry/browser
+```
 
-# Using yarn
-yarn add @sentry/replay
-
-# Using npm
-npm install --save @sentry/replay
+```bash {tabTitle: Yarn}
+# Make sure to have @sentry/browser or a Framework SDK (e.g. @sentry/react) installed
+yarn add @sentry/browser
 ```
 
 ```html {tabTitle: CDN}
@@ -17,7 +17,7 @@ entire Sentry SDK. You have to add it in addition to the Sentry Browser SDK bund
 -->
 
 <script
-  src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.min.js"
+  src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
   integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.min.js', 'sha384-base64') }}"
   crossorigin="anonymous"
 ></script>

src/platform-includes/session-replay/setup/javascript.mdx

@@ -4,8 +4,6 @@ To set up the integration, add the following to your Sentry initialization. Seve
 // import Sentry from your framework SDK (e.g. @sentry/react) instead of @sentry/browser
 import * as Sentry from "@sentry/browser";
 
-import { Replay } from "@sentry/replay";
-
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
 
@@ -18,11 +16,10 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Replay({
+    new Sentry.Replay({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
-      // See below for all available options
     }),
   ],
 });
@@ -45,7 +42,6 @@ Sentry.init({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
-      // See below for all available options
     }),
   ],
 });

src/wizard/javascript/replay-onboarding/angular/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/angular @sentry/replay
+yarn add @sentry/angular
 
 # Using npm
-npm install --save @sentry/angular @sentry/replay
+npm install --save @sentry/angular
 ```

src/wizard/javascript/replay-onboarding/angular/2.configure.md

@@ -11,7 +11,6 @@ Add the following to your SDK config. There are several privacy and sampling opt
 
 ```javascript
 import * as Sentry from "@sentry/angular";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
@@ -23,8 +22,6 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```

src/wizard/javascript/replay-onboarding/ember/1.install.md

@@ -10,5 +10,5 @@ type: language
 For the `@sentry/replay` integration to work, you must have the Sentry browser SDK package, or an equivalent framework SDK (e.g. @sentry/react) installed, minimum version 7.x.
 
 ```bash {tabTitle:ember-cli}
-ember install @sentry/ember @sentry/replay
+ember install @sentry/ember
 ```

src/wizard/javascript/replay-onboarding/ember/2.configure.md

@@ -23,8 +23,6 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```

src/wizard/javascript/replay-onboarding/gatsby/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/gatsby @sentry/replay
+yarn add @sentry/gatsby
 
 # Using npm
-npm install --save @sentry/gatsby @sentry/replay
+npm install --save @sentry/gatsby
 ```

src/wizard/javascript/replay-onboarding/gatsby/2.configure.md

@@ -17,15 +17,14 @@ module.exports = {
     {
       resolve: "@sentry/gatsby",
     },
-  ]
+  ],
 };
 ```
 
 Configure your `Sentry.init`:
 
 ```javascript {filename:sentry.config.js}
 import * as Sentry from "@sentry/gatsby";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
@@ -37,9 +36,7 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```
 

src/wizard/javascript/replay-onboarding/javascript/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/browser @sentry/replay
+yarn add @sentry/browser
 
 # Using npm
-npm install --save @sentry/browser @sentry/replay
+npm install --save @sentry/browser
 ```

src/wizard/javascript/replay-onboarding/javascript/2.configure.md

@@ -11,20 +11,17 @@ Add the following to your SDK config. There are several privacy and sampling opt
 
 ```javascript
 import * as Sentry from "@sentry/browser";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "https://[email protected]/0",
-  
+
   // 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 Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```

src/wizard/javascript/replay-onboarding/nextjs/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/nextjs @sentry/replay
+yarn add @sentry/nextjs
 
 # Using npm
-npm install --save @sentry/nextjs @sentry/replay
+npm install --save @sentry/nextjs
 ```

src/wizard/javascript/replay-onboarding/nextjs/2.configure.md

@@ -11,7 +11,6 @@ Add the following to your SDK config. There are several privacy and sampling opt
 
 ```javascript {filename:sentry.client.config.js}
 import * as Sentry from "@sentry/nextjs";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
@@ -23,9 +22,7 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```
 

src/wizard/javascript/replay-onboarding/react/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/react @sentry/replay
+yarn add @sentry/react
 
 # Using npm
-npm install --save @sentry/react @sentry/replay
+npm install --save @sentry/react
 ```

src/wizard/javascript/replay-onboarding/react/2.configure.md

@@ -11,7 +11,6 @@ Add the following to your SDK config. There are several privacy and sampling opt
 
 ```javascript
 import * as Sentry from "@sentry/react";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
@@ -23,8 +22,6 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```

src/wizard/javascript/replay-onboarding/remix/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/remix @sentry/replay
+yarn add @sentry/remix
 
 # Using npm
-npm install --save @sentry/remix @sentry/replay
+npm install --save @sentry/remix
 ```

src/wizard/javascript/replay-onboarding/remix/2.configure.md

@@ -11,7 +11,6 @@ Add the following to your SDK config. There are several privacy and sampling opt
 
 ```javascript {filename: entry.client.tsx}
 import * as Sentry from "@sentry/remix";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
@@ -23,9 +22,7 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 ```
 

src/wizard/javascript/replay-onboarding/svelte/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/svelte @sentry/replay
+yarn add @sentry/svelte
 
 # Using npm
-npm install --save @sentry/svelte @sentry/replay
+npm install --save @sentry/svelte
 ```

src/wizard/javascript/replay-onboarding/svelte/2.configure.md

@@ -14,7 +14,6 @@ import "./app.css";
 import App from "./App.svelte";
 
 import * as Sentry from "@sentry/svelte";
-import { Replay } from "@sentry/replay";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
@@ -26,9 +25,7 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 
 const app = new App({

src/wizard/javascript/replay-onboarding/vue/1.install.md

@@ -11,8 +11,8 @@ For the `@sentry/replay` integration to work, you must have the Sentry browser S
 
 ```bash
 # Using yarn
-yarn add @sentry/vue @sentry/replay
+yarn add @sentry/vue
 
 # Using npm
-npm install --save @sentry/vue @sentry/replay
+npm install --save @sentry/vue
 ```

src/wizard/javascript/replay-onboarding/vue/2.configure.md

@@ -15,7 +15,6 @@ Add the following to your SDK config. There are several privacy and sampling opt
 import Vue from "vue";
 import Router from "vue-router";
 import * as Sentry from "@sentry/vue";
-import { Replay } from "@sentry/replay";
 
 Vue.use(Router);
 
@@ -34,9 +33,7 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Sentry.Replay()],
 });
 
 // ...
@@ -73,9 +70,7 @@ Sentry.init({
   // sessions when an error occurs.
   replaysOnErrorSampleRate: 1.0,
 
-  integrations: [
-    new Replay()
-  ],
+  integrations: [new Replay()],
 });
 
 app.use(router);