feat(onboarding): Use Sentry.replayIntegration for replay onboarding (#64389)

The previous Replay integration has been deprecated for the upcoming v8
release of the JS SDK. `new Sentry.Replay` is gone and replaced with
`Sentry.replayIntegration()`.

See
https://github.com/getsentry/sentry-javascript/blob/develop/MIGRATION.md#deprecate-class-based-integrations

static/app/components/onboarding/gettingStartedDoc/utils/index.tsx

@@ -84,7 +84,7 @@ export const getReplayJsLoaderSdkSetupSnippet = (params: DocsParams) => `
   Sentry.onLoad(function() {
     Sentry.init({
       integrations: [
-        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),
+        Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),
       ],
       // Session Replay
       replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
@@ -110,7 +110,7 @@ export const getReplaySDKSetupSnippet = ({
     dsn: "${dsn}",
 
     integrations: [
-      new Sentry.Replay(${getReplayConfigOptions({
+      Sentry.replayIntegration(${getReplayConfigOptions({
         mask,
         block,
       })}),

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -214,7 +214,7 @@ function getSdkSetupSnippet(params: Params) {
     }${
       params.isReplaySelected
         ? `
-          new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+          Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
         : ''
     }
   ],${

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -36,7 +36,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+        Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -33,7 +33,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+        Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -32,7 +32,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+        Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${

static/app/gettingStartedDocs/javascript/react.tsx

@@ -32,7 +32,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+        Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${

static/app/gettingStartedDocs/javascript/svelte.tsx

@@ -34,7 +34,7 @@ Sentry.init({
   }${
     params.isReplaySelected
       ? `
-        new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+        Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
       : ''
   }
 ],${

static/app/gettingStartedDocs/javascript/vue.tsx

@@ -55,7 +55,7 @@ const getSentryInitLayout = (params: Params, siblingOption: string): string => {
     }${
       params.isReplaySelected
         ? `
-          new Sentry.Replay(${getReplayConfigOptions(params.replayOptions)}),`
+          Sentry.replayIntegration(${getReplayConfigOptions(params.replayOptions)}),`
         : ''
     }
   ],${