feat(metrics): Add React Native onboarding (#66960)

Author: krystofwoldrich

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

@@ -39,73 +39,102 @@ export const getJSMetricsOnboarding = ({
       configurations: getInstallConfig(params),
     },
   ],
-  configure: params => [
-    {
-      type: StepType.CONFIGURE,
-      description: tct(
-        'To enable capturing metrics, you first need to add the metrics aggregator integration under the [codeNamespace:Sentry.metrics] namespace.',
-        {
-          codeNamespace: <code />,
-        }
-      ),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'JavaScript',
-              value: 'javascript',
-              language: 'javascript',
-              code: getJSConfigureSnippet(params),
-            },
-          ],
-        },
-      ],
-    },
-  ],
-  verify: () => [
+  configure: getJSMetricsOnboardingConfigure,
+  verify: () =>
+    getJSMetricsOnboardingVerify({
+      docsLink: 'https://docs.sentry.io/platforms/javascript/metrics/',
+    }),
+});
+
+export const getReactNativeMetricsOnboarding = ({
+  getInstallConfig,
+}: {
+  getInstallConfig: (params: DocsParams<any>) => StepProps['configurations'];
+}): OnboardingConfig => ({
+  install: params => [
     {
-      type: StepType.VERIFY,
+      type: StepType.INSTALL,
       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:",
+        'You need a minimum version [codeVersion:5.19.0] of the Sentry React Native SDK installed.',
         {
-          codeCounters: <code />,
-          codeSets: <code />,
-          codeDistribution: <code />,
-          codeGauge: <code />,
-          codeNamespace: <code />,
+          codeVersion: <code />,
         }
       ),
-      configurations: [
-        {
-          code: [
-            {
-              label: 'JavaScript',
-              value: 'javascript',
-              language: 'javascript',
-              code: getJSVerifySnippet(),
-            },
-          ],
-        },
-        {
-          description: t(
-            'With a bit of delay you can see the data appear in the Sentry UI.'
-          ),
-        },
-        {
-          description: tct(
-            'Learn more about metrics and how to configure them, by reading the [docsLink:docs].',
-            {
-              docsLink: (
-                <ExternalLink href="https://docs.sentry.io/platforms/javascript/metrics/" />
-              ),
-            }
-          ),
-        },
-      ],
+      configurations: getInstallConfig(params),
     },
   ],
+  configure: getJSMetricsOnboardingConfigure,
+  verify: () =>
+    getJSMetricsOnboardingVerify({
+      docsLink: 'https://docs.sentry.io/platforms/react-native/metrics/',
+    }),
 });
 
+const getJSMetricsOnboardingConfigure = (params: DocsParams) => [
+  {
+    type: StepType.CONFIGURE,
+    description: tct(
+      'To enable capturing metrics, you first need to add the metrics aggregator integration under the [codeNamespace:Sentry.metrics] namespace.',
+      {
+        codeNamespace: <code />,
+      }
+    ),
+    configurations: [
+      {
+        code: [
+          {
+            label: 'JavaScript',
+            value: 'javascript',
+            language: 'javascript',
+            code: getJSConfigureSnippet(params),
+          },
+        ],
+      },
+    ],
+  },
+];
+
+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:",
+      {
+        codeCounters: <code />,
+        codeSets: <code />,
+        codeDistribution: <code />,
+        codeGauge: <code />,
+        codeNamespace: <code />,
+      }
+    ),
+    configurations: [
+      {
+        code: [
+          {
+            label: 'JavaScript',
+            value: 'javascript',
+            language: 'javascript',
+            code: getJSVerifySnippet(),
+          },
+        ],
+      },
+      {
+        description: t(
+          'With a bit of delay you can see the data appear in the Sentry UI.'
+        ),
+      },
+      {
+        description: tct(
+          'Learn more about metrics and how to configure them, by reading the [docsLink:docs].',
+          {
+            docsLink: <ExternalLink href={docsLink} />,
+          }
+        ),
+      },
+    ],
+  },
+];
+
 const getJSServerConfigureSnippet = (params: DocsParams) => `
 Sentry.init({
   dsn: "${params.dsn}",

static/app/data/platformCategories.tsx

@@ -524,6 +524,7 @@ const customMetricFrontendPlatforms: readonly PlatformKey[] = [
   'javascript-sveltekit',
   'javascript-vue',
   'javascript',
+  'react-native',
 ];
 
 // These are all the platforms that can set up custom metrics.

static/app/gettingStartedDocs/react-native/react-native.tsx

@@ -13,6 +13,7 @@ import {
   getCrashReportApiIntroduction,
   getCrashReportInstallDescription,
 } from 'sentry/components/onboarding/gettingStartedDoc/utils/feedbackOnboarding';
+import {getReactNativeMetricsOnboarding} from 'sentry/components/onboarding/gettingStartedDoc/utils/metricsOnboarding';
 import {t, tct} from 'sentry/locale';
 
 type Params = DocsParams;
@@ -327,10 +328,31 @@ Sentry.captureUserFeedback(userFeedback);`,
   nextSteps: () => [],
 };
 
+const getInstallConfig = () => [
+  {
+    language: 'bash',
+    code: [
+      {
+        label: 'npm',
+        value: 'npm',
+        language: 'bash',
+        code: 'npm install --save @sentry/react-native',
+      },
+      {
+        label: 'yarn',
+        value: 'yarn',
+        language: 'bash',
+        code: 'yarn add @sentry/react-native',
+      },
+    ],
+  },
+];
+
 const docs: Docs = {
   onboarding,
   feedbackOnboardingCrashApi,
   crashReportOnboarding: feedbackOnboardingCrashApi,
+  customMetricsOnboarding: getReactNativeMetricsOnboarding({getInstallConfig}),
 };
 
 export default docs;