Skip to content

feat(onboarding): Add metrics onboarding for JS SDKs #102775

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat(onboarding): Add metrics onboarding for JS SDKs #102775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c275ca
js metrics onboarding
chargome Nov 5, 2025
532707e
add some tests
chargome Nov 5, 2025
15f9883
add missing onboarding
chargome Nov 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 44 additions & 2 deletions static/app/components/onboarding/productSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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')}
Expand Down
32 changes: 31 additions & 1 deletion static/app/data/platformCategories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);
Expand Down
2 changes: 2 additions & 0 deletions static/app/gettingStartedDocs/javascript/angular/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,6 +19,7 @@ const docs: Docs<PlatformOptions> = {
profilingOnboarding: profiling,
featureFlagOnboarding: featureFlag,
logsOnboarding: logs,
metricsOnboarding: metrics,
};

export default docs;
9 changes: 9 additions & 0 deletions static/app/gettingStartedDocs/javascript/angular/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
});
7 changes: 7 additions & 0 deletions static/app/gettingStartedDocs/javascript/angular/onboarding.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Copy link
Contributor

@cursor cursor bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Missing metrics onboarding in Angular docs export

Test expects docs.metricsOnboarding to be defined, but the angular platform docs export in static/app/gettingStartedDocs/javascript/angular/index.tsx does not include a metricsOnboarding property. This test will fail. The angular platform was added to platformProductAvailability with ProductSolution.METRICS support but the corresponding metrics onboarding configuration was not added to the docs export.

Fix in Cursor Fix in Web

});
2 changes: 2 additions & 0 deletions static/app/gettingStartedDocs/javascript/astro/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,6 +17,7 @@ const docs: Docs = {
crashReportOnboarding: crashReport,
featureFlagOnboarding: featureFlag,
logsOnboarding: logs,
metricsOnboarding: metrics,
profilingOnboarding: profiling,
agentMonitoringOnboarding: agentMonitoring,
};
Expand Down
6 changes: 6 additions & 0 deletions static/app/gettingStartedDocs/javascript/astro/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import {getJavascriptMetricsFullStackOnboarding} from 'sentry/utils/gettingStartedDocs/javascript';

export const metrics = getJavascriptMetricsFullStackOnboarding({
docsPlatform: 'astro',
packageName: '@sentry/astro',
});
7 changes: 7 additions & 0 deletions static/app/gettingStartedDocs/javascript/astro/onboarding.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
Copy link
Contributor

@cursor cursor bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Missing Metrics Onboarding in Docs Export

Test expects docs.metricsOnboarding to be defined, but the astro platform docs export in static/app/gettingStartedDocs/javascript/astro/index.tsx does not include a metricsOnboarding property. This test will fail. The astro platform was added to platformProductAvailability with ProductSolution.METRICS support but the corresponding metrics onboarding configuration was not added to the docs export.

Fix in Cursor Fix in Web

});
7 changes: 7 additions & 0 deletions static/app/gettingStartedDocs/javascript/ember.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,4 +156,11 @@ describe('javascript-ember onboarding docs', () => {
screen.queryByText(textWithMarkupMatcher(/Sentry\.logger\.info/))
).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();
});
Copy link
Contributor

@cursor cursor bot Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Missing metricsOnboarding in Ember docs export

Test expects docs.metricsOnboarding to be defined, but the ember platform docs export in static/app/gettingStartedDocs/javascript/ember/index.tsx does not include a metricsOnboarding property. This test will fail. The ember platform was added to platformProductAvailability with ProductSolution.METRICS support but the corresponding metrics onboarding configuration was not added to the docs export.

Fix in Cursor Fix in Web

});
2 changes: 2 additions & 0 deletions static/app/gettingStartedDocs/javascript/ember/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -16,6 +17,7 @@ const docs: Docs = {
profilingOnboarding: profiling,
featureFlagOnboarding: featureFlag,
logsOnboarding: logs,
metricsOnboarding: metrics,
};

export default docs;
9 changes: 9 additions & 0 deletions static/app/gettingStartedDocs/javascript/ember/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
});
7 changes: 7 additions & 0 deletions static/app/gettingStartedDocs/javascript/gatsby.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
8 changes: 8 additions & 0 deletions static/app/gettingStartedDocs/javascript/gatsby.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu
import {t, tct} from 'sentry/locale';
import {
getJavascriptLogsOnboarding,
getJavascriptMetricsOnboarding,
getJavascriptProfilingOnboarding,
} from 'sentry/utils/gettingStartedDocs/javascript';

Expand Down Expand Up @@ -402,6 +403,12 @@ const logsOnboarding: OnboardingConfig = getJavascriptLogsOnboarding({
packageName: '@sentry/gatsby',
});

const metricsOnboarding: OnboardingConfig = getJavascriptMetricsOnboarding({
installSnippetBlock,
docsPlatform: 'gatsby',
packageName: '@sentry/gatsby',
});

const docs: Docs = {
onboarding,
feedbackOnboardingNpm: feedbackOnboarding,
Expand All @@ -410,6 +417,7 @@ const docs: Docs = {
profilingOnboarding,
featureFlagOnboarding: featureFlag,
logsOnboarding,
metricsOnboarding,
};

export default docs;
2 changes: 2 additions & 0 deletions static/app/gettingStartedDocs/javascript/javascript/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -26,6 +27,7 @@ const docs: Docs<PlatformOptions> = {
profilingOnboarding: profiling,
featureFlagOnboarding: featureFlag,
logsOnboarding: logs,
metricsOnboarding: metrics,
};

export default docs;
9 changes: 9 additions & 0 deletions static/app/gettingStartedDocs/javascript/javascript/metrics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
});
7 changes: 7 additions & 0 deletions static/app/gettingStartedDocs/javascript/javascript/onboarding.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Loading
Loading