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;