feat(onboarding): Add JS onboarding for cloudflare (#103214)

chargome · andrewshie-sentry · commit 37d1bff70c86 · 2025-11-12T16:22:22.000-08:00
ref getsentry/sentry-javascript#18147 ref https://linear.app/getsentry/issue/JS-1142/add-missing-metrics-exports-for-cloudflare
diff --git a/static/app/gettingStartedDocs/node-cloudflare-pages/index.tsx b/static/app/gettingStartedDocs/node-cloudflare-pages/index.tsx
@@ -4,6 +4,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {logs} from './logs';
 import {mcp} from './mcp';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 
 const docs: Docs = {
@@ -12,6 +13,7 @@ const docs: Docs = {
   logsOnboarding: logs,
   agentMonitoringOnboarding: agentMonitoring,
   mcpOnboarding: mcp,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/node-cloudflare-pages/metrics.tsx b/static/app/gettingStartedDocs/node-cloudflare-pages/metrics.tsx
@@ -0,0 +1,6 @@
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
+
+export const metrics = getNodeMetricsOnboarding({
+  docsPlatform: 'cloudflare',
+  packageName: '@sentry/cloudflare',
+});
diff --git a/static/app/gettingStartedDocs/node-cloudflare-pages/onboarding.spec.tsx b/static/app/gettingStartedDocs/node-cloudflare-pages/onboarding.spec.tsx
@@ -105,4 +105,28 @@ describe('cloudflare-pages onboarding docs', () => {
 
     expect(screen.getByText('Cloudflare Features')).toBeInTheDocument();
   });
+
+  it('displays metrics code in verify section when metrics are selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.METRICS],
+    });
+
+    expect(
+      screen.getByText(
+        textWithMarkupMatcher(/Sentry\.metrics\.count\('test_counter', 1\)/)
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('does not display metrics code in verify section when metrics are not selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING],
+    });
+
+    expect(
+      screen.queryByText(
+        textWithMarkupMatcher(/Sentry\.metrics\.count\('test_counter', 1\)/)
+      )
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/static/app/gettingStartedDocs/node-cloudflare-pages/onboarding.tsx b/static/app/gettingStartedDocs/node-cloudflare-pages/onboarding.tsx
@@ -59,11 +59,20 @@ export function onRequest(context) {${
   // Send a log before throwing the error
   Sentry.logger.info('User triggered test error', {
     action: 'test_error_function',
-  });`
+  });
+`
+    : ''
+}${
+  params.isMetricsSelected
+    ? `
+// Send a test metric before throwing the error
+Sentry.metrics.count('test_counter', 1);
+`
     : ''
 }
+setTimeout(() => {
   throw new Error();
-}`;
+});}`;
 
 export const onboarding: OnboardingConfig = {
   introduction: () =>
diff --git a/static/app/gettingStartedDocs/node-cloudflare-workers/index.tsx b/static/app/gettingStartedDocs/node-cloudflare-workers/index.tsx
@@ -4,6 +4,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {logs} from './logs';
 import {mcp} from './mcp';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 
 const docs: Docs = {
@@ -12,6 +13,7 @@ const docs: Docs = {
   logsOnboarding: logs,
   agentMonitoringOnboarding: agentMonitoring,
   mcpOnboarding: mcp,
+  metricsOnboarding: metrics,
 };
 
 export default docs;
diff --git a/static/app/gettingStartedDocs/node-cloudflare-workers/metrics.tsx b/static/app/gettingStartedDocs/node-cloudflare-workers/metrics.tsx
@@ -0,0 +1,6 @@
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
+
+export const metrics = getNodeMetricsOnboarding({
+  docsPlatform: 'cloudflare',
+  packageName: '@sentry/cloudflare',
+});
diff --git a/static/app/gettingStartedDocs/node-cloudflare-workers/onboarding.spec.tsx b/static/app/gettingStartedDocs/node-cloudflare-workers/onboarding.spec.tsx
@@ -105,4 +105,28 @@ describe('cloudflare-workers onboarding docs', () => {
 
     expect(screen.getByText('Cloudflare Features')).toBeInTheDocument();
   });
+
+  it('displays metrics code in verify section when metrics are selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING, ProductSolution.METRICS],
+    });
+
+    expect(
+      screen.getByText(
+        textWithMarkupMatcher(/Sentry\.metrics\.count\('test_counter', 1\)/)
+      )
+    ).toBeInTheDocument();
+  });
+
+  it('does not display metrics code in verify section when metrics are not selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [ProductSolution.ERROR_MONITORING],
+    });
+
+    expect(
+      screen.queryByText(
+        textWithMarkupMatcher(/Sentry\.metrics\.count\('test_counter', 1\)/)
+      )
+    ).not.toBeInTheDocument();
+  });
 });
diff --git a/static/app/gettingStartedDocs/node-cloudflare-workers/onboarding.tsx b/static/app/gettingStartedDocs/node-cloudflare-workers/onboarding.tsx
@@ -62,6 +62,13 @@ Sentry.logger.info('User triggered test error', {
   action: 'test_error_worker',
 });`
     : ''
+}${
+  params.isMetricsSelected
+    ? `
+// Send a test metric before throwing the error
+Sentry.metrics.count('test_counter', 1);
+`
+    : ''
 }
 setTimeout(() => {
   throw new Error();
diff --git a/static/app/gettingStartedDocs/node-connect/metrics.tsx b/static/app/gettingStartedDocs/node-connect/metrics.tsx
@@ -1,4 +1,4 @@
-import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/utils';
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
 
 export const metrics = getNodeMetricsOnboarding({
   docsPlatform: 'connect',
diff --git a/static/app/gettingStartedDocs/node-express/metrics.tsx b/static/app/gettingStartedDocs/node-express/metrics.tsx
@@ -1,4 +1,4 @@
-import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/utils';
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
 
 export const metrics = getNodeMetricsOnboarding({
   docsPlatform: 'express',
diff --git a/static/app/gettingStartedDocs/node-fastify/metrics.tsx b/static/app/gettingStartedDocs/node-fastify/metrics.tsx
@@ -1,4 +1,4 @@
-import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/utils';
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
 
 export const metrics = getNodeMetricsOnboarding({
   docsPlatform: 'fastify',
diff --git a/static/app/gettingStartedDocs/node-koa/metrics.tsx b/static/app/gettingStartedDocs/node-koa/metrics.tsx
@@ -1,4 +1,4 @@
-import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/utils';
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
 
 export const metrics = getNodeMetricsOnboarding({
   docsPlatform: 'koa',
diff --git a/static/app/gettingStartedDocs/node-nestjs/metrics.tsx b/static/app/gettingStartedDocs/node-nestjs/metrics.tsx
@@ -1,4 +1,4 @@
-import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/utils';
+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';
 
 export const metrics = getNodeMetricsOnboarding({
   docsPlatform: 'nestjs',
diff --git a/static/app/gettingStartedDocs/node/metrics.tsx b/static/app/gettingStartedDocs/node/metrics.tsx
@@ -1,4 +1,106 @@
-import {getNodeMetricsOnboarding} from './utils';
+import {ExternalLink} from '@sentry/scraps/link';
+
+import type {
+  BasePlatformOptions,
+  DocsParams,
+  OnboardingConfig,
+} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {getInstallCodeBlock} from 'sentry/gettingStartedDocs/node/utils';
+import {t, tct} from 'sentry/locale';
+
+export const getNodeMetricsOnboarding = <
+  PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
+>({
+  docsPlatform,
+  packageName,
+}: {
+  docsPlatform: string;
+  packageName: `@sentry/${string}`;
+}): OnboardingConfig<PlatformOptions> => ({
+  install: (params: DocsParams) => [
+    {
+      type: StepType.INSTALL,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Add the Sentry SDK as a dependency. The minimum version of [packageName] that supports metrics is [code:10.24.0].',
+            {
+              code: <code />,
+              packageName: <code>{packageName}</code>,
+            }
+          ),
+        },
+        getInstallCodeBlock(params, {packageName}),
+        {
+          type: 'text',
+          text: tct(
+            'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.',
+            {
+              link: (
+                <ExternalLink
+                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/migration/`}
+                />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  configure: () => [
+    {
+      type: StepType.CONFIGURE,
+      content: [
+        {
+          type: 'text',
+          text: tct(
+            'Metrics are automatically enabled after Sentry is initialized. You can emit metrics using the [code:Sentry.metrics] API.',
+            {code: <code />}
+          ),
+        },
+        {
+          type: 'text',
+          text: tct(
+            'For more detailed information, see the [link:metrics documentation].',
+            {
+              link: (
+                <ExternalLink
+                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/metrics/`}
+                />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      type: StepType.VERIFY,
+      content: [
+        {
+          type: 'text',
+          text: t(
+            'Send a test metric from your app to verify metrics are arriving in Sentry.'
+          ),
+        },
+        {
+          type: 'code',
+          language: 'javascript',
+          code: `const Sentry = require("${packageName}");
+
+// Emit a test metric
+Sentry.metrics.count('test_counter', 1);
+Sentry.metrics.gauge('test_gauge', 100);
+Sentry.metrics.distribution('test_distribution', 150);
+`,
+        },
+      ],
+    },
+  ],
+});
 
 export const metrics = getNodeMetricsOnboarding({
   docsPlatform: 'node',
diff --git a/static/app/gettingStartedDocs/node/utils.tsx b/static/app/gettingStartedDocs/node/utils.tsx
@@ -852,115 +852,6 @@ Sentry.logger.info('User triggered test log', { action: 'test_log' })`,
   ],
 });
 
-export const getNodeMetricsOnboarding = <
-  PlatformOptions extends BasePlatformOptions = BasePlatformOptions,
->({
-  docsPlatform,
-  packageName,
-}: {
-  docsPlatform: string;
-  packageName: `@sentry/${string}`;
-}): OnboardingConfig<PlatformOptions> => ({
-  install: (params: DocsParams) => [
-    {
-      type: StepType.INSTALL,
-      content: [
-        {
-          type: 'text',
-          text: tct(
-            'Add the Sentry SDK as a dependency. The minimum version of [packageName] that supports metrics is [code:10.24.0].',
-            {
-              code: <code />,
-              packageName: <code>{packageName}</code>,
-            }
-          ),
-        },
-        getInstallCodeBlock(params, {packageName}),
-        {
-          type: 'text',
-          text: tct(
-            'If you are on an older version of the SDK, follow our [link:migration guide] to upgrade.',
-            {
-              link: (
-                <ExternalLink
-                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/migration/`}
-                />
-              ),
-            }
-          ),
-        },
-      ],
-    },
-  ],
-  configure: (params: DocsParams) => [
-    {
-      type: StepType.CONFIGURE,
-      content: [
-        {
-          type: 'text',
-          text: tct(
-            'Metrics are automatically enabled in your [code:Sentry.init()] configuration. You can emit metrics using the [code:Sentry.metrics] API.',
-            {code: <code />}
-          ),
-        },
-        {
-          type: 'code',
-          language: 'javascript',
-          code: `
-const Sentry = require("${packageName}");
-
-Sentry.init({
-  dsn: "${params.dsn.public}",
-});
-
-// Emit custom metrics
-Sentry.metrics.count('button_click', 1);
-Sentry.metrics.gauge('page_load_time', 150);
-Sentry.metrics.distribution('response_time', 200);
-`,
-        },
-        {
-          type: 'text',
-          text: tct(
-            'For more detailed information, see the [link:metrics documentation].',
-            {
-              link: (
-                <ExternalLink
-                  href={`https://docs.sentry.io/platforms/javascript/guides/${docsPlatform}/metrics/`}
-                />
-              ),
-            }
-          ),
-        },
-      ],
-    },
-  ],
-  verify: () => [
-    {
-      type: StepType.VERIFY,
-      content: [
-        {
-          type: 'text',
-          text: t(
-            'Send a test metric from your app to verify metrics are arriving in Sentry.'
-          ),
-        },
-        {
-          type: 'code',
-          language: 'javascript',
-          code: `const Sentry = require("${packageName}");
-
-// Emit a test metric
-Sentry.metrics.count('test_counter', 1);
-Sentry.metrics.gauge('test_gauge', 100);
-Sentry.metrics.distribution('test_distribution', 150);
-`,
-        },
-      ],
-    },
-  ],
-});
-
 /**
  *  Returns the init() with the necessary imports. It is possible to omit the imports.
  */

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/utils';`
	`1`	`+import {getNodeMetricsOnboarding} from 'sentry/gettingStartedDocs/node/metrics';`
`2`	`2`
`3`	`3`	`export const metrics = getNodeMetricsOnboarding({`
`4`	`4`	`docsPlatform: 'connect',`