diff --git a/static/app/utils/analytics/metricsAnalyticsEvent.tsx b/static/app/utils/analytics/metricsAnalyticsEvent.tsx index 2fc1d3245a67f0..482bd0aafec69f 100644 --- a/static/app/utils/analytics/metricsAnalyticsEvent.tsx +++ b/static/app/utils/analytics/metricsAnalyticsEvent.tsx @@ -38,9 +38,11 @@ export type MetricsAnalyticsEventParameters = { organization: Organization; }; 'metrics.nav.rendered': { + has_feature_flag: boolean; + has_metrics_supported_platform: boolean; + metrics_supported_platform_name: string | undefined; metrics_tab_visible: boolean; organization: Organization; - platforms: Array; }; 'metrics.onboarding': { organization: Organization; diff --git a/static/app/views/nav/secondary/sections/explore/exploreSecondaryNav.tsx b/static/app/views/nav/secondary/sections/explore/exploreSecondaryNav.tsx index b12ba078b6829c..ae4ea68df2d7f6 100644 --- a/static/app/views/nav/secondary/sections/explore/exploreSecondaryNav.tsx +++ b/static/app/views/nav/secondary/sections/explore/exploreSecondaryNav.tsx @@ -1,4 +1,4 @@ -import {Fragment, useEffect, useMemo} from 'react'; +import {Fragment, useEffect, useMemo, useRef} from 'react'; import Feature from 'sentry/components/acl/feature'; import {FeatureBadge} from 'sentry/components/core/badge/featureBadge'; @@ -10,6 +10,7 @@ import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import useProjects from 'sentry/utils/useProjects'; import {useGetSavedQueries} from 'sentry/views/explore/hooks/useGetSavedQueries'; +import {canUseMetricsUI} from 'sentry/views/explore/metrics/metricsFlags'; import {PRIMARY_NAV_GROUP_CONFIG} from 'sentry/views/nav/primary/config'; import {SecondaryNav} from 'sentry/views/nav/secondary/secondary'; import {ExploreSavedQueryNavItems} from 'sentry/views/nav/secondary/sections/explore/exploreSavedQueryNavItems'; @@ -38,12 +39,19 @@ export function ExploreSecondaryNav() { [projects] ); - const hasMetricsSupportedPlatform = projects.some(project => { - const platform = project.platform || 'unknown'; - return Array.from(limitedMetricsSupportPrefixes).some(prefix => - platform.startsWith(prefix) - ); - }); + const metricsSupportedPlatformNameRef = useRef(undefined); + + if (!metricsSupportedPlatformNameRef.current) { + const metricsSupportedPlatform = projects.find(project => { + const platform = project.platform || 'unknown'; + return Array.from(limitedMetricsSupportPrefixes).find(prefix => + platform.startsWith(prefix) + ); + }); + metricsSupportedPlatformNameRef.current = metricsSupportedPlatform?.slug; + } + + const hasMetricsSupportedPlatform = !!metricsSupportedPlatformNameRef.current; useEffect(() => { if (userPlatforms.length === 0) { @@ -51,10 +59,12 @@ export function ExploreSecondaryNav() { } trackAnalytics('metrics.nav.rendered', { organization, - metrics_tab_visible: hasMetricsSupportedPlatform, - platforms: userPlatforms, + has_feature_flag: canUseMetricsUI(organization), + has_metrics_supported_platform: hasMetricsSupportedPlatform, + metrics_supported_platform_name: metricsSupportedPlatformNameRef.current, + metrics_tab_visible: hasMetricsSupportedPlatform && canUseMetricsUI(organization), }); - }, [organization, hasMetricsSupportedPlatform, userPlatforms]); + }, [organization, hasMetricsSupportedPlatform, userPlatforms.length]); return (