feat(ddm-onboarding): Add js server instructions (#63189)

Add custom metrics onboarding instructions for the platforms
`bun`,`node`,`node-express`,`node-koa`,`node-connect` and
`node-azurefunctions`.

- closes https://github.com/getsentry/sentry/issues/63182

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

@@ -5,6 +5,7 @@ import type {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {t, tct} from 'sentry/locale';
+import {getInstallConfig as getNodeInstallConfig} from 'sentry/utils/gettingStartedDocs/node';
 
 const getJSConfigureSnippet = (params: DocsParams) => `
 Sentry.init({
@@ -104,6 +105,98 @@ export const getJSMetricsOnboarding = ({
   ],
 });
 
+const getJSServerConfigureSnippet = (params: DocsParams) => `
+Sentry.init({
+  dsn: "${params.dsn}",
+  _experiments: {
+    metricsAggregator: true,
+  },
+});`;
+
+export const getJSServerMetricsOnboarding = (): OnboardingConfig => ({
+  install: params => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version [codeVersion:4.17.0] of [codeNode:@sentry/node], [codeDeno:@sentry/deno] or [codeBun:@sentry/bun].',
+        {
+          codeVersion: <code />,
+          codeNode: <code />,
+          codeDeno: <code />,
+          codeBun: <code />,
+        }
+      ),
+      configurations: getNodeInstallConfig(params),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'To enable capturing metrics, you first need to add the [codeIntegration:metricsAggregator] experiment to your [codeNamespace:Sentry.init] call in your main process.',
+        {
+          codeIntegration: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getJSServerConfigureSnippet(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. This API is available in both renderer and main processes. 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://github.com/getsentry/sentry-javascript/discussions/9973" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+});
+
 const getPythonConfigureSnippet = () => `
 import sentry_sdk
 

static/app/data/platformCategories.tsx

@@ -378,6 +378,7 @@ export const replayJsLoaderInstructionsPlatformList: readonly PlatformKey[] = [
 ];
 
 const customMetricBackendPlatforms: readonly PlatformKey[] = [
+  'bun',
   'php',
   'php-laravel',
   // TODO: Enable once metrics are available for Symfony
@@ -406,6 +407,11 @@ const customMetricBackendPlatforms: readonly PlatformKey[] = [
   'python-tryton',
   'python-wsgi',
   'rust',
+  'node',
+  'node-express',
+  'node-koa',
+  'node-connect',
+  'node-azurefunctions',
 ];
 
 const customMetricFrontendPlatforms: readonly PlatformKey[] = [

static/app/gettingStartedDocs/bun/bun.tsx

@@ -1,3 +1,4 @@
+import ExternalLink from 'sentry/components/links/externalLink';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import type {
   Docs,
@@ -5,10 +6,17 @@ import type {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
 
+const getInstallConfig = () => [
+  {
+    language: 'bash',
+    code: 'bun add @sentry/bun',
+  },
+];
+
 const getConfigureSnippet = (params: Params) => `
 //...
 import * as Sentry from "@sentry/bun";
@@ -29,6 +37,18 @@ const getVerifySnippet = () => `try {
   Sentry.captureException(e);
 }`;
 
+const getMetricsConfigureSnippet = (params: DocsParams) => `
+Sentry.init({
+  dsn: "${params.dsn}",
+  _experiments: {
+    metricsAggregator: true,
+  },
+});`;
+
+const getMetricsVerifySnippet = () => `
+// Add 4 to a counter named 'hits'
+Sentry.metrics.increment('hits', 4);`;
+
 const onboarding: OnboardingConfig = {
   install: () => [
     {
@@ -36,12 +56,7 @@ const onboarding: OnboardingConfig = {
       description: t(
         "Sentry captures data by using an SDK within your application's runtime."
       ),
-      configurations: [
-        {
-          language: 'bash',
-          code: 'bun add @sentry/bun',
-        },
-      ],
+      configurations: getInstallConfig(),
     },
   ],
   configure: params => [
@@ -87,9 +102,92 @@ const onboarding: OnboardingConfig = {
         ],
 };
 
+const customMetricsOnboarding: OnboardingConfig = {
+  install: () => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need a minimum version [codeVersion:4.17.0] of [codePackage:@sentry/bun].',
+        {
+          codeVersion: <code />,
+          codePackage: <code />,
+        }
+      ),
+      configurations: getInstallConfig(),
+    },
+  ],
+  configure: params => [
+    {
+      type: StepType.CONFIGURE,
+      description: tct(
+        'To enable capturing metrics, you first need to add the [codeIntegration:metricsAggregator] experiment to your [codeNamespace:Sentry.init] call in your main process.',
+        {
+          codeIntegration: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'JavaScript',
+              value: 'javascript',
+              language: 'javascript',
+              code: getMetricsConfigureSnippet(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. This API is available in both renderer and main processes. 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.'
+          ),
+        },
+        {
+          description: tct(
+            'Learn more about metrics and how to configure them, by reading the [docsLink:docs].',
+            {
+              docsLink: (
+                <ExternalLink href="https://github.com/getsentry/sentry-javascript/discussions/9973" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+};
+
 const docs: Docs = {
   onboarding,
   replayOnboardingJsLoader,
+  customMetricsOnboarding,
 };
 
 export default docs;

static/app/gettingStartedDocs/electron/electron.tsx

@@ -236,7 +236,7 @@ const customMetricsOnboarding: OnboardingConfig = {
             'Learn more about metrics and how to configure them, by reading the [docsLink:docs].',
             {
               docsLink: (
-                <ExternalLink href="https://github.com/getsentry/sentry-javascript/discussions/9938" />
+                <ExternalLink href="https://github.com/getsentry/sentry-javascript/discussions/10110" />
               ),
             }
           ),

static/app/gettingStartedDocs/node/awslambda.tsx

@@ -9,7 +9,7 @@ import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 import {
   getDefaulServerlessImports,
-  getInstallSnippet,
+  getInstallConfig,
   ProductSelectionMap,
 } from 'sentry/utils/gettingStartedDocs/node';
 
@@ -64,32 +64,9 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: t('Add the Sentry Serverless SDK as a dependency:'),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: getInstallSnippet({
-                basePackage: '@sentry/serverless',
-                productSelection: productSelection(params),
-                packageManager: 'npm',
-              }),
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: getInstallSnippet({
-                basePackage: '@sentry/serverless',
-                productSelection: productSelection(params),
-                packageManager: 'yarn',
-              }),
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(params, {
+        basePackage: '@sentry/serverless',
+      }),
     },
   ],
   configure: params => [

static/app/gettingStartedDocs/node/azurefunctions.tsx

@@ -5,11 +5,12 @@ import {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 import {
   getDefaultNodeImports,
-  getInstallSnippet,
+  getInstallConfig,
   ProductSelectionMap,
 } from 'sentry/utils/gettingStartedDocs/node';
 
@@ -72,30 +73,7 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: t('Add the Sentry Node SDK as a dependency:'),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'npm',
-              }),
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'yarn',
-              }),
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(params),
     },
   ],
   configure: params => [
@@ -127,6 +105,7 @@ const onboarding: OnboardingConfig = {
 
 const docs: Docs = {
   onboarding,
+  customMetricsOnboarding: getJSServerMetricsOnboarding(),
 };
 
 export default docs;

static/app/gettingStartedDocs/node/connect.tsx

@@ -5,11 +5,12 @@ import {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t} from 'sentry/locale';
 import {
   getDefaultNodeImports,
-  getInstallSnippet,
+  getInstallConfig,
   ProductSelectionMap,
 } from 'sentry/utils/gettingStartedDocs/node';
 
@@ -84,30 +85,7 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: t('Add the Sentry Node SDK as a dependency:'),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'npm',
-              }),
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'yarn',
-              }),
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(params),
     },
   ],
   configure: params => [
@@ -131,6 +109,7 @@ const onboarding: OnboardingConfig = {
 
 const docs: Docs = {
   onboarding,
+  customMetricsOnboarding: getJSServerMetricsOnboarding(),
 };
 
 export default docs;

static/app/gettingStartedDocs/node/express.tsx

@@ -5,12 +5,13 @@ import {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 import {
   getDefaultNodeImports,
-  getInstallSnippet,
+  getInstallConfig,
   ProductSelectionMap,
 } from 'sentry/utils/gettingStartedDocs/node';
 
@@ -96,30 +97,7 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: t('Add the Sentry Node SDK as a dependency:'),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'npm',
-              }),
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'yarn',
-              }),
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(params),
     },
   ],
   configure: (params: Params) => [
@@ -170,6 +148,7 @@ const onboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingJsLoader,
+  customMetricsOnboarding: getJSServerMetricsOnboarding(),
 };
 
 export default docs;

static/app/gettingStartedDocs/node/koa.tsx

@@ -5,11 +5,12 @@ import {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import {t, tct} from 'sentry/locale';
 import {
   getDefaultNodeImports,
-  getInstallSnippet,
+  getInstallConfig,
   ProductSelectionMap,
 } from 'sentry/utils/gettingStartedDocs/node';
 
@@ -156,32 +157,9 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: t('Add the Sentry Node SDK as a dependency:'),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: getInstallSnippet({
-                additionalPackages: params.isPerformanceSelected ? ['@sentry/utils'] : [],
-                productSelection: productSelection(params),
-                packageManager: 'npm',
-              }),
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: getInstallSnippet({
-                additionalPackages: params.isPerformanceSelected ? ['@sentry/utils'] : [],
-                productSelection: productSelection(params),
-                packageManager: 'yarn',
-              }),
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(params, {
+        additionalPackages: params.isPerformanceSelected ? ['@sentry/utils'] : [],
+      }),
     },
   ],
   configure: params => [
@@ -221,6 +199,7 @@ const onboarding: OnboardingConfig = {
 
 const docs: Docs = {
   onboarding,
+  customMetricsOnboarding: getJSServerMetricsOnboarding(),
 };
 
 export default docs;

static/app/gettingStartedDocs/node/node.tsx

@@ -5,12 +5,13 @@ import {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils';
+import {getJSServerMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {ProductSolution} from 'sentry/components/onboarding/productSelection';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 import {
   getDefaultNodeImports,
-  getInstallSnippet,
+  getInstallConfig,
   ProductSelectionMap,
 } from 'sentry/utils/gettingStartedDocs/node';
 
@@ -57,30 +58,7 @@ const onboarding: OnboardingConfig = {
     {
       type: StepType.INSTALL,
       description: t('Add the Sentry Node SDK as a dependency:'),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'npm',
-              value: 'npm',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'npm',
-              }),
-            },
-            {
-              label: 'yarn',
-              value: 'yarn',
-              language: 'bash',
-              code: getInstallSnippet({
-                productSelection: productSelection(params),
-                packageManager: 'yarn',
-              }),
-            },
-          ],
-        },
-      ],
+      configurations: getInstallConfig(params),
     },
   ],
   configure: (params: Params) => [
@@ -141,6 +119,7 @@ const onboarding: OnboardingConfig = {
 const docs: Docs = {
   onboarding,
   replayOnboardingJsLoader,
+  customMetricsOnboarding: getJSServerMetricsOnboarding(),
 };
 
 export default docs;