feat(dmm): Add JS onboarding (#62074)

Add metrics onboarding docs for all JS platforms.

- part of https://github.com/getsentry/sentry/issues/60250

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

@@ -0,0 +1,105 @@
+import ExternalLink from 'sentry/components/links/externalLink';
+import {StepProps, StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
+import type {
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {t, tct} from 'sentry/locale';
+
+const getJSInstallSnippet = (params: DocsParams) => `
+Sentry.init({
+  dsn: "${params.dsn}",
+  integrations: [
+    new Sentry.metrics.MetricsAggregator(),
+  ],
+});`;
+
+const getJSVerifySnippet = () => `
+// Add 4 to a counter named 'hits'
+Sentry.metrics.increment('hits', 4);`;
+
+export const getJSMetricsOnboarding = ({
+  getInstallConfig,
+}: {
+  getInstallConfig: (params: DocsParams<any>) => StepProps['configurations'];
+}): OnboardingConfig => ({
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version [codeVersion:7.88.0] of the Sentry browser SDK package, or an equivalent framework SDK (e.g. [codePackage:@sentry/react]) installed.',
+        {
+          codeVersion: <code />,
+          codePackage: <code />,
+        }
+      ),
+      configurations: getInstallConfig(params),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'To enable capturing metrics, you first need to add the [codeIntegration:MetricsAggregator] integration under the [codeNamespace:Sentry.metrics] namespace.',
+        {
+          codeIntegration: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getJSInstallSnippet(params),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      description: tct(
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. Try out this example:",
+        {
+          codeCounters: <code />,
+          codeSets: <code />,
+          codeDistribution: <code />,
+          codeGauge: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getJSVerifySnippet(),
+            },
+          ],
+        },
+        {
+          description: t(
+            'With a bit of delay you can see the data appear in the Sentry UI.'
+          ),
+        },
+        {
+          description: tct(
+            'Learn more about metrics and how to configure them, by reading the [docsLink:docs].',
+            {
+              docsLink: (
+                <ExternalLink href="https://develop.sentry.dev/delightful-developer-metrics/sending-metrics-sdk/" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+});

static/app/data/platformCategories.tsx

@@ -401,6 +401,7 @@ const customMetricBackendPlatforms: readonly PlatformKey[] = [
 ];
 
 const customMetricFrontendPlatforms: readonly PlatformKey[] = [
+  'electron',
   'javascript-angular',
   'javascript-astro',
   'javascript-backbone',
@@ -427,4 +428,16 @@ export const customMetricPlatforms: Set<PlatformKey> = new Set([
  * The list of platforms for which we have created onboarding instructions.
  * Should be a subset of the list of `customMetricPlatforms`.
  */
-export const customMetricOnboardingPlatforms = new Set(['javascript']);
+export const customMetricOnboardingPlatforms = new Set(
+  [...customMetricPlatforms].filter(
+    p =>
+      // Legacy platforms that do not have in-product docs
+      !['javascript-backbone', 'javascript-capacitor', 'javascript-electron'].includes(
+        p
+      ) &&
+      // TODO: Remove this once we have onboarding instructions for these platforms
+      !p.includes('php') &&
+      !p.includes('python') &&
+      p !== 'rust'
+  )
+);

static/app/gettingStartedDocs/electron/electron.tsx

@@ -10,6 +10,7 @@ import {
   getReplaySDKSetupSnippet,
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -148,6 +149,7 @@ const replayOnboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/angular.tsx

@@ -9,6 +9,7 @@ import {
   getReplayConfigureDescription,
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 
@@ -294,6 +295,7 @@ const docs: Docs<PlatformOptions> = {
   onboarding,
   platformOptions,
   replayOnboardingNpm: replayOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/astro.tsx

@@ -11,6 +11,7 @@ import {
   getReplayConfigureDescription,
   getReplaySDKSetupSnippet,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -226,6 +227,7 @@ const replayOnboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/ember.tsx

@@ -8,6 +8,7 @@ import {
   getReplayConfigureDescription,
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -189,6 +190,7 @@ const replayOnboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/gatsby.tsx

@@ -8,6 +8,7 @@ import {
   getReplayConfigureDescription,
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -212,6 +213,7 @@ const replayOnboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/javascript.tsx

@@ -8,6 +8,7 @@ import {
   getReplayConfigureDescription,
   getUploadSourceMapsStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
@@ -49,14 +50,6 @@ Sentry.init({
 });
 `;
 
-const getMetricsInstallSnippet = (params: Params) => `
-Sentry.init({
-  dsn: "${params.dsn}",
-  integrations: [
-    new Sentry.metrics.MetricsAggregator(),
-  ],
-});`;
-
 const getVerifyJSSnippet = () => `
 myUndefinedFunction();`;
 
@@ -80,10 +73,6 @@ const getInstallConfig = () => [
   },
 ];
 
-const getMetricsVerifySnippet = () => `
-// Add 4 to a counter named 'hits'
-Sentry.metrics.increment('hits', 4);`;
-
 const onboarding: OnboardingConfig = {
   install: () => [
     {
@@ -194,83 +183,11 @@ const replayOnboarding: OnboardingConfig = {
   nextSteps: () => [],
 };
 
-const customMetricsOnboarding: OnboardingConfig = {
-  install: () => [
-    {
-      type: StepType.INSTALL,
-      description: tct(
-        'You need a minimum version [codeVersion:7.88.0] of the Sentry browser SDK package, or an equivalent framework SDK (e.g. [codePackage:@sentry/react]) installed.',
-        {
-          codeVersion: <code />,
-          codePackage: <code />,
-        }
-      ),
-      configurations: getInstallConfig(),
-    },
-  ],
-  configure: (params: Params) => [
-    {
-      type: StepType.CONFIGURE,
-      description: tct(
-        'To enable capturing metrics, you first need to add the [codeIntegration:MetricsAggregator] integration under the [codeNamespace:Sentry.metrics] namespace.',
-        {
-          codeIntegration: <code />,
-          codeNamespace: <code />,
-        }
-      ),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'JavaScript',
-              value: 'javascript',
-              language: 'javascript',
-              code: getMetricsInstallSnippet(params),
-            },
-          ],
-        },
-      ],
-    },
-  ],
-  verify: () => [
-    {
-      type: StepType.VERIFY,
-      description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. Try out this example:",
-        {
-          codeCounters: <code />,
-          codeSets: <code />,
-          codeDistribution: <code />,
-          codeGauge: <code />,
-          codeNamespace: <code />,
-        }
-      ),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'JavaScript',
-              value: 'javascript',
-              language: 'javascript',
-              code: getMetricsVerifySnippet(),
-            },
-          ],
-        },
-        {
-          description: t(
-            'With a bit of delay you can see the data appear in the Sentry UI'
-          ),
-        },
-      ],
-    },
-  ],
-};
-
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
   replayOnboardingJsLoader,
-  customMetricsOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/nextjs.tsx

@@ -14,6 +14,7 @@ import {
   getReplayConfigureDescription,
   getReplaySDKSetupSnippet,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import TextCopyInput from 'sentry/components/textCopyInput';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -36,6 +37,26 @@ const getInstallConfig = () => [
   },
 ];
 
+const getManualInstallConfig = () => [
+  {
+    language: 'bash',
+    code: [
+      {
+        label: 'npm',
+        value: 'npm',
+        language: 'bash',
+        code: 'npm install --save @sentry/nextjs',
+      },
+      {
+        label: 'yarn',
+        value: 'yarn',
+        language: 'bash',
+        code: 'yarn add @sentry/nextjs',
+      },
+    ],
+  },
+];
+
 const onboarding: OnboardingConfig = {
   install: (params: Params) => [
     {
@@ -158,6 +179,9 @@ const replayOnboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingNpm: replayOnboarding,
+  customMetricsOnboarding: getJSMetricsOnboarding({
+    getInstallConfig: getManualInstallConfig,
+  }),
 };
 
 export default docs;