feat(onboarding): Add metrics onboarding for JS SDKs

static/app/components/onboarding/productSelection.tsx

@@ -116,111 +116,141 @@ export const platformProductAvailability = {
     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 +561,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

@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -18,6 +19,7 @@ const docs: Docs<PlatformOptions> = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;

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

@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'angular',
+  packageName: '@sentry/angular',
+});

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

@@ -154,4 +154,11 @@ 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();
+  });
 });

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

@@ -5,6 +5,7 @@ import {agentMonitoring} from './agentMonitoring';
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   crashReportOnboarding: crashReport,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
   profilingOnboarding: profiling,
   agentMonitoringOnboarding: agentMonitoring,
 };

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

@@ -0,0 +1,6 @@
+import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+export const metrics = getJavascriptMetricsFullStackOnboarding({
+  docsPlatform: 'astro',
+  packageName: '@sentry/astro',
+});

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

@@ -198,4 +198,11 @@ 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();
+  });
 });

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

@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;

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

@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'ember',
+  packageName: '@sentry/ember',
+});

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

@@ -4,6 +4,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
 import {crashReport} from './crashReport';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {profiling} from './profiling';
 import {replay} from './replay';
@@ -16,6 +17,7 @@ const docs: Docs = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/gatsby/metrics.tsx

@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'gatsby',
+  packageName: '@sentry/gatsby',
+});

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

@@ -213,4 +213,11 @@ describe('javascript-gatsby onboarding docs', () => {
   // - Sentry.feedbackIntegration() is included when feedback is selected
   // - colorScheme: "system" is configured
   // - Feedback configuration options are applied
+
+  it('has metrics onboarding configuration', () => {
+    expect(docs.metricsOnboarding).toBeDefined();
+    expect(docs.metricsOnboarding?.install).toBeDefined();
+    expect(docs.metricsOnboarding?.configure).toBeDefined();
+    expect(docs.metricsOnboarding?.verify).toBeDefined();
+  });
 });

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

@@ -8,6 +8,7 @@ import {crashReport} from './crashReport';
 import {featureFlag} from './featureFlag';
 import {feedback} from './feedback';
 import {logs} from './logs';
+import {metrics} from './metrics';
 import {onboarding} from './onboarding';
 import {performance} from './performance';
 import {profiling} from './profiling';
@@ -26,6 +27,7 @@ const docs: Docs<PlatformOptions> = {
   profilingOnboarding: profiling,
   featureFlagOnboarding: featureFlag,
   logsOnboarding: logs,
+  metricsOnboarding: metrics,
 };
 
 export default docs;

static/app/gettingStartedDocs/javascript/javascript/metrics.tsx

@@ -0,0 +1,9 @@
+import {getJavascriptMetricsOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';
+
+import {installSnippetBlock} from './utils';
+
+export const metrics = getJavascriptMetricsOnboarding({
+  installSnippetBlock,
+  docsPlatform: 'javascript',
+  packageName: '@sentry/browser',
+});

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

@@ -126,4 +126,11 @@ describe('javascript onboarding docs', () => {
 
     expect(screen.getByRole('heading', {name: 'Configure SDK'})).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();
+  });
 });

static/app/gettingStartedDocs/javascript/nextjs.spec.tsx

@@ -34,4 +34,11 @@ describe('javascript-nextjs onboarding docs', () => {
       screen.getByText(textWithMarkupMatcher(/sentry-example-page/))
     ).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();
+  });
 });