feat(onboarding): Add metrics onboarding for JS SDKs

static/app/components/onboarding/productSelection.tsx

@@ -118,116 +118,150 @@ export const platformProductAvailability = {
   'java-logback': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
   'java-spring': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
   'java-spring-boot': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
-  javascript: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.SESSION_REPLAY],
+  javascript: [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.SESSION_REPLAY,
+    ProductSolution.METRICS,
+  ],
   'javascript-react': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-react-router': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-vue': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-angular': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-ember': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-gatsby': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-solid': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-solidstart': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
+    ProductSolution.METRICS,
   ],
   'javascript-svelte': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'javascript-tanstackstart-react': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
+    ProductSolution.METRICS,
   ],
   'javascript-astro': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.SESSION_REPLAY,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   node: [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-azurefunctions': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
+  ],
+  'node-awslambda': [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.PROFILING,
+    ProductSolution.METRICS,
   ],
-  'node-awslambda': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
   'node-connect': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-express': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-fastify': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-gcpfunctions': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-hapi': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-hono': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-koa': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-nestjs': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
   'node-cloudflare-workers': [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.LOGS,
+    ProductSolution.METRICS,
+  ],
+  'node-cloudflare-pages': [
+    ProductSolution.PERFORMANCE_MONITORING,
+    ProductSolution.LOGS,
+    ProductSolution.METRICS,
   ],
-  'node-cloudflare-pages': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
   php: [
     ProductSolution.PERFORMANCE_MONITORING,
     ProductSolution.PROFILING,

static/app/data/platformCategories.tsx

@@ -392,6 +392,35 @@ export const withoutLoggingSupport: Set<PlatformKey> = new Set([
 
 // List of platforms that have metrics onboarding checklist content
 export const withMetricsOnboarding: Set<PlatformKey> = new Set([
+  'javascript',
+  'javascript-angular',
+  'javascript-astro',
+  'javascript-ember',
+  'javascript-gatsby',
+  'javascript-nextjs',
+  'javascript-nuxt',
+  'javascript-react',
+  'javascript-react-router',
+  'javascript-remix',
+  'javascript-solid',
+  'javascript-solidstart',
+  'javascript-svelte',
+  'javascript-sveltekit',
+  'javascript-tanstackstart-react',
+  'javascript-vue',
+  'node',
+  'node-awslambda',
+  'node-azurefunctions',
+  'node-cloudflare-pages',
+  'node-cloudflare-workers',
+  'node-connect',
+  'node-express',
+  'node-fastify',
+  'node-gcpfunctions',
+  'node-hapi',
+  'node-hono',
+  'node-koa',
+  'node-nestjs',
   'python',
   'python-aiohttp',
   'python-asgi',

static/app/gettingStartedDocs/javascript/angular/index.tsx

@@ -1,13 +1,14 @@
 import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
+import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics';
 
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
-import {platformOptions, type PlatformOptions} from './utils';
+import {installSnippetBlock, platformOptions, type PlatformOptions} from './utils';
 
 const docs: Docs<PlatformOptions> = {
   onboarding,
@@ -18,6 +19,11 @@ const docs: Docs<PlatformOptions> = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics({
+    installSnippetBlock,
+    docsPlatform: 'angular',
+    packageName: '@sentry/angular',
+  }),
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/angular/onboarding.spec.tsx

@@ -154,4 +154,22 @@ describe('javascript-angular onboarding docs', () => {
 
     expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
+
+  it('does not show Metrics in next steps when metrics is not selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.PERFORMANCE_MONITORING,
+      ],
+    });
+
+    expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/angular/onboarding.tsx

@@ -70,7 +70,9 @@ const getVerifySnippetTemplate = () => `
 `;
 
 const getVerifySnippetComponent = (params: Params) => `${
-  params.isLogsSelected ? 'import * as Sentry from "@sentry/angular";\n\n' : ''
+  params.isLogsSelected || params.isMetricsSelected
+    ? 'import * as Sentry from "@sentry/angular";\n\n'
+    : ''
 }export class AppComponent {
   public throwTestError(): void {${
     params.isLogsSelected
@@ -80,6 +82,12 @@ const getVerifySnippetComponent = (params: Params) => `${
       action: "test_error_button_click",
     });`
       : ''
+  }${
+    params.isMetricsSelected
+      ? `
+    // Send a test metric before throwing the error
+    Sentry.metrics.count('test_counter', 1);`
+      : ''
   }
     throw new Error("Sentry Test Error");
   }
@@ -242,6 +250,17 @@ export const onboarding: OnboardingConfig<PlatformOptions> = {
       });
     }
 
+    if (params.isMetricsSelected) {
+      steps.push({
+        id: 'metrics',
+        name: t('Metrics'),
+        description: t(
+          'Learn how to track custom metrics to monitor your application performance and business KPIs.'
+        ),
+        link: 'https://docs.sentry.io/platforms/javascript/guides/angular/metrics/',
+      });
+    }
+
     return steps;
   },
 };

static/app/gettingStartedDocs/javascript/astro/index.tsx

@@ -1,5 +1,6 @@
 import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
+import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics';
 
 import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
@@ -16,6 +17,10 @@ const docs: Docs = {
   crashReportOnboarding: crashReport,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metricsFullStack({
+    docsPlatform: 'astro',
+    packageName: '@sentry/astro',
+  }),
   profilingOnboarding: profiling,
   agentMonitoringOnboarding: agentMonitoring,
 };

static/app/gettingStartedDocs/javascript/astro/onboarding.spec.tsx

@@ -198,4 +198,22 @@ describe('javascript-astro onboarding docs', () => {
     // This is a bit complex to test precisely, but we can ensure the config is split correctly
     expect(astroConfigSections.length).toBeGreaterThan(0);
   });
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
+
+  it('does not show Metrics in next steps when metrics is not selected', () => {
+    renderWithOnboardingLayout(docs, {
+      selectedProducts: [
+        ProductSolution.ERROR_MONITORING,
+        ProductSolution.PERFORMANCE_MONITORING,
+      ],
+    });
+
+    expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
+  });
 });

static/app/gettingStartedDocs/javascript/astro/onboarding.tsx

@@ -96,18 +96,24 @@ const getVerifySnippet = (params: DocsParams) => {
     });`
     : '';
 
+  const metricsCode = params.isMetricsSelected
+    ? `
+    // Send a test metric before throwing the error
+    Sentry.metrics.count('test_counter', 1);`
+    : '';
+
   return `
 <!-- your-page.astro -->
 ---
 ---
 <button id="error-button">Throw test error</button>
 <script>${
-    params.isLogsSelected
+    params.isLogsSelected || params.isMetricsSelected
       ? `
   import * as Sentry from "@sentry/astro";`
       : ''
   }
-  function handleClick () {${logsCode}
+  function handleClick () {${logsCode}${metricsCode}
     throw new Error('This is a test error');
   }
   document.querySelector("#error-button").addEventListener("click", handleClick);
@@ -311,6 +317,17 @@ export const onboarding: OnboardingConfig = {
       });
     }
 
+    if (params.isMetricsSelected) {
+      steps.push({
+        id: 'metrics',
+        name: t('Metrics'),
+        description: t(
+          'Learn how to track custom metrics to monitor your application performance and business KPIs.'
+        ),
+        link: 'https://docs.sentry.io/platforms/javascript/guides/astro/metrics/',
+      });
+    }
+
     return steps;
   },
 };

static/app/gettingStartedDocs/javascript/ember/index.tsx

@@ -1,12 +1,14 @@
 import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
+import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics';
 
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
+import {installSnippetBlock} from './utils';
 
 const docs: Docs = {
   onboarding,
@@ -16,6 +18,11 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics({
+    installSnippetBlock,
+    docsPlatform: 'ember',
+    packageName: '@sentry/ember',
+  }),
 };
 
 export default docs;