feat(onboarding): Generic copy DSN (#83088)

Move the "copy DSN" section into manual configuration. Add it to every platform doc that instructs to use the wizard. Closes #80179
getsentry · Jan 8, 2025 · 23036d1 · 23036d1
1 parent 6bce634
commit 23036d1
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 89 deletions.
diff --git a/static/app/components/onboarding/gettingStartedDoc/copyDsnField.tsx b/static/app/components/onboarding/gettingStartedDoc/copyDsnField.tsx
@@ -0,0 +1,40 @@
+import styled from '@emotion/styled';
+
+import type {DocsParams} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import TextCopyInput from 'sentry/components/textCopyInput';
+import {tct} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import {trackAnalytics} from 'sentry/utils/analytics';
+
+export function CopyDsnField({params}: {params: DocsParams<any>}) {
+  return (
+    <Wrapper>
+      <p>
+        {tct(
+          "If you already have the configuration for Sentry in your application, and just need this project's ([projectSlug]) DSN, you can find it below:",
+          {
+            projectSlug: <code>{params.projectSlug}</code>,
+          }
+        )}
+      </p>
+      <TextCopyInput
+        onCopy={() =>
+          trackAnalytics('onboarding.dsn-copied', {
+            organization: params.organization,
+            platform: params.platformKey,
+          })
+        }
+      >
+        {params.dsn.public}
+      </TextCopyInput>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled('div')`
+  padding-top: ${space(2)};
+  border-top: 1px solid ${p => p.theme.border};
+  display: flex;
+  flex-direction: column;
+  gap: ${space(1)};
+`;
diff --git a/static/app/gettingStartedDocs/javascript/nextjs.tsx b/static/app/gettingStartedDocs/javascript/nextjs.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list/';
 import ListItem from 'sentry/components/list/listItem';
+import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
 import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
 import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
@@ -26,11 +27,9 @@ import {
   getReplaySDKSetupSnippet,
   getReplayVerifyStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/replayOnboarding';
-import TextCopyInput from 'sentry/components/textCopyInput';
 import {featureFlagOnboarding} from 'sentry/gettingStartedDocs/javascript/javascript';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import {trackAnalytics} from 'sentry/utils/analytics';
 
 type Params = DocsParams;
 
@@ -83,68 +82,67 @@ const onboarding: OnboardingConfig = {
       configurations: getInstallConfig(params),
     },
   ],
-  configure: () => [
+  configure: params => [
     {
       title: t('Manual Configuration'),
       collapsible: true,
+      description: tct(
+        'Alternatively, you can also [manualSetupLink:set up the SDK manually], by following these steps:',
+        {
+          manualSetupLink: (
+            <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/" />
+          ),
+        }
+      ),
       configurations: [
         {
           description: (
-            <Fragment>
-              <p>
+            <List symbol="bullet">
+              <ListItem>
+                {tct(
+                  'Create [code:sentry.server.config.js], [code:sentry.client.config.js] and [code:sentry.edge.config.js] with the default [code:Sentry.init].',
+                  {
+                    code: <code />,
+                  }
+                )}
+              </ListItem>
+              <ListItem>
+                {tct(
+                  'Create or update the Next.js instrumentation file [instrumentationCode:instrumentation.ts] to initialize the SDK with the configuration files added in the previous step.',
+                  {
+                    instrumentationCode: <code />,
+                  }
+                )}
+              </ListItem>
+              <ListItem>
                 {tct(
-                  'Alternatively, you can also [manualSetupLink:set up the SDK manually], by following these steps:',
+                  'Create or update your Next.js config [nextConfig:next.config.js] with the default Sentry configuration.',
                   {
-                    manualSetupLink: (
-                      <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/" />
-                    ),
+                    nextConfig: <code />,
                   }
                 )}
-              </p>
-              <List symbol="bullet">
-                <ListItem>
-                  {tct(
-                    'Create [code:sentry.server.config.js], [code:sentry.client.config.js] and [code:sentry.edge.config.js] with the default [code:Sentry.init].',
-                    {
-                      code: <code />,
-                    }
-                  )}
-                </ListItem>
-                <ListItem>
-                  {tct(
-                    'Create or update the Next.js instrumentation file [instrumentationCode:instrumentation.ts] to initialize the SDK with the configuration files added in the previous step.',
-                    {
-                      instrumentationCode: <code />,
-                    }
-                  )}
-                </ListItem>
-                <ListItem>
-                  {tct(
-                    'Create or update your Next.js config [nextConfig:next.config.js] with the default Sentry configuration.',
-                    {
-                      nextConfig: <code />,
-                    }
-                  )}
-                </ListItem>
-                <ListItem>
-                  {tct(
-                    'Create a [bundlerPluginsEnv:.env.sentry-build-plugin] with an auth token (which is used to upload source maps when building the application).',
-                    {
-                      bundlerPluginsEnv: <code />,
-                    }
-                  )}
-                </ListItem>
-                <ListItem>
-                  {t('Add an example page to your app to verify your Sentry setup.')}
-                </ListItem>
-              </List>
-            </Fragment>
+              </ListItem>
+              <ListItem>
+                {tct(
+                  'Create a [bundlerPluginsEnv:.env.sentry-build-plugin] with an auth token (which is used to upload source maps when building the application).',
+                  {
+                    bundlerPluginsEnv: <code />,
+                  }
+                )}
+              </ListItem>
+              <ListItem>
+                {t('Add an example page to your app to verify your Sentry setup.')}
+              </ListItem>
+            </List>
           ),
         },
+        {
+          description: <CopyDsnField params={params} />,
+        },
       ],
     },
   ],
-  verify: (params: Params) => [
+  verify: () => [
     {
       type: StepType.VERIFY,
       description: (
@@ -183,28 +181,6 @@ const onboarding: OnboardingConfig = {
               'If you see an issue in your Sentry dashboard, you have successfully set up Sentry with Next.js.'
             )}
           </p>
-          <Divider />
-          <DSNText>
-            <p>
-              {tct(
-                "If you already have the configuration for Sentry in your application, and just need this project's ([projectSlug]) DSN, you can find it below:",
-                {
-                  projectSlug: <code>{params.projectSlug}</code>,
-                }
-              )}
-            </p>
-          </DSNText>
-          {params.organization && (
-            <TextCopyInput
-              onCopy={() =>
-                trackAnalytics('onboarding.nextjs-dsn-copied', {
-                  organization: params.organization,
-                })
-              }
-            >
-              {params.dsn.public}
-            </TextCopyInput>
-          )}
         </Fragment>
       ),
     },
@@ -430,21 +406,8 @@ const docs: Docs = {
 
 export default docs;
 
-const DSNText = styled('div')`
-  margin-bottom: ${space(0.5)};
-`;
-
 const AdditionalInfoWrapper = styled('div')`
   display: flex;
   flex-direction: column;
   gap: ${space(2)};
 `;
-
-const Divider = styled('hr')`
-  height: 1px;
-  width: 100%;
-  background: ${p => p.theme.border};
-  border: none;
-  margin-top: ${space(1)};
-  margin-bottom: ${space(2)};
-`;
diff --git a/static/app/gettingStartedDocs/javascript/nuxt.tsx b/static/app/gettingStartedDocs/javascript/nuxt.tsx
@@ -3,6 +3,7 @@ import {Fragment} from 'react';
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list/';
 import ListItem from 'sentry/components/list/listItem';
+import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
 import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
 import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
@@ -80,7 +81,7 @@ const onboarding: OnboardingConfig = {
       configurations: getConfigStep(params),
     },
   ],
-  configure: () => [
+  configure: params => [
     {
       title: t('Manual Configuration'),
       collapsible: true,
@@ -112,6 +113,9 @@ const onboarding: OnboardingConfig = {
             </List>
           ),
         },
+        {
+          description: <CopyDsnField params={params} />,
+        },
       ],
     },
   ],

diff --git a/static/app/gettingStartedDocs/javascript/remix.tsx b/static/app/gettingStartedDocs/javascript/remix.tsx
@@ -3,6 +3,7 @@ import {Fragment} from 'react';
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list';
 import ListItem from 'sentry/components/list/listItem';
+import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
 import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
 import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
@@ -73,7 +74,7 @@ const onboarding: OnboardingConfig = {
       configurations: getConfigStep(params),
     },
   ],
-  configure: () => [
+  configure: params => [
     {
       collapsible: true,
       title: t('Manual Configuration'),
@@ -124,6 +125,9 @@ const onboarding: OnboardingConfig = {
             </List>
           ),
         },
+        {
+          description: <CopyDsnField params={params} />,
+        },
       ],
     },
   ],

diff --git a/static/app/gettingStartedDocs/javascript/sveltekit.tsx b/static/app/gettingStartedDocs/javascript/sveltekit.tsx
@@ -3,6 +3,7 @@ import {Fragment} from 'react';
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list/';
 import ListItem from 'sentry/components/list/listItem';
+import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField';
 import crashReportCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/crashReportCallout';
 import widgetCallout from 'sentry/components/onboarding/gettingStartedDoc/feedback/widgetCallout';
 import TracePropagationMessage from 'sentry/components/onboarding/gettingStartedDoc/replay/tracePropagationMessage';
@@ -68,7 +69,7 @@ const onboarding: OnboardingConfig = {
       configurations: getConfigStep(params),
     },
   ],
-  configure: () => [
+  configure: params => [
     {
       title: t('Manual Configuration'),
       collapsible: true,
@@ -111,6 +112,9 @@ const onboarding: OnboardingConfig = {
             </List>
           ),
         },
+        {
+          description: <CopyDsnField params={params} />,
+        },
       ],
     },
   ],

diff --git a/static/app/utils/analytics/onboardingAnalyticsEvents.tsx b/static/app/utils/analytics/onboardingAnalyticsEvents.tsx
@@ -20,6 +20,9 @@ export type OnboardingEventParameters = {
     platform: string;
     project_id: string;
   };
+  'onboarding.dsn-copied': {
+    platform: string;
+  };
   'onboarding.js_loader_npm_docs_shown': {
     platform: string;
     project_id: string;
@@ -35,7 +38,6 @@ export type OnboardingEventParameters = {
     project_id: string;
     step: string;
   };
-  'onboarding.nextjs-dsn-copied': {};
   'onboarding.select_framework_modal_close_button_clicked': {
     platform: string;
   };
@@ -94,7 +96,7 @@ export const onboardingEventMap: Record<keyof OnboardingEventParameters, string>
     'Onboarding: Source Maps Wizard Copy Button Clicked',
   'onboarding.source_maps_wizard_selected_and_copied':
     'Onboarding: Source Maps Wizard Selected and Copied',
-  'onboarding.nextjs-dsn-copied': 'Onboarding: NextJS DSN Copied',
+  'onboarding.dsn-copied': 'Onboarding: DSN Copied',
   'onboarding.take_me_to_issues_clicked': 'Onboarding: Take Me to Issues Clicked',
   'onboarding.slack_setup_clicked': 'Onboarding: Slack Setup Clicked',
   'onboarding.next_step_clicked': 'Onboarding: Next Step Clicked',