add metrics code snippets

Author: chargome

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/onboarding.tsx

@@ -96,18 +96,24 @@ const getVerifySnippet = (params: DocsParams) => {
     });`
     : '';
 
+  const metricsCode = params.isMetricsSelected
+    ? `
+    // Send a test metric before throwing the error
+    Sentry.metrics.count('test_counter', 1);`
+    : '';
+
   return `
 <!-- your-page.astro -->
 ---
 ---
 <button id="error-button">Throw test error</button>
 <script>${
-    params.isLogsSelected
+    params.isLogsSelected || params.isMetricsSelected
       ? `
   import * as Sentry from "@sentry/astro";`
       : ''
   }
-  function handleClick () {${logsCode}
+  function handleClick () {${logsCode}${metricsCode}
     throw new Error('This is a test error');
   }
   document.querySelector("#error-button").addEventListener("click", handleClick);
@@ -311,6 +317,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/astro/metrics/',
+      });
+    }
+
     return steps;
   },
 };

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

@@ -17,11 +17,17 @@ const getVerifyEmberSnippet = (params: DocsParams) => {
 `
     : '';
 
+  const metricsCode = params.isMetricsSelected
+    ? `// Send a test metric before throwing the error
+    Sentry.metrics.count('test_counter', 1);
+`
+    : '';
+
   return `
 import * as Sentry from "@sentry/ember";
 
 setTimeout(() => {
-  ${logsCode}throw new Error("Sentry Test Error");
+  ${logsCode}${metricsCode}throw new Error("Sentry Test Error");
 });`;
 };
 
@@ -120,6 +126,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/ember/metrics/',
+      });
+    }
+
     return steps;
   },
 };

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

@@ -17,11 +17,17 @@ const getVerifySnippet = (params: DocsParams) => {
 `
     : '';
 
+  const metricsCode = params.isMetricsSelected
+    ? `// Send a test metric before throwing the error
+    Sentry.metrics.count('test_counter', 1);
+`
+    : '';
+
   return `
 import * as Sentry from "@sentry/gatsby";
 
 setTimeout(() => {
-  ${logsCode}throw new Error("Sentry Test Error");
+  ${logsCode}${metricsCode}throw new Error("Sentry Test Error");
 });`;
 };
 
@@ -92,6 +98,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/gatsby/metrics/',
+      });
+    }
+
     return steps;
   },
 };

static/app/gettingStartedDocs/javascript/javascript/utils.tsx

@@ -148,10 +148,17 @@ export const installSnippetBlock: ContentBlock = {
   ],
 };
 
-const getVerifyJSSnippet = () => `
-myUndefinedFunction();`;
+const getVerifyJSSnippet = (params: Params) => {
+  const metricsCode = params.isMetricsSelected
+    ? `  // Send a test metric before calling undefined function
+  Sentry.metrics.count('test_counter', 1);
+`
+    : '';
+
+  return `${metricsCode}myUndefinedFunction();`;
+};
 
-export const verifySnippetBlock: ContentBlock[] = [
+const getVerifySnippetBlock = (params: Params): ContentBlock[] => [
   {
     type: 'text',
     text: t(
@@ -164,7 +171,7 @@ export const verifySnippetBlock: ContentBlock[] = [
       {
         label: 'Javascript',
         language: 'javascript',
-        code: getVerifyJSSnippet(),
+        code: getVerifyJSSnippet(params),
       },
     ],
   },
@@ -305,10 +312,10 @@ logger.fatal("Database connection pool exhausted", {
 `,
   });
 
-const getVerifyConfig = () => [
+const getVerifyConfig = (params: Params) => [
   {
     type: StepType.VERIFY,
-    content: verifySnippetBlock,
+    content: getVerifySnippetBlock(params),
   },
 ];
 
@@ -440,15 +447,32 @@ export const loaderScriptOnboarding: OnboardingConfig<PlatformOptions> = {
     },
     getAiRulesConfig(params),
   ],
-  verify: getVerifyConfig,
-  nextSteps: () => [
-    {
-      id: 'source-maps',
-      name: t('Source Maps'),
-      description: t('Learn how to enable readable stack traces in your Sentry errors.'),
-      link: 'https://docs.sentry.io/platforms/javascript/sourcemaps/',
-    },
-  ],
+  verify: (params: Params) => getVerifyConfig(params),
+  nextSteps: (params: Params) => {
+    const steps = [
+      {
+        id: 'source-maps',
+        name: t('Source Maps'),
+        description: t(
+          'Learn how to enable readable stack traces in your Sentry errors.'
+        ),
+        link: 'https://docs.sentry.io/platforms/javascript/sourcemaps/',
+      },
+    ];
+
+    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/javascript/metrics/',
+      });
+    }
+
+    return steps;
+  },
   onPageLoad: params => {
     return () => {
       trackAnalytics('onboarding.setup_loader_docs_rendered', {
@@ -542,8 +566,23 @@ export const packageManagerOnboarding: OnboardingConfig<PlatformOptions> = {
     }),
     getAiRulesConfig(params),
   ],
-  verify: getVerifyConfig,
-  nextSteps: () => [],
+  verify: (params: Params) => getVerifyConfig(params),
+  nextSteps: (params: Params) => {
+    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/javascript/metrics/',
+      });
+    }
+
+    return steps;
+  },
   onPageLoad: params => {
     return () => {
       trackAnalytics('onboarding.js_loader_npm_docs_shown', {

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

@@ -10,6 +10,16 @@ import {t, tct} from 'sentry/locale';
 
 import {getInstallSnippet} 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: DocsParams) => [
     {
@@ -189,7 +199,7 @@ logger.fatal("Database connection pool exhausted", {
 `,
     }),
   ],
-  verify: () => [
+  verify: (params: DocsParams) => [
     {
       type: StepType.VERIFY,
       content: [
@@ -214,7 +224,7 @@ logger.fatal("Database connection pool exhausted", {
             {
               label: 'JavaScript',
               language: 'javascript',
-              code: `myUndefinedFunction();`,
+              code: getVerifySnippet(params),
             },
           ],
         },

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

@@ -9,16 +9,28 @@ import {t, tct, tctCode} from 'sentry/locale';
 
 import {getInstallContent} from './utils';
 
-const getVerifyNuxtSnippet = () => `
-<script setup>
-  const triggerError = () => {
+const getVerifyNuxtSnippet = (params: DocsParams) => {
+  const metricsCode = params.isMetricsSelected
+    ? `
+    // Send a test metric before throwing the error
+    Sentry.metrics.count('test_counter', 1);`
+    : '';
+
+  const importSentry = params.isMetricsSelected
+    ? `\nimport * as Sentry from "@sentry/nuxt";\n`
+    : '';
+
+  return `
+<script setup>${importSentry}
+  const triggerError = () => {${metricsCode}
     throw new Error("Nuxt Button Error");
   };
 </script>
 
 <template>
   <button id="errorBtn" @click="triggerError">Trigger Error</button>
 </template>`;
+};
 
 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;
+  },
 };