feat(metrics): Add tags onboarding content (#70221)

Ad onboarding content for metric tags.

Closes https://github.com/getsentry/sentry/issues/70208

static/app/components/onboarding/gettingStartedDoc/utils/metricsOnboarding.tsx

@@ -124,7 +124,7 @@ const getJSMetricsOnboardingVerify = ({docsLink}: {docsLink: string}) => [
   {
     type: StepType.VERIFY,
     description: tct(
-      "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. Try out this example:",
+      "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace.",
       {
         codeCounters: <code />,
         codeSets: <code />,
@@ -204,7 +204,7 @@ export const getJSServerMetricsOnboarding = (): OnboardingConfig => ({
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -363,6 +363,15 @@ Sentry.metrics().set(
   )
 )`;
 
+export const metricTagsExplanation = tct(
+  'You can also enrich your metrics with [codeTags:tags] (key/value pairs like [codePlatform:platform:ios], [codeRegion:region:EU]) to provide added context. Filter and group metrics in the product by these tags to refine your analysis.',
+  {
+    codeTags: <code />,
+    codePlatform: <code />,
+    codeRegion: <code />,
+  }
+);
+
 export const getAndroidMetricsOnboarding = (): OnboardingConfig => ({
   install: (params: DocsParams) => [
     {
@@ -411,7 +420,7 @@ export const getAndroidMetricsOnboarding = (): OnboardingConfig => ({
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -509,7 +518,7 @@ export const getJavaMetricsOnboarding = (): OnboardingConfig => ({
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -614,7 +623,7 @@ export const getPythonMetricsOnboarding = ({
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges].",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -625,6 +634,10 @@ export const getPythonMetricsOnboarding = ({
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',
@@ -722,7 +735,7 @@ export const getDotnetMetricsOnboarding = ({
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], [codeGauge:gauges], and [codeTimings:timings]. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], [codeGauge:gauges], and [codeTimings:timings].",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -733,6 +746,10 @@ export const getDotnetMetricsOnboarding = ({
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',
@@ -830,7 +847,7 @@ export const getRubyMetricsOnboarding = (): OnboardingConfig => ({
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges].",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -841,6 +858,10 @@ export const getRubyMetricsOnboarding = (): OnboardingConfig => ({
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',

static/app/gettingStartedDocs/apple/apple-ios.tsx

@@ -8,6 +8,7 @@ import type {
   DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {appleFeedbackOnboarding} from 'sentry/gettingStartedDocs/apple/apple-macos';
 import {t, tct} from 'sentry/locale';
 
@@ -347,7 +348,7 @@ const metricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:SentrySDK.metrics()] namespace. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:SentrySDK.metrics()] namespace.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -358,22 +359,22 @@ const metricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
-          configurations: [
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
+          code: [
             {
-              code: [
-                {
-                  label: 'Swift',
-                  value: 'swift',
-                  language: 'swift',
-                  code: getVerifyMetricsSnippetSwift(),
-                },
-                {
-                  label: 'Objective-C',
-                  value: 'c',
-                  language: 'c',
-                  code: getVerifyMetricsSnippetObjC(),
-                },
-              ],
+              label: 'Swift',
+              value: 'swift',
+              language: 'swift',
+              code: getVerifyMetricsSnippetSwift(),
+            },
+            {
+              label: 'Objective-C',
+              value: 'c',
+              language: 'c',
+              code: getVerifyMetricsSnippetObjC(),
             },
           ],
         },

static/app/gettingStartedDocs/bun/bun.tsx

@@ -12,6 +12,7 @@ import {
   getCrashReportModalIntroduction,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
@@ -147,7 +148,7 @@ const customMetricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -158,6 +159,10 @@ const customMetricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',

static/app/gettingStartedDocs/dart/dart.tsx

@@ -11,6 +11,7 @@ import {
   getCrashReportInstallDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
@@ -130,7 +131,7 @@ const metricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -141,34 +142,34 @@ const metricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
-          configurations: [
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
+          code: [
             {
-              code: [
-                {
-                  label: 'Counter',
-                  value: 'counter',
-                  language: 'dart',
-                  code: exampleSnippets.dart.counter,
-                },
-                {
-                  label: 'Distribution',
-                  value: 'distribution',
-                  language: 'dart',
-                  code: exampleSnippets.dart.distribution,
-                },
-                {
-                  label: 'Set',
-                  value: 'set',
-                  language: 'dart',
-                  code: exampleSnippets.dart.set,
-                },
-                {
-                  label: 'Gauge',
-                  value: 'gauge',
-                  language: 'dart',
-                  code: exampleSnippets.dart.gauge,
-                },
-              ],
+              label: 'Counter',
+              value: 'counter',
+              language: 'dart',
+              code: exampleSnippets.dart.counter,
+            },
+            {
+              label: 'Distribution',
+              value: 'distribution',
+              language: 'dart',
+              code: exampleSnippets.dart.distribution,
+            },
+            {
+              label: 'Set',
+              value: 'set',
+              language: 'dart',
+              code: exampleSnippets.dart.set,
+            },
+            {
+              label: 'Gauge',
+              value: 'gauge',
+              language: 'dart',
+              code: exampleSnippets.dart.gauge,
             },
           ],
         },

static/app/gettingStartedDocs/electron/electron.tsx

@@ -17,6 +17,7 @@ import {
   getFeedbackSDKSetupSnippet,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {
   getReplayConfigureDescription,
   getReplaySDKSetupSnippet,
@@ -212,7 +213,7 @@ const customMetricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics] namespace. This API is available in both renderer and main processes.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -223,6 +224,10 @@ const customMetricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',

static/app/gettingStartedDocs/flutter/flutter.tsx

@@ -7,6 +7,7 @@ import type {
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {feedbackOnboardingCrashApiDart} from 'sentry/gettingStartedDocs/dart/dart';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
@@ -145,7 +146,7 @@ const metricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. These are available under the [codeNamespace:Sentry.metrics()] namespace.",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -156,34 +157,34 @@ const metricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
-          configurations: [
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
+          code: [
             {
-              code: [
-                {
-                  label: 'Counter',
-                  value: 'counter',
-                  language: 'dart',
-                  code: exampleSnippets.dart.counter,
-                },
-                {
-                  label: 'Distribution',
-                  value: 'distribution',
-                  language: 'dart',
-                  code: exampleSnippets.dart.distribution,
-                },
-                {
-                  label: 'Set',
-                  value: 'set',
-                  language: 'dart',
-                  code: exampleSnippets.dart.set,
-                },
-                {
-                  label: 'Gauge',
-                  value: 'gauge',
-                  language: 'dart',
-                  code: exampleSnippets.dart.gauge,
-                },
-              ],
+              label: 'Counter',
+              value: 'counter',
+              language: 'dart',
+              code: exampleSnippets.dart.counter,
+            },
+            {
+              label: 'Distribution',
+              value: 'distribution',
+              language: 'dart',
+              code: exampleSnippets.dart.distribution,
+            },
+            {
+              label: 'Set',
+              value: 'set',
+              language: 'dart',
+              code: exampleSnippets.dart.set,
+            },
+            {
+              label: 'Gauge',
+              value: 'gauge',
+              language: 'dart',
+              code: exampleSnippets.dart.gauge,
             },
           ],
         },

static/app/gettingStartedDocs/php/laravel.tsx

@@ -11,6 +11,7 @@ import {
   getCrashReportSDKInstallFirstStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
@@ -199,7 +200,7 @@ const customMetricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges].",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -210,6 +211,10 @@ const customMetricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',

static/app/gettingStartedDocs/php/php.tsx

@@ -11,6 +11,7 @@ import {
   getCrashReportPHPInstallStep,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import replayOnboardingJsLoader from 'sentry/gettingStartedDocs/javascript/jsLoader/jsLoader';
 import {t, tct} from 'sentry/locale';
 
@@ -168,7 +169,7 @@ const customMetricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges]. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], and [codeGauge:gauges].",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -179,6 +180,10 @@ const customMetricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',

static/app/gettingStartedDocs/unity/unity.tsx

@@ -13,6 +13,7 @@ import {
   getCrashReportInstallDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
 import exampleSnippets from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsExampleSnippets';
+import {metricTagsExplanation} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 import {getPackageVersion} from 'sentry/utils/gettingStartedDocs/getPackageVersion';
 
@@ -197,7 +198,7 @@ const metricsOnboarding: OnboardingConfig = {
     {
       type: StepType.VERIFY,
       description: tct(
-        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], [codeGauge:gauges], and [codeTimings:timings]. Try out this example:",
+        "Then you'll be able to add metrics as [codeCounters:counters], [codeSets:sets], [codeDistribution:distributions], [codeGauge:gauges], and [codeTimings:timings].",
         {
           codeCounters: <code />,
           codeSets: <code />,
@@ -208,6 +209,10 @@ const metricsOnboarding: OnboardingConfig = {
       ),
       configurations: [
         {
+          description: metricTagsExplanation,
+        },
+        {
+          description: t('Try out these examples:'),
           code: [
             {
               label: 'Counter',