Skip to content

Commit 81feb29

Browse files
chargomepriscilawebdev
authored and
andrewshie-sentry
committed
feat(onboarding): Add metrics onboarding for JS SDKs (#102775)
resolves https://linear.app/getsentry/issue/LOGS-378/uisdk-metrics-empty-state-project-onboarding --------- Co-authored-by: Priscila Oliveira <[email protected]>
1 parent 942f072 commit 81feb29

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1760
-74
lines changed

‎static/app/components/onboarding/productSelection.tsx‎

Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -118,116 +118,150 @@ export const platformProductAvailability = {
118118
'java-logback': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
119119
'java-spring': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
120120
'java-spring-boot': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
121-
javascript: [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.SESSION_REPLAY],
121+
javascript: [
122+
ProductSolution.PERFORMANCE_MONITORING,
123+
ProductSolution.SESSION_REPLAY,
124+
ProductSolution.METRICS,
125+
],
122126
'javascript-react': [
123127
ProductSolution.PERFORMANCE_MONITORING,
124128
ProductSolution.SESSION_REPLAY,
125129
ProductSolution.LOGS,
130+
ProductSolution.METRICS,
126131
],
127132
'javascript-react-router': [
128133
ProductSolution.PERFORMANCE_MONITORING,
129134
ProductSolution.SESSION_REPLAY,
130135
ProductSolution.LOGS,
136+
ProductSolution.METRICS,
131137
],
132138
'javascript-vue': [
133139
ProductSolution.PERFORMANCE_MONITORING,
134140
ProductSolution.SESSION_REPLAY,
135141
ProductSolution.LOGS,
142+
ProductSolution.METRICS,
136143
],
137144
'javascript-angular': [
138145
ProductSolution.PERFORMANCE_MONITORING,
139146
ProductSolution.SESSION_REPLAY,
140147
ProductSolution.LOGS,
148+
ProductSolution.METRICS,
141149
],
142150
'javascript-ember': [
143151
ProductSolution.PERFORMANCE_MONITORING,
144152
ProductSolution.SESSION_REPLAY,
145153
ProductSolution.LOGS,
154+
ProductSolution.METRICS,
146155
],
147156
'javascript-gatsby': [
148157
ProductSolution.PERFORMANCE_MONITORING,
149158
ProductSolution.SESSION_REPLAY,
150159
ProductSolution.LOGS,
160+
ProductSolution.METRICS,
151161
],
152162
'javascript-solid': [
153163
ProductSolution.PERFORMANCE_MONITORING,
154164
ProductSolution.SESSION_REPLAY,
155165
ProductSolution.LOGS,
166+
ProductSolution.METRICS,
156167
],
157168
'javascript-solidstart': [
158169
ProductSolution.PERFORMANCE_MONITORING,
159170
ProductSolution.SESSION_REPLAY,
171+
ProductSolution.METRICS,
160172
],
161173
'javascript-svelte': [
162174
ProductSolution.PERFORMANCE_MONITORING,
163175
ProductSolution.SESSION_REPLAY,
164176
ProductSolution.LOGS,
177+
ProductSolution.METRICS,
165178
],
166179
'javascript-tanstackstart-react': [
167180
ProductSolution.PERFORMANCE_MONITORING,
168181
ProductSolution.SESSION_REPLAY,
182+
ProductSolution.METRICS,
169183
],
170184
'javascript-astro': [
171185
ProductSolution.PERFORMANCE_MONITORING,
172186
ProductSolution.SESSION_REPLAY,
173187
ProductSolution.LOGS,
188+
ProductSolution.METRICS,
174189
],
175190
node: [
176191
ProductSolution.PERFORMANCE_MONITORING,
177192
ProductSolution.PROFILING,
178193
ProductSolution.LOGS,
194+
ProductSolution.METRICS,
179195
],
180196
'node-azurefunctions': [
181197
ProductSolution.PERFORMANCE_MONITORING,
182198
ProductSolution.PROFILING,
183199
ProductSolution.LOGS,
200+
ProductSolution.METRICS,
201+
],
202+
'node-awslambda': [
203+
ProductSolution.PERFORMANCE_MONITORING,
204+
ProductSolution.PROFILING,
205+
ProductSolution.METRICS,
184206
],
185-
'node-awslambda': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.PROFILING],
186207
'node-connect': [
187208
ProductSolution.PERFORMANCE_MONITORING,
188209
ProductSolution.PROFILING,
189210
ProductSolution.LOGS,
211+
ProductSolution.METRICS,
190212
],
191213
'node-express': [
192214
ProductSolution.PERFORMANCE_MONITORING,
193215
ProductSolution.PROFILING,
194216
ProductSolution.LOGS,
217+
ProductSolution.METRICS,
195218
],
196219
'node-fastify': [
197220
ProductSolution.PERFORMANCE_MONITORING,
198221
ProductSolution.PROFILING,
199222
ProductSolution.LOGS,
223+
ProductSolution.METRICS,
200224
],
201225
'node-gcpfunctions': [
202226
ProductSolution.PERFORMANCE_MONITORING,
203227
ProductSolution.PROFILING,
204228
ProductSolution.LOGS,
229+
ProductSolution.METRICS,
205230
],
206231
'node-hapi': [
207232
ProductSolution.PERFORMANCE_MONITORING,
208233
ProductSolution.PROFILING,
209234
ProductSolution.LOGS,
235+
ProductSolution.METRICS,
210236
],
211237
'node-hono': [
212238
ProductSolution.PERFORMANCE_MONITORING,
213239
ProductSolution.PROFILING,
214240
ProductSolution.LOGS,
241+
ProductSolution.METRICS,
215242
],
216243
'node-koa': [
217244
ProductSolution.PERFORMANCE_MONITORING,
218245
ProductSolution.PROFILING,
219246
ProductSolution.LOGS,
247+
ProductSolution.METRICS,
220248
],
221249
'node-nestjs': [
222250
ProductSolution.PERFORMANCE_MONITORING,
223251
ProductSolution.PROFILING,
224252
ProductSolution.LOGS,
253+
ProductSolution.METRICS,
225254
],
226255
'node-cloudflare-workers': [
227256
ProductSolution.PERFORMANCE_MONITORING,
228257
ProductSolution.LOGS,
258+
ProductSolution.METRICS,
259+
],
260+
'node-cloudflare-pages': [
261+
ProductSolution.PERFORMANCE_MONITORING,
262+
ProductSolution.LOGS,
263+
ProductSolution.METRICS,
229264
],
230-
'node-cloudflare-pages': [ProductSolution.PERFORMANCE_MONITORING, ProductSolution.LOGS],
231265
php: [
232266
ProductSolution.PERFORMANCE_MONITORING,
233267
ProductSolution.PROFILING,

‎static/app/data/platformCategories.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,35 @@ export const withoutLoggingSupport: Set<PlatformKey> = new Set([
392392

393393
// List of platforms that have metrics onboarding checklist content
394394
export const withMetricsOnboarding: Set<PlatformKey> = new Set([
395+
'javascript',
396+
'javascript-angular',
397+
'javascript-astro',
398+
'javascript-ember',
399+
'javascript-gatsby',
400+
'javascript-nextjs',
401+
'javascript-nuxt',
402+
'javascript-react',
403+
'javascript-react-router',
404+
'javascript-remix',
405+
'javascript-solid',
406+
'javascript-solidstart',
407+
'javascript-svelte',
408+
'javascript-sveltekit',
409+
'javascript-tanstackstart-react',
410+
'javascript-vue',
411+
'node',
412+
'node-awslambda',
413+
'node-azurefunctions',
414+
'node-cloudflare-pages',
415+
'node-cloudflare-workers',
416+
'node-connect',
417+
'node-express',
418+
'node-fastify',
419+
'node-gcpfunctions',
420+
'node-hapi',
421+
'node-hono',
422+
'node-koa',
423+
'node-nestjs',
395424
'python',
396425
'python-aiohttp',
397426
'python-asgi',

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
22
import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
3+
import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics';
34

45
import {crashReport} from './crashReport';
56
import {feedback} from './feedback';
67
import {logs} from './logs';
78
import {onboarding} from './onboarding';
89
import {profiling} from './profiling';
910
import {replay} from './replay';
10-
import {platformOptions, type PlatformOptions} from './utils';
11+
import {installSnippetBlock, platformOptions, type PlatformOptions} from './utils';
1112

1213
const docs: Docs<PlatformOptions> = {
1314
onboarding,
@@ -18,6 +19,11 @@ const docs: Docs<PlatformOptions> = {
1819
profilingOnboarding: profiling,
1920
featureFlagOnboarding: featureFlag,
2021
logsOnboarding: logs,
22+
metricsOnboarding: metrics({
23+
installSnippetBlock,
24+
docsPlatform: 'angular',
25+
packageName: '@sentry/angular',
26+
}),
2127
};
2228

2329
export default docs;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,4 +154,22 @@ describe('javascript-angular onboarding docs', () => {
154154

155155
expect(screen.queryByText('Logging Integrations')).not.toBeInTheDocument();
156156
});
157+
158+
it('has metrics onboarding configuration', () => {
159+
expect(docs.metricsOnboarding).toBeDefined();
160+
expect(docs.metricsOnboarding?.install).toBeDefined();
161+
expect(docs.metricsOnboarding?.configure).toBeDefined();
162+
expect(docs.metricsOnboarding?.verify).toBeDefined();
163+
});
164+
165+
it('does not show Metrics in next steps when metrics is not selected', () => {
166+
renderWithOnboardingLayout(docs, {
167+
selectedProducts: [
168+
ProductSolution.ERROR_MONITORING,
169+
ProductSolution.PERFORMANCE_MONITORING,
170+
],
171+
});
172+
173+
expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
174+
});
157175
});

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,9 @@ const getVerifySnippetTemplate = () => `
7070
`;
7171

7272
const getVerifySnippetComponent = (params: Params) => `${
73-
params.isLogsSelected ? 'import * as Sentry from "@sentry/angular";\n\n' : ''
73+
params.isLogsSelected || params.isMetricsSelected
74+
? 'import * as Sentry from "@sentry/angular";\n\n'
75+
: ''
7476
}export class AppComponent {
7577
public throwTestError(): void {${
7678
params.isLogsSelected
@@ -80,6 +82,12 @@ const getVerifySnippetComponent = (params: Params) => `${
8082
action: "test_error_button_click",
8183
});`
8284
: ''
85+
}${
86+
params.isMetricsSelected
87+
? `
88+
// Send a test metric before throwing the error
89+
Sentry.metrics.count('test_counter', 1);`
90+
: ''
8391
}
8492
throw new Error("Sentry Test Error");
8593
}
@@ -242,6 +250,17 @@ export const onboarding: OnboardingConfig<PlatformOptions> = {
242250
});
243251
}
244252

253+
if (params.isMetricsSelected) {
254+
steps.push({
255+
id: 'metrics',
256+
name: t('Metrics'),
257+
description: t(
258+
'Learn how to track custom metrics to monitor your application performance and business KPIs.'
259+
),
260+
link: 'https://docs.sentry.io/platforms/javascript/guides/angular/metrics/',
261+
});
262+
}
263+
245264
return steps;
246265
},
247266
};

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
22
import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
3+
import {metricsFullStack} from 'sentry/gettingStartedDocs/javascript/javascript/metrics';
34

45
import {agentMonitoring} from './agentMonitoring';
56
import {crashReport} from './crashReport';
@@ -16,6 +17,10 @@ const docs: Docs = {
1617
crashReportOnboarding: crashReport,
1718
featureFlagOnboarding: featureFlag,
1819
logsOnboarding: logs,
20+
metricsOnboarding: metricsFullStack({
21+
docsPlatform: 'astro',
22+
packageName: '@sentry/astro',
23+
}),
1924
profilingOnboarding: profiling,
2025
agentMonitoringOnboarding: agentMonitoring,
2126
};

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,4 +198,22 @@ describe('javascript-astro onboarding docs', () => {
198198
// This is a bit complex to test precisely, but we can ensure the config is split correctly
199199
expect(astroConfigSections.length).toBeGreaterThan(0);
200200
});
201+
202+
it('has metrics onboarding configuration', () => {
203+
expect(docs.metricsOnboarding).toBeDefined();
204+
expect(docs.metricsOnboarding?.install).toBeDefined();
205+
expect(docs.metricsOnboarding?.configure).toBeDefined();
206+
expect(docs.metricsOnboarding?.verify).toBeDefined();
207+
});
208+
209+
it('does not show Metrics in next steps when metrics is not selected', () => {
210+
renderWithOnboardingLayout(docs, {
211+
selectedProducts: [
212+
ProductSolution.ERROR_MONITORING,
213+
ProductSolution.PERFORMANCE_MONITORING,
214+
],
215+
});
216+
217+
expect(screen.queryByText('Metrics')).not.toBeInTheDocument();
218+
});
201219
});

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,18 +96,24 @@ const getVerifySnippet = (params: DocsParams) => {
9696
});`
9797
: '';
9898

99+
const metricsCode = params.isMetricsSelected
100+
? `
101+
// Send a test metric before throwing the error
102+
Sentry.metrics.count('test_counter', 1);`
103+
: '';
104+
99105
return `
100106
<!-- your-page.astro -->
101107
---
102108
---
103109
<button id="error-button">Throw test error</button>
104110
<script>${
105-
params.isLogsSelected
111+
params.isLogsSelected || params.isMetricsSelected
106112
? `
107113
import * as Sentry from "@sentry/astro";`
108114
: ''
109115
}
110-
function handleClick () {${logsCode}
116+
function handleClick () {${logsCode}${metricsCode}
111117
throw new Error('This is a test error');
112118
}
113119
document.querySelector("#error-button").addEventListener("click", handleClick);
@@ -311,6 +317,17 @@ export const onboarding: OnboardingConfig = {
311317
});
312318
}
313319

320+
if (params.isMetricsSelected) {
321+
steps.push({
322+
id: 'metrics',
323+
name: t('Metrics'),
324+
description: t(
325+
'Learn how to track custom metrics to monitor your application performance and business KPIs.'
326+
),
327+
link: 'https://docs.sentry.io/platforms/javascript/guides/astro/metrics/',
328+
});
329+
}
330+
314331
return steps;
315332
},
316333
};

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import type {Docs} from 'sentry/components/onboarding/gettingStartedDoc/types';
22
import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featureFlag';
3+
import {metrics} from 'sentry/gettingStartedDocs/javascript/javascript/metrics';
34

45
import {crashReport} from './crashReport';
56
import {feedback} from './feedback';
67
import {logs} from './logs';
78
import {onboarding} from './onboarding';
89
import {profiling} from './profiling';
910
import {replay} from './replay';
11+
import {installSnippetBlock} from './utils';
1012

1113
const docs: Docs = {
1214
onboarding,
@@ -16,6 +18,11 @@ const docs: Docs = {
1618
profilingOnboarding: profiling,
1719
featureFlagOnboarding: featureFlag,
1820
logsOnboarding: logs,
21+
metricsOnboarding: metrics({
22+
installSnippetBlock,
23+
docsPlatform: 'ember',
24+
packageName: '@sentry/ember',
25+
}),
1926
};
2027

2128
export default docs;

0 commit comments

Comments
 (0)