From 4c275ca07cebd2222340fccb42e38490b9f45931 Mon Sep 17 00:00:00 2001 From: Charly Gomez Date: Wed, 5 Nov 2025 16:12:05 +0100 Subject: [PATCH 01/20] js metrics onboarding --- .../onboarding/productSelection.tsx | 46 +++- static/app/data/platformCategories.tsx | 32 ++- .../gettingStartedDocs/javascript/gatsby.tsx | 8 + .../javascript/javascript/index.tsx | 2 + .../javascript/javascript/metrics.tsx | 9 + .../gettingStartedDocs/javascript/nextjs.tsx | 5 + .../gettingStartedDocs/javascript/nuxt.tsx | 5 + .../gettingStartedDocs/javascript/react.tsx | 27 ++- .../gettingStartedDocs/javascript/remix.tsx | 5 + .../gettingStartedDocs/javascript/svelte.tsx | 8 + .../javascript/sveltekit.tsx | 5 + .../javascript/tanstackstart-react.tsx | 5 + .../app/gettingStartedDocs/javascript/vue.tsx | 8 + .../utils/gettingStartedDocs/javascript.tsx | 225 ++++++++++++++++++ 14 files changed, 386 insertions(+), 4 deletions(-) create mode 100644 static/app/gettingStartedDocs/javascript/javascript/metrics.tsx diff --git a/static/app/components/onboarding/productSelection.tsx b/static/app/components/onboarding/productSelection.tsx index 3a27f81a4dc4d1..6b23d9b99e1782 100644 --- a/static/app/components/onboarding/productSelection.tsx +++ b/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) && ( + handleClickProduct(ProductSolution.METRICS)} + disabled={disabledProducts[ProductSolution.METRICS]} + checked={urlProducts.includes(ProductSolution.METRICS)} + /> + )} {products.includes(ProductSolution.SESSION_REPLAY) && ( = new Set([ ]); // List of platforms that have metrics onboarding checklist content -export const withMetricsOnboarding: Set = new Set([]); +export const withMetricsOnboarding: Set = 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 = new Set([]); diff --git a/static/app/gettingStartedDocs/javascript/gatsby.tsx b/static/app/gettingStartedDocs/javascript/gatsby.tsx index e077112f2870e0..719c701254fe45 100644 --- a/static/app/gettingStartedDocs/javascript/gatsby.tsx +++ b/static/app/gettingStartedDocs/javascript/gatsby.tsx @@ -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'; @@ -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, @@ -410,6 +417,7 @@ const docs: Docs = { profilingOnboarding, featureFlagOnboarding: featureFlag, logsOnboarding, + metricsOnboarding, }; export default docs; diff --git a/static/app/gettingStartedDocs/javascript/javascript/index.tsx b/static/app/gettingStartedDocs/javascript/javascript/index.tsx index 468a55ef6385aa..be0cc8ed15e50d 100644 --- a/static/app/gettingStartedDocs/javascript/javascript/index.tsx +++ b/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 = { profilingOnboarding: profiling, featureFlagOnboarding: featureFlag, logsOnboarding: logs, + metricsOnboarding: metrics, }; export default docs; diff --git a/static/app/gettingStartedDocs/javascript/javascript/metrics.tsx b/static/app/gettingStartedDocs/javascript/javascript/metrics.tsx new file mode 100644 index 00000000000000..ecb4d98b871db7 --- /dev/null +++ b/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', +}); diff --git a/static/app/gettingStartedDocs/javascript/nextjs.tsx b/static/app/gettingStartedDocs/javascript/nextjs.tsx index c9e13b1ad7aa6e..ed5f2914edc9db 100644 --- a/static/app/gettingStartedDocs/javascript/nextjs.tsx +++ b/static/app/gettingStartedDocs/javascript/nextjs.tsx @@ -27,6 +27,7 @@ import {t, tct} from 'sentry/locale'; import { getJavascriptFullStackOnboarding, getJavascriptLogsFullStackOnboarding, + getJavascriptMetricsFullStackOnboarding, } from 'sentry/utils/gettingStartedDocs/javascript'; import {getNodeAgentMonitoringOnboarding} from 'sentry/utils/gettingStartedDocs/node'; @@ -614,6 +615,10 @@ const docs: Docs = { docsPlatform: 'nextjs', packageName: '@sentry/nextjs', }), + metricsOnboarding: getJavascriptMetricsFullStackOnboarding({ + docsPlatform: 'nextjs', + packageName: '@sentry/nextjs', + }), agentMonitoringOnboarding: getNodeAgentMonitoringOnboarding({ packageName: '@sentry/nextjs', configFileName: 'sentry.server.config.ts', diff --git a/static/app/gettingStartedDocs/javascript/nuxt.tsx b/static/app/gettingStartedDocs/javascript/nuxt.tsx index 95e748b0b99872..2fa5ee8c9f453e 100644 --- a/static/app/gettingStartedDocs/javascript/nuxt.tsx +++ b/static/app/gettingStartedDocs/javascript/nuxt.tsx @@ -26,6 +26,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu import {t, tct, tctCode} from 'sentry/locale'; import { getJavascriptLogsFullStackOnboarding, + getJavascriptMetricsFullStackOnboarding, getJavascriptProfilingOnboarding, } from 'sentry/utils/gettingStartedDocs/javascript'; import {getNodeAgentMonitoringOnboarding} from 'sentry/utils/gettingStartedDocs/node'; @@ -292,6 +293,10 @@ const docs: Docs = { docsPlatform: 'nuxt', packageName: '@sentry/nuxt', }), + metricsOnboarding: getJavascriptMetricsFullStackOnboarding({ + docsPlatform: 'nuxt', + packageName: '@sentry/nuxt', + }), agentMonitoringOnboarding: getNodeAgentMonitoringOnboarding({ packageName: '@sentry/nuxt', configFileName: 'sentry.server.config.ts', diff --git a/static/app/gettingStartedDocs/javascript/react.tsx b/static/app/gettingStartedDocs/javascript/react.tsx index a77e1a7803471d..b84da69527a371 100644 --- a/static/app/gettingStartedDocs/javascript/react.tsx +++ b/static/app/gettingStartedDocs/javascript/react.tsx @@ -30,6 +30,7 @@ import {featureFlag} from 'sentry/gettingStartedDocs/javascript/javascript/featu import {t, tct} from 'sentry/locale'; import { getJavascriptLogsOnboarding, + getJavascriptMetricsOnboarding, getJavascriptProfilingOnboarding, } from 'sentry/utils/gettingStartedDocs/javascript'; @@ -134,12 +135,18 @@ const getVerifySnippet = (params: Params) => { });` : ''; + const metricsCode = params.isMetricsSelected + ? ` + // Send a test metric before throwing the error + Sentry.metrics.count('test_counter', 1);` + : ''; + return `import * as Sentry from '@sentry/react'; // Add this button component to your app to test Sentry's error tracking function ErrorButton() { return ( @@ -19,6 +30,7 @@ const getVerifyNuxtSnippet = () => ` `; +}; export const onboarding: OnboardingConfig = { install: (params: DocsParams) => [ @@ -50,7 +62,7 @@ export const onboarding: OnboardingConfig = { ], }, ], - verify: () => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -70,7 +82,7 @@ export const onboarding: OnboardingConfig = { { label: 'Vue', language: 'html', - code: getVerifyNuxtSnippet(), + code: getVerifyNuxtSnippet(params), }, ], }, @@ -83,12 +95,29 @@ export const onboarding: OnboardingConfig = { ], }, ], - nextSteps: () => [ - { - id: 'nuxt-features', - name: t('Nuxt Features'), - description: t('Learn about our first class integration with the Nuxt framework.'), - link: 'https://docs.sentry.io/platforms/javascript/guides/nuxt/features/', - }, - ], + nextSteps: (params: DocsParams) => { + const steps = [ + { + id: 'nuxt-features', + name: t('Nuxt Features'), + description: t( + 'Learn about our first class integration with the Nuxt framework.' + ), + link: 'https://docs.sentry.io/platforms/javascript/guides/nuxt/features/', + }, + ]; + + 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/nuxt/metrics/', + }); + } + + return steps; + }, }; diff --git a/static/app/gettingStartedDocs/javascript/react-router/onboarding.tsx b/static/app/gettingStartedDocs/javascript/react-router/onboarding.tsx index 2f52f61a2ce233..3f09882d960039 100644 --- a/static/app/gettingStartedDocs/javascript/react-router/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/react-router/onboarding.tsx @@ -126,10 +126,15 @@ const getVerifySnippet = (params: DocsParams) => { 'action': 'test_loader_error', });` : ''; + const metricsCode = params.isMetricsSelected + ? ` + // Send a test metric before throwing the error + Sentry.metrics.count('test_counter', 1);` + : ''; return ` import type { Route } from "./+types/error-page"; -export async function loader() {${logsCode} +export async function loader() {${logsCode}${metricsCode} throw new Error("Sentry Test Error"); } diff --git a/static/app/gettingStartedDocs/javascript/remix/onboarding.tsx b/static/app/gettingStartedDocs/javascript/remix/onboarding.tsx index da5cc6a9dfcde5..f46f16e6c7222c 100644 --- a/static/app/gettingStartedDocs/javascript/remix/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/remix/onboarding.tsx @@ -9,6 +9,16 @@ import {t, tct} from 'sentry/locale'; import {getInstallContent} from './utils'; +const getVerifySnippet = (params: DocsParams) => { + const metricsCode = params.isMetricsSelected + ? ` // Send a test metric before calling undefined function + Sentry.metrics.count('test_counter', 1); +` + : ''; + + return `${metricsCode}myUndefinedFunction();`; +}; + export const onboarding: OnboardingConfig = { introduction: () => (

@@ -49,7 +59,7 @@ export const onboarding: OnboardingConfig = { ], }, ], - verify: () => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -74,7 +84,7 @@ export const onboarding: OnboardingConfig = { { label: 'Javascript', language: 'javascript', - code: `myUndefinedFunction();`, + code: getVerifySnippet(params), }, ], }, @@ -87,5 +97,20 @@ export const onboarding: OnboardingConfig = { ], }, ], - nextSteps: () => [], + nextSteps: (params: DocsParams) => { + const steps = []; + + 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/remix/metrics/', + }); + } + + return steps; + }, }; diff --git a/static/app/gettingStartedDocs/javascript/solid/onboarding.tsx b/static/app/gettingStartedDocs/javascript/solid/onboarding.tsx index 0103cd1af45bab..e67aad7445edd2 100644 --- a/static/app/gettingStartedDocs/javascript/solid/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/solid/onboarding.tsx @@ -11,15 +11,31 @@ import {t, tct} from 'sentry/locale'; import {getSdkSetupSnippet, installSnippetBlock} from './utils'; -const getVerifySnippet = () => ` +const getVerifySnippet = (params: DocsParams) => { + const logsCode = params.isLogsSelected + ? ` + // Send a log before throwing the error + Sentry.logger.info('User triggered test error', { + action: 'test_error_button_click', + });` + : ''; + + const metricsCode = params.isMetricsSelected + ? ` + // Send a test metric before throwing the error + Sentry.metrics.count('test_counter', 1);` + : ''; + + return ` `; +}; export const onboarding: OnboardingConfig = { introduction: () => ( @@ -84,7 +100,7 @@ export const onboarding: OnboardingConfig = { ...params, }), ], - verify: () => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -100,7 +116,7 @@ export const onboarding: OnboardingConfig = { { label: 'JavaScript', language: 'javascript', - code: getVerifySnippet(), + code: getVerifySnippet(params), }, ], }, @@ -130,6 +146,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/solid/metrics/', + }); + } + return steps; }, }; diff --git a/static/app/gettingStartedDocs/javascript/solidstart/onboarding.tsx b/static/app/gettingStartedDocs/javascript/solidstart/onboarding.tsx index 4a9881326764e4..3452638beeab7b 100644 --- a/static/app/gettingStartedDocs/javascript/solidstart/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/solidstart/onboarding.tsx @@ -88,15 +88,31 @@ const getSdkRun = () => ` } `; -const getVerifySnippet = () => ` +const getVerifySnippet = (params: DocsParams) => { + const logsCode = params.isLogsSelected + ? ` + // Send a log before throwing the error + Sentry.logger.info('User triggered test error', { + action: 'test_error_button_click', + });` + : ''; + + const metricsCode = params.isMetricsSelected + ? ` + // Send a test metric before throwing the error + Sentry.metrics.count('test_counter', 1);` + : ''; + + return ` `; +}; export const onboarding: OnboardingConfig = { introduction: () => @@ -274,7 +290,7 @@ export const onboarding: OnboardingConfig = { ...params, }), ], - verify: () => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -290,19 +306,47 @@ export const onboarding: OnboardingConfig = { { label: 'JavaScript', language: 'javascript', - code: getVerifySnippet(), + code: getVerifySnippet(params), }, ], }, ], }, ], - nextSteps: () => [ - { - id: 'solid-features', - name: t('Solid Features'), - description: t('Learn about our first class integration with the Solid framework.'), - link: 'https://docs.sentry.io/platforms/javascript/guides/solid/features/', - }, - ], + nextSteps: (params: DocsParams) => { + const steps = [ + { + id: 'solid-features', + name: t('Solid Features'), + description: t( + 'Learn about our first class integration with the Solid framework.' + ), + link: 'https://docs.sentry.io/platforms/javascript/guides/solid/features/', + }, + ]; + + if (params.isLogsSelected) { + steps.push({ + id: 'logs', + name: t('Logging Integrations'), + description: t( + 'Add logging integrations to automatically capture logs from your application.' + ), + link: 'https://docs.sentry.io/platforms/javascript/guides/solidstart/logs/#integrations', + }); + } + + 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/solidstart/metrics/', + }); + } + + return steps; + }, }; diff --git a/static/app/gettingStartedDocs/javascript/svelte/onboarding.tsx b/static/app/gettingStartedDocs/javascript/svelte/onboarding.tsx index 86aec4b4bd6605..c8a8cceff898a1 100644 --- a/static/app/gettingStartedDocs/javascript/svelte/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/svelte/onboarding.tsx @@ -1,22 +1,45 @@ -import type {OnboardingConfig} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import type { + DocsParams, + OnboardingConfig, +} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {getUploadSourceMapsStep} from 'sentry/components/onboarding/gettingStartedDoc/utils'; import {t, tct} from 'sentry/locale'; import {getSdkSetupSnippet, installSnippetBlock} from './utils'; -const getVerifySnippet = (isVersion5: boolean) => - isVersion5 +const getVerifySnippet = (params: DocsParams, isVersion5: boolean) => { + const logsCode = params.isLogsSelected + ? ` // Send a log before throwing the error + Sentry.logger.info('User triggered test error', { + action: 'test_error_button_click', + }); +` + : ''; + + const metricsCode = params.isMetricsSelected + ? ` // Send a test metric before throwing the error + Sentry.metrics.count('test_counter', 1); +` + : ''; + + const errorCode = + logsCode || metricsCode + ? `${logsCode}${metricsCode} throw new Error("This is your first error!");` + : `throw new Error("This is your first error!")`; + + return isVersion5 ? ` // SomeComponent.svelte -` : ` // SomeComponent.svelte -`; +}; export const onboarding: OnboardingConfig = { introduction: () => @@ -74,7 +97,7 @@ export const onboarding: OnboardingConfig = { ...params, }), ], - verify: () => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -90,12 +113,12 @@ export const onboarding: OnboardingConfig = { { label: 'Svelte v5', language: 'html', - code: getVerifySnippet(true), + code: getVerifySnippet(params, true), }, { label: 'Svelte v3/v4', language: 'html', - code: getVerifySnippet(false), + code: getVerifySnippet(params, false), }, ], }, @@ -125,6 +148,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/svelte/metrics/', + }); + } + return steps; }, }; diff --git a/static/app/gettingStartedDocs/javascript/sveltekit/onboarding.tsx b/static/app/gettingStartedDocs/javascript/sveltekit/onboarding.tsx index cb18adbaafc1f1..f2f72961100bd8 100644 --- a/static/app/gettingStartedDocs/javascript/sveltekit/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/sveltekit/onboarding.tsx @@ -1,11 +1,24 @@ import {ExternalLink} from 'sentry/components/core/link'; import {CopyDsnField} from 'sentry/components/onboarding/gettingStartedDoc/copyDsnField'; -import type {OnboardingConfig} from 'sentry/components/onboarding/gettingStartedDoc/types'; +import type { + DocsParams, + OnboardingConfig, +} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/types'; import {t, tct} from 'sentry/locale'; import {getConfigStep} from './utils'; +const getVerifySnippet = (params: DocsParams) => { + const metricsCode = params.isMetricsSelected + ? ` // Send a test metric before calling undefined function + Sentry.metrics.count('test_counter', 1); +` + : ''; + + return `${metricsCode}myUndefinedFunction();`; +}; + export const onboarding: OnboardingConfig = { install: params => [ { @@ -36,7 +49,7 @@ export const onboarding: OnboardingConfig = { ], }, ], - verify: () => [ + verify: (params: DocsParams) => [ { type: StepType.VERIFY, content: [ @@ -61,7 +74,7 @@ export const onboarding: OnboardingConfig = { { label: 'Javascript', language: 'javascript', - code: `myUndefinedFunction();`, + code: getVerifySnippet(params), }, ], }, diff --git a/static/app/gettingStartedDocs/javascript/tanstackstart-react/onboarding.tsx b/static/app/gettingStartedDocs/javascript/tanstackstart-react/onboarding.tsx index 19b3b3cb0ed2a1..8125e274d72d4b 100644 --- a/static/app/gettingStartedDocs/javascript/tanstackstart-react/onboarding.tsx +++ b/static/app/gettingStartedDocs/javascript/tanstackstart-react/onboarding.tsx @@ -339,7 +339,13 @@ const route = createRoute({ language: 'tsx', code: `