feat(javascript-onboarding): Add replay verify step (#77061)

Add verify step in replay onboarding for javascript platforms.

static/app/gettingStartedDocs/electron/electron.tsx

@@ -21,6 +21,7 @@ import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStarted
 import {
   getReplayConfigureDescription,
   getReplaySDKSetupSnippet,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -168,7 +169,7 @@ const replayOnboarding: OnboardingConfig = {
       ],
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -26,6 +26,7 @@ import {
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
@@ -356,19 +357,7 @@ const replayOnboarding: OnboardingConfig = {
       additionalInfo: <TracePropagationMessage />,
     },
   ],
-  verify: () => [
-    {
-      type: StepType.VERIFY,
-      configurations: [
-        getVerifyConfiguration(),
-        {
-          description: t(
-            'After clicking the button, wait a few moments, and you\'ll see a new session appear on the "Replays" page.'
-          ),
-        },
-      ],
-    },
-  ],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -19,7 +19,10 @@ import {
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {getProfilingDocumentHeaderConfigurationStep} from 'sentry/components/onboarding/gettingStartedDoc/utils/profilingOnboarding';
-import {getReplaySDKSetupSnippet} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
+import {
+  getReplaySDKSetupSnippet,
+  getReplayVerifyStep,
+} from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -52,7 +55,7 @@ export default defineConfig({
 });
 `;
 
-const getVerifyAstroSnippet = () => `
+const getVerifySnippet = () => `
 <!-- your-page.astro -->
 ---
 ---
@@ -160,7 +163,7 @@ const onboarding: OnboardingConfig = {
               label: 'Astro',
               value: 'html',
               language: 'html',
-              code: getVerifyAstroSnippet(),
+              code: getVerifySnippet(),
             },
           ],
         },
@@ -302,7 +305,7 @@ import * as Sentry from "@sentry/astro";`,
       isOptional: true,
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -23,6 +23,7 @@ import {
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -220,7 +221,7 @@ const replayOnboarding: OnboardingConfig = {
       additionalInfo: <TracePropagationMessage />,
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -25,6 +25,7 @@ import {
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -92,7 +93,7 @@ const root = createRoot(container);
 root.render(<App />);
 `;
 
-const getVerifyGatsbySnippet = () => `
+const getVerifySnippet = () => `
 myUndefinedFunction();`;
 
 const getConfigureStep = (params: Params) => {
@@ -191,7 +192,7 @@ const onboarding: OnboardingConfig = {
               label: 'JavaScript',
               value: 'javascript',
               language: 'javascript',
-              code: getVerifyGatsbySnippet(),
+              code: getVerifySnippet(),
             },
           ],
         },
@@ -254,7 +255,7 @@ const replayOnboarding: OnboardingConfig = {
       ),
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -23,6 +23,7 @@ import {
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
@@ -221,7 +222,7 @@ const replayOnboarding: OnboardingConfig = {
       additionalInfo: <TracePropagationMessage />,
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/nextjs.tsx

@@ -24,6 +24,7 @@ import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStarte
 import {
   getReplayConfigureDescription,
   getReplaySDKSetupSnippet,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import TextCopyInput from 'sentry/components/textCopyInput';
 import {t, tct} from 'sentry/locale';
@@ -200,7 +201,7 @@ const replayOnboarding: OnboardingConfig = {
       ),
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/react.tsx

@@ -23,6 +23,7 @@ import {
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -91,9 +92,9 @@ const root = createRoot(container);
 root.render(<App />);
 `;
 
-const getVerifyReactSnippet = () => `
+const getVerifySnippet = () => `
 return <button onClick={() => methodDoesNotExist()}>Break the world</button>;
-        `;
+`;
 
 const getInstallConfig = () => [
   {
@@ -121,11 +122,8 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: tct(
-        'Add the Sentry SDK as a dependency using [codeNpm:npm] or [codeYarn:yarn]:',
-        {
-          codeYarn: <code />,
-          codeNpm: <code />,
-        }
+        'Add the Sentry SDK as a dependency using [code:npm] or [code:yarn]:',
+        {code: <code />}
       ),
       configurations: getInstallConfig(),
     },
@@ -169,7 +167,7 @@ const onboarding: OnboardingConfig = {
               label: 'React',
               value: 'react',
               language: 'javascript',
-              code: getVerifyReactSnippet(),
+              code: getVerifySnippet(),
             },
           ],
         },
@@ -215,12 +213,8 @@ const replayOnboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: tct(
-        'Add the Sentry SDK as a dependency using [codeNpm:npm] or [codeYarn:yarn]. You need a minimum version 7.27.0 of [code:@sentry/react] in order to use Session Replay. You do not need to install any additional packages.',
-        {
-          code: <code />,
-          codeYarn: <code />,
-          codeNpm: <code />,
-        }
+        'Add the Sentry SDK as a dependency using [code:npm] or [code:yarn]. You need a minimum version 7.27.0 of [code:@sentry/react] in order to use Session Replay. You do not need to install any additional packages.',
+        {code: <code />}
       ),
       configurations: getInstallConfig(),
     },
@@ -246,7 +240,7 @@ const replayOnboarding: OnboardingConfig = {
       ],
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/remix.tsx

@@ -23,6 +23,7 @@ import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStarte
 import {
   getReplayConfigureDescription,
   getReplaySDKSetupSnippet,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -30,7 +31,6 @@ type Params = DocsParams;
 
 const getConfigStep = ({isSelfHosted, urlPrefix}: Params) => {
   const urlParam = !isSelfHosted && urlPrefix ? `--url ${urlPrefix}` : '';
-
   return [
     {
       description: tct(
@@ -164,7 +164,7 @@ const replayOnboarding: OnboardingConfig = {
       ),
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };
 

static/app/gettingStartedDocs/javascript/solid.tsx

@@ -23,6 +23,7 @@ import {
 import {
   getReplayConfigOptions,
   getReplayConfigureDescription,
+  getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
 import {t, tct} from 'sentry/locale';
 
@@ -94,7 +95,7 @@ if (!app) throw new Error("No #app element found in the DOM.");
 render(() => <App />, app);
 `;
 
-const getVerifySolidSnippet = () => `
+const getVerifySnippet = () => `
 <button
   type="button"
   onClick={() => {
@@ -179,7 +180,7 @@ const onboarding: OnboardingConfig = {
               label: 'JavaScript',
               value: 'javascript',
               language: 'javascript',
-              code: getVerifySolidSnippet(),
+              code: getVerifySnippet(),
             },
           ],
         },
@@ -246,7 +247,7 @@ const replayOnboarding: OnboardingConfig = {
       ],
     },
   ],
-  verify: () => [],
+  verify: getReplayVerifyStep(),
   nextSteps: () => [],
 };