diff --git a/static/app/components/onboarding/gettingStartedDoc/utils/metricsOnboarding.tsx b/static/app/components/onboarding/gettingStartedDoc/utils/metricsOnboarding.tsx
index 101a08f4906b98..d99f090929e951 100644
--- a/static/app/components/onboarding/gettingStartedDoc/utils/metricsOnboarding.tsx
+++ b/static/app/components/onboarding/gettingStartedDoc/utils/metricsOnboarding.tsx
@@ -38,73 +38,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: ,
- }
- ),
- 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) => 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: ,
- codeSets: ,
- codeDistribution: ,
- codeGauge: ,
- codeNamespace: ,
+ codeVersion: ,
}
),
- 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: (
-
- ),
- }
- ),
- },
- ],
+ 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: ,
+ }
+ ),
+ 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: ,
+ codeSets: ,
+ codeDistribution: ,
+ codeGauge: ,
+ codeNamespace: ,
+ }
+ ),
+ 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: ,
+ }
+ ),
+ },
+ ],
+ },
+];
+
const getJSServerConfigureSnippet = (params: DocsParams) => `
Sentry.init({
dsn: "${params.dsn}",
diff --git a/static/app/data/platformCategories.tsx b/static/app/data/platformCategories.tsx
index bc76b683d4943f..7582e70c226498 100644
--- a/static/app/data/platformCategories.tsx
+++ b/static/app/data/platformCategories.tsx
@@ -514,6 +514,7 @@ const customMetricFrontendPlatforms: readonly PlatformKey[] = [
'javascript-sveltekit',
'javascript-vue',
'javascript',
+ 'react-native',
];
// These are all the platforms that can set up custom metrics.
diff --git a/static/app/gettingStartedDocs/react-native/react-native.tsx b/static/app/gettingStartedDocs/react-native/react-native.tsx
index c268379c3b35c4..2235ec24c5e85c 100644
--- a/static/app/gettingStartedDocs/react-native/react-native.tsx
+++ b/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;