feat(onboarding): Add metrics onboarding for JS SDKs

static/app/components/onboarding/productSelection.tsx

@@ -33,6 +33,7 @@ function getDisabledProducts(organization: Organization): DisabledProducts {
   const hasPerformance = organization.features.includes('performance-view');
   const hasProfiling = organization.features.includes('profiling-view');
   const hasLogs = organization.features.includes('ourlogs-enabled');
+  const hasMetrics = organization.features.includes('tracemetrics-enabled');
   const isSelfHostedErrorsOnly = ConfigStore.get('isSelfHostedErrorsOnly');
 
   let reason = t('This feature is not enabled on your Sentry installation.');
@@ -76,6 +77,12 @@ function getDisabledProducts(organization: Organization): DisabledProducts {
       onClick: createClickHandler('organizations:ourlogs-enabled', 'Logs'),
     };
   }
+  if (!hasMetrics) {
+    disabledProducts[ProductSolution.METRICS] = {
+      reason,
+      onClick: createClickHandler('organizations:tracemetrics-enabled', 'Metrics'),
+    };
+  }
   return disabledProducts;
 }
 
@@ -111,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,
@@ -531,6 +572,18 @@ export function ProductSelection({
           checked={urlProducts.includes(ProductSolution.LOGS)}
         />
       )}
+      {products.includes(ProductSolution.METRICS) && (
+        <Product
+          label={t('Metrics')}
+          description={t(
+            'Custom metrics for tracking application performance and usage, automatically trace-connected.'
+          )}
+          docLink="https://docs.sentry.io/product/explore/metrics/"
+          onClick={() => handleClickProduct(ProductSolution.METRICS)}
+          disabled={disabledProducts[ProductSolution.METRICS]}
+          checked={urlProducts.includes(ProductSolution.METRICS)}
+        />
+      )}
       {products.includes(ProductSolution.SESSION_REPLAY) && (
         <Product
           label={t('Session Replay')}

static/app/data/platformCategories.tsx

@@ -391,7 +391,37 @@ export const withoutLoggingSupport: Set<PlatformKey> = new Set([
 ]);
 
 // List of platforms that have metrics onboarding checklist content
-export const withMetricsOnboarding: Set<PlatformKey> = new Set([]);
+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',
+]);
 
 // List of platforms that do not have metrics support. We make use of this list in the product to not provide any Metrics
 export const withoutMetricsSupport: Set<PlatformKey> = new Set([]);

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();
+  });
 });