ref(insights): use useSpanMetrics in mobile vitals landing (#89060)

use `useSpanMetrics` and `useMetrics` in mobile vitals landing as these
hooks have the conditional to query eap or the original dataset and are
completely typesafe.

Closes DAIN-186

Author: DominikB2014

static/app/views/insights/mobile/screens/utils.ts

@@ -2,6 +2,7 @@ import {DURATION_UNITS} from 'sentry/utils/discover/fieldRenderers';
 import type {DiscoverDatasets} from 'sentry/utils/discover/types';
 import getDuration from 'sentry/utils/duration/getDuration';
 import {formatPercentage} from 'sentry/utils/number/formatPercentage';
+import type {MetricsProperty, SpanMetricsProperty} from 'sentry/views/insights/types';
 import {VitalState} from 'sentry/views/performance/vitalDetail/utils';
 
 const formatMetricValue = (metric: MetricValue, field?: string | undefined): string => {
@@ -49,18 +50,24 @@ export type VitalStatus = {
   value: MetricValue | undefined;
 };
 
-export type VitalItem = {
-  dataset: DiscoverDatasets;
+export type GenericVitalItem<
+  T extends DiscoverDatasets.SPANS_METRICS | DiscoverDatasets.METRICS,
+> = {
+  dataset: T;
   description: string;
   docs: React.ReactNode;
-  field: string;
+  field: T extends DiscoverDatasets.SPANS_METRICS ? SpanMetricsProperty : MetricsProperty;
   getStatus: (value: MetricValue, field?: string | undefined) => VitalStatus;
   platformDocLinks: Record<string, string>;
   sdkDocLinks: Record<string, string>;
   setup: React.ReactNode | undefined;
   title: string;
 };
 
+export type VitalItem =
+  | GenericVitalItem<DiscoverDatasets.METRICS>
+  | GenericVitalItem<DiscoverDatasets.SPANS_METRICS>;
+
 export type MetricValue = {
   // the field type if defined, e.g. duration
   type: string | undefined;

static/app/views/insights/mobile/screens/views/screensLandingPage.tsx

@@ -12,18 +12,17 @@ import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilt
 import {PageHeadingQuestionTooltip} from 'sentry/components/pageHeadingQuestionTooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
-import type {NewQuery} from 'sentry/types/organization';
-import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery';
-import EventView from 'sentry/utils/discover/eventView';
 import {DiscoverDatasets} from 'sentry/utils/discover/types';
 import {PageAlert, PageAlertProvider} from 'sentry/utils/performance/contexts/pageAlert';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {useLocation} from 'sentry/utils/useLocation';
 import {useNavigate} from 'sentry/utils/useNavigate';
-import useOrganization from 'sentry/utils/useOrganization';
-import usePageFilters from 'sentry/utils/usePageFilters';
 import {ModulePageProviders} from 'sentry/views/insights/common/components/modulePageProviders';
 import {ModuleBodyUpsellHook} from 'sentry/views/insights/common/components/moduleUpsellHookWrapper';
+import {
+  useMetrics,
+  useSpanMetrics,
+} from 'sentry/views/insights/common/queries/useDiscover';
 import {useMobileVitalsDrawer} from 'sentry/views/insights/common/utils/useMobileVitalsDrawer';
 import useCrossPlatformProject from 'sentry/views/insights/mobile/common/queries/useCrossPlatformProject';
 import {PlatformSelector} from 'sentry/views/insights/mobile/screenload/components/platformSelector';
@@ -53,7 +52,6 @@ function ScreensLandingPage() {
   const moduleName = ModuleName.MOBILE_VITALS;
   const navigate = useNavigate();
   const location = useLocation();
-  const organization = useOrganization();
   const {isProjectCrossPlatform, selectedPlatform} = useCrossPlatformProject();
 
   const handleProjectChange = useCallback(() => {
@@ -67,9 +65,8 @@ function ScreensLandingPage() {
       {replace: true}
     );
   }, [location, navigate]);
-  const {selection} = usePageFilters();
 
-  const vitalItems: VitalItem[] = [
+  const vitalItems = [
     {
       title: t('Avg. Cold App Start'),
       description: t('Average Cold App Start duration'),
@@ -86,7 +83,7 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation',
         iOS: 'https://docs.sentry.io/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#app-start-tracing',
       },
-      field: 'avg(measurements.app_start_cold)',
+      field: 'avg(measurements.app_start_cold)' as const,
       dataset: DiscoverDatasets.METRICS,
       getStatus: getColdAppStartPerformance,
     },
@@ -106,7 +103,7 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#app-start-instrumentation',
         iOS: 'https://docs.sentry.io/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#app-start-tracing',
       },
-      field: 'avg(measurements.app_start_warm)',
+      field: 'avg(measurements.app_start_warm)' as const,
       dataset: DiscoverDatasets.METRICS,
       getStatus: getWarmAppStartPerformance,
     },
@@ -123,7 +120,7 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames',
         iOS: 'https://docs.sentry.io/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames',
       },
-      field: `division(mobile.slow_frames,mobile.total_frames)`,
+      field: `division(mobile.slow_frames,mobile.total_frames)` as const,
       dataset: DiscoverDatasets.SPANS_METRICS,
       getStatus: getDefaultMetricPerformance,
     },
@@ -140,7 +137,7 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames',
         iOS: 'https://docs.sentry.io/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames',
       },
-      field: `division(mobile.frozen_frames,mobile.total_frames)`,
+      field: `division(mobile.frozen_frames,mobile.total_frames)` as const,
       dataset: DiscoverDatasets.SPANS_METRICS,
       getStatus: getDefaultMetricPerformance,
     },
@@ -159,7 +156,7 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames',
         iOS: 'https://docs.sentry.io/platforms/apple/guides/ios/tracing/instrumentation/automatic-instrumentation/#slow-and-frozen-frames',
       },
-      field: `avg(mobile.frames_delay)`,
+      field: `avg(mobile.frames_delay)` as const,
       dataset: DiscoverDatasets.SPANS_METRICS,
       getStatus: getDefaultMetricPerformance,
     },
@@ -177,7 +174,7 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#time-to-initial-display',
         iOS: 'https://docs.sentry.io/platforms/apple/features/experimental-features/',
       },
-      field: `avg(measurements.time_to_initial_display)`,
+      field: `avg(measurements.time_to_initial_display)` as const,
       dataset: DiscoverDatasets.METRICS,
       getStatus: getDefaultMetricPerformance,
     },
@@ -195,98 +192,51 @@ function ScreensLandingPage() {
           'https://docs.sentry.io/platforms/android/tracing/instrumentation/automatic-instrumentation/#time-to-full-display',
         iOS: 'https://docs.sentry.io/platforms/apple/features/experimental-features/',
       },
-      field: `avg(measurements.time_to_full_display)`,
+      field: `avg(measurements.time_to_full_display)` as const,
       dataset: DiscoverDatasets.METRICS,
       getStatus: getDefaultMetricPerformance,
     },
-  ];
+  ] satisfies VitalItem[];
+
+  const metricsFields = vitalItems
+    .filter(item => item.dataset === DiscoverDatasets.METRICS)
+    .map(item => item.field);
+
+  const spanMetricsFields = vitalItems
+    .filter(item => item.dataset === DiscoverDatasets.SPANS_METRICS)
+    .map(item => item.field);
 
-  const metricsFields: string[] = [];
-  const spanMetricsFields: string[] = [];
   const [state, setState] = useState<{
     status: VitalStatus | undefined;
     vital: VitalItem | undefined;
   }>({status: undefined, vital: undefined});
 
-  vitalItems.forEach(element => {
-    if (element.dataset === DiscoverDatasets.METRICS) {
-      metricsFields.push(element.field);
-    } else if (element.dataset === DiscoverDatasets.SPANS_METRICS) {
-      spanMetricsFields.push(element.field);
-    }
-  });
-
   const query = new MutableSearch(['transaction.op:ui.load']);
   if (isProjectCrossPlatform) {
     query.addFilterValue('os.name', selectedPlatform);
   }
-  const metricsQuery: NewQuery = {
-    name: '',
-    fields: metricsFields,
-    query: query.formatString(),
-    dataset: DiscoverDatasets.METRICS,
-    version: 2,
-    projects: selection.projects,
-  };
-  const metricsQueryView: EventView = EventView.fromNewQueryWithLocation(
-    metricsQuery,
-    location
-  );
-
-  const metricsResult = useDiscoverQuery({
-    eventView: metricsQueryView,
-    location,
-    cursor: '',
-    orgSlug: organization.slug,
-    limit: 25,
-    referrer: Referrer.SCREENS_METRICS,
-  });
 
-  const spanMetricsQuery: NewQuery = {
-    name: '',
-    fields: spanMetricsFields,
-    query: query.formatString(),
-    dataset: DiscoverDatasets.SPANS_METRICS,
-    version: 2,
-    projects: selection.projects,
-  };
-
-  const spanMetricsQueryView = EventView.fromNewQueryWithLocation(
-    spanMetricsQuery,
-    location
+  const metricsResult = useMetrics(
+    {
+      search: query,
+      limit: 25,
+      fields: metricsFields,
+    },
+    Referrer.SCREENS_METRICS
   );
 
-  const spanMetricsResult = useDiscoverQuery({
-    eventView: spanMetricsQueryView,
-    location,
-    cursor: '',
-    orgSlug: organization.slug,
-    limit: 25,
-    referrer: Referrer.SCREENS_METRICS,
-  });
-
-  const metricValueFor = (item: VitalItem): MetricValue | undefined => {
-    const dataset =
-      item.dataset === DiscoverDatasets.METRICS ? metricsResult : spanMetricsResult;
-
-    if (dataset.data) {
-      const row = dataset.data.data[0]!;
-      const units = dataset.data.meta?.units;
-      const fieldTypes = dataset.data.meta?.fields;
-
-      const value = row?.[item.field];
-      const unit = units?.[item.field];
-      const fieldType = fieldTypes?.[item.field];
-
-      return {
-        type: fieldType,
-        unit,
-        value,
-      };
-    }
+  const spanMetricsResult = useSpanMetrics(
+    {
+      search: query,
+      limit: 25,
+      fields: spanMetricsFields,
+    },
+    Referrer.SCREENS_METRICS
+  );
 
-    return undefined;
-  };
+  const metricsData = {...metricsResult.data[0], ...spanMetricsResult.data[0]};
+  const metaUnits = {...metricsResult.meta?.units, ...spanMetricsResult.meta?.units};
+  const metaFields = {...metricsResult.meta?.fields, ...spanMetricsResult.meta?.fields};
 
   const {openVitalsDrawer} = useMobileVitalsDrawer({
     Component: <VitalDetailPanel vital={state.vital} status={state.status} />,
@@ -334,7 +284,12 @@ function ScreensLandingPage() {
                   <Container>
                     <Flex data-test-id="mobile-vitals-top-metrics">
                       {vitalItems.map(item => {
-                        const metricValue = metricValueFor(item);
+                        const metricValue: MetricValue = {
+                          type: metaFields?.[item.field],
+                          value: metricsData?.[item.field],
+                          unit: metaUnits?.[item.field],
+                        };
+
                         const status =
                           (metricValue && item.getStatus(metricValue, item.field)) ??
                           STATUS_UNKNOWN;

static/app/views/insights/types.tsx

@@ -66,6 +66,10 @@ export enum SpanMetricsField {
   USER_GEO_SUBREGION = 'user.geo.subregion',
   PRECISE_START_TS = 'precise.start_ts',
   PRECISE_FINISH_TS = 'precise.finish_ts',
+  MOBILE_FRAMES_DELAY = 'mobile.frames_delay',
+  MOBILE_FROZEN_FRAMES = 'mobile.frozen_frames',
+  MOBILE_TOTAL_FRAMES = 'mobile.total_frames',
+  MOBILE_SLOW_FRAMES = 'mobile.slow_frames',
 }
 
 export type SpanNumberFields =
@@ -80,6 +84,10 @@ export type SpanNumberFields =
   | SpanMetricsField.CACHE_ITEM_SIZE
   | SpanMetricsField.PRECISE_START_TS
   | SpanMetricsField.PRECISE_FINISH_TS
+  | SpanMetricsField.MOBILE_FRAMES_DELAY
+  | SpanMetricsField.MOBILE_FROZEN_FRAMES
+  | SpanMetricsField.MOBILE_TOTAL_FRAMES
+  | SpanMetricsField.MOBILE_SLOW_FRAMES
   | DiscoverNumberFields;
 
 export type SpanStringFields =
@@ -175,20 +183,21 @@ export type SpanMetricsResponse = {
   [Property in SpanStringFields as `${Property}`]: string;
 } & {
   [Property in SpanStringArrayFields as `${Property}`]: string[];
-} & {
-  // TODO: This should include all valid HTTP codes or just all integers
-  'http_response_count(2)': number;
-  'http_response_count(3)': number;
-  'http_response_count(4)': number;
-  'http_response_count(5)': number;
-  'http_response_rate(2)': number;
-  'http_response_rate(3)': number;
-  'http_response_rate(4)': number;
-  'http_response_rate(5)': number;
-} & {
-  ['project']: string;
-  ['project.id']: number;
-} & Record<RegressionFunctions, number> &
+  // TODO: We should allow a nicer way to define functions with multiple arguments and different arg types
+} & Record<`division(${SpanNumberFields},${SpanNumberFields})`, number> & {
+    // TODO: This should include all valid HTTP codes or just all integers
+    'http_response_count(2)': number;
+    'http_response_count(3)': number;
+    'http_response_count(4)': number;
+    'http_response_count(5)': number;
+    'http_response_rate(2)': number;
+    'http_response_rate(3)': number;
+    'http_response_rate(4)': number;
+    'http_response_rate(5)': number;
+  } & {
+    ['project']: string;
+    ['project.id']: number;
+  } & Record<RegressionFunctions, number> &
   Record<SpanAnyFunction, string> & {
     [Property in ConditionalAggregate as
       | `${Property}(${string})`
@@ -197,7 +206,6 @@ export type SpanMetricsResponse = {
   } & {
     [SpanMetricsField.USER_GEO_SUBREGION]: SubregionCode;
   };
-
 export type MetricsFilters = {
   [Property in SpanStringFields as `${Property}`]?: string | string[];
 };
@@ -458,6 +466,10 @@ export enum MetricsFields {
   REPLAY_ID = 'replayId',
   TIMESTAMP = 'timestamp',
   PROFILE_ID = 'profile.id',
+  APP_START_COLD = 'measurements.app_start_cold',
+  APP_START_WARM = 'measurements.app_start_warm',
+  TIME_TO_INITIAL_DISPLAY = 'measurements.time_to_initial_display',
+  TIME_TO_FULL_DISPLAY = 'measurements.time_to_full_display',
 }
 
 export type MetricsNumberFields =
@@ -479,7 +491,11 @@ export type MetricsNumberFields =
   | MetricsFields.FCP
   | MetricsFields.INP
   | MetricsFields.CLS
-  | MetricsFields.TTFB;
+  | MetricsFields.TTFB
+  | MetricsFields.APP_START_COLD
+  | MetricsFields.APP_START_WARM
+  | MetricsFields.TIME_TO_INITIAL_DISPLAY
+  | MetricsFields.TIME_TO_FULL_DISPLAY;
 
 export type MetricsStringFields =
   | MetricsFields.TRANSACTION