feat(metrics): Add metrics onboarding docs for iOS (#69020)

Adds metrics onboarding docs for iOS. 
Also updates Swift snippet for experimental features and adds an
Objective-C version of the snippet.

closes getsentry/sentry-docs#9614

<img width="578" alt="Screenshot 2024-04-16 at 20 35 54"
src="https://github.com/getsentry/sentry/assets/2005158/0c60ed1f-0cfb-4d6e-b205-bb4d8be068f0">

---------

Co-authored-by: ArthurKnaus <arthur.knaus@sentry.io>

Author: kahest

static/app/data/platformCategories.tsx

@@ -513,6 +513,7 @@ const customMetricBackendPlatforms: readonly PlatformKey[] = [
 
 const customMetricFrontendPlatforms: readonly PlatformKey[] = [
   'android',
+  'apple-ios',
   'electron',
   'flutter',
   'java-android',

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

@@ -1,28 +1,86 @@
 import ExternalLink from 'sentry/components/links/externalLink';
+import Link from 'sentry/components/links/link';
 import List from 'sentry/components/list/';
 import ListItem from 'sentry/components/list/listItem';
 import {StepType} from 'sentry/components/onboarding/gettingStartedDoc/step';
 import type {
   Docs,
+  DocsParams,
   OnboardingConfig,
 } from 'sentry/components/onboarding/gettingStartedDoc/types';
 import {appleFeedbackOnboarding} from 'sentry/gettingStartedDocs/apple/apple-macos';
 import {t, tct} from 'sentry/locale';
 
-const getExperimentalFeaturesSnippet = () => `
+type Params = DocsParams;
+
+const getInstallSnippet = () =>
+  `brew install getsentry/tools/sentry-wizard && sentry-wizard -i ios`;
+
+const getExperimentalFeaturesSnippetSwift = () => `
 import Sentry
 
 SentrySDK.start { options in
     // ...
 
     // Enable all experimental features
     options.attachViewHierarchy = true
-    options.enablePreWarmedAppStartTracing = true
     options.enableMetricKit = true
     options.enableTimeToFullDisplayTracing = true
     options.swiftAsyncStacktraces = true
+    options.enableAppLaunchProfiling = true
+}`;
+
+const getExperimentalFeaturesSnippetObjC = () => `
+@import Sentry;
+
+[SentrySDK startWithConfigureOptions:^(SentryOptions *options) {
+    // ...
+
+    // Enable all experimental features
+    options.attachViewHierarchy = YES;
+    options.enableMetricKit = YES;
+    options.enableTimeToFullDisplayTracing = YES;
+    options.swiftAsyncStacktraces = YES;
+    options.enableAppLaunchProfiling = YES;
+}];`;
+
+const getConfigureMetricsSnippetSwift = (params: Params) => `
+import Sentry
+
+SentrySDK.start { options in
+    options.dsn = "${params.dsn}"
+
+    options.enableMetrics = true
 }`;
 
+const getConfigureMetricsSnippetObjC = (params: Params) => `
+@import Sentry;
+
+[SentrySDK startWithConfigureOptions:^(SentryOptions * options) {
+    options.Dsn = @"${params.dsn}";
+
+    options.enableMetrics = YES;
+}];`;
+
+const getVerifyMetricsSnippetSwift = () => `
+import Sentry
+
+SentrySDK.metrics
+    .increment(key: "button_login_click",
+               value: 1.0,
+               tags: ["screen": "login"]
+    )`;
+
+const getVerifyMetricsSnippetObjC = () => `
+@import Sentry;
+
+[SentrySDK.metrics
+    incrementWithKey :@"button_login_click"
+    value: 1.0
+    unit: SentryMeasurementUnit.none
+    tags: @{ @"screen" : @"login" }
+];`;
+
 const onboarding: OnboardingConfig = {
   install: () => [
     {
@@ -42,7 +100,7 @@ const onboarding: OnboardingConfig = {
       configurations: [
         {
           language: 'bash',
-          code: `brew install getsentry/tools/sentry-wizard && sentry-wizard -i ios`,
+          code: getInstallSnippet(),
         },
       ],
     },
@@ -137,8 +195,20 @@ const onboarding: OnboardingConfig = {
       ),
       configurations: [
         {
-          language: 'swift',
-          code: getExperimentalFeaturesSnippet(),
+          code: [
+            {
+              label: 'Swift',
+              value: 'swift',
+              language: 'swift',
+              code: getExperimentalFeaturesSnippetSwift(),
+            },
+            {
+              label: 'Objective-C',
+              value: 'c',
+              language: 'c',
+              code: getExperimentalFeaturesSnippetObjC(),
+            },
+          ],
         },
       ],
     },
@@ -175,10 +245,111 @@ const onboarding: OnboardingConfig = {
   ],
 };
 
+const metricsOnboarding: OnboardingConfig = {
+  install: (params: DocsParams) => [
+    {
+      type: StepType.INSTALL,
+      description: tct(
+        'You need Sentry Cocoa SDK version [codeVersion:8.23.0] or higher. Learn more about installation methods in our [docsLink:full documentation].',
+        {
+          codeVersion: <code />,
+          docsLink: <Link to={`/projects/${params.projectSlug}/getting-started/`} />,
+        }
+      ),
+      configurations: [
+        {
+          language: 'yml',
+          partialLoading: params.sourcePackageRegistries?.isLoading,
+          code: getInstallSnippet(),
+        },
+      ],
+    },
+  ],
+  configure: (params: DocsParams) => [
+    {
+      type: StepType.CONFIGURE,
+      description: t(
+        'To enable capturing metrics, you need to enable the metrics feature.'
+      ),
+      configurations: [
+        {
+          code: [
+            {
+              label: 'Swift',
+              value: 'swift',
+              language: 'swift',
+              code: getConfigureMetricsSnippetSwift(params),
+            },
+            {
+              label: 'Objective-C',
+              value: 'c',
+              language: 'c',
+              code: getConfigureMetricsSnippetObjC(params),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  verify: () => [
+    {
+      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:",
+        {
+          codeCounters: <code />,
+          codeSets: <code />,
+          codeDistribution: <code />,
+          codeGauge: <code />,
+          codeNamespace: <code />,
+        }
+      ),
+      configurations: [
+        {
+          configurations: [
+            {
+              code: [
+                {
+                  label: 'Swift',
+                  value: 'swift',
+                  language: 'swift',
+                  code: getVerifyMetricsSnippetSwift(),
+                },
+                {
+                  label: 'Objective-C',
+                  value: 'c',
+                  language: 'c',
+                  code: getVerifyMetricsSnippetObjC(),
+                },
+              ],
+            },
+          ],
+        },
+        {
+          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/apple/metrics/" />
+              ),
+            }
+          ),
+        },
+      ],
+    },
+  ],
+};
+
 const docs: Docs = {
   onboarding,
   feedbackOnboardingCrashApi: appleFeedbackOnboarding,
   crashReportOnboarding: appleFeedbackOnboarding,
+  customMetricsOnboarding: metricsOnboarding,
 };
 
 export default docs;