ref(browser): Refactor type casts of browser metrics

Author: mydea

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -311,8 +311,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 
   const { op, start_timestamp: transactionStartTime } = spanToJSON(span);
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  performanceEntries.slice(_performanceCursor).forEach((entry: Record<string, any>) => {
+  performanceEntries.slice(_performanceCursor).forEach(entry => {
     const startTime = msToSec(entry.startTime);
     const duration = msToSec(
       // Inexplicably, Chrome sometimes emits a negative duration. We need to work around this.
@@ -328,7 +327,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 
     switch (entry.entryType) {
       case 'navigation': {
-        _addNavigationSpans(span, entry, timeOrigin);
+        _addNavigationSpans(span, entry as PerformanceNavigationTiming, timeOrigin);
         break;
       }
       case 'mark':
@@ -350,7 +349,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
         break;
       }
       case 'resource': {
-        _addResourceSpans(span, entry, entry.name as string, startTime, duration, timeOrigin);
+        _addResourceSpans(span, entry as PerformanceResourceTiming, entry.name, startTime, duration, timeOrigin);
         break;
       }
       default:
@@ -414,8 +413,7 @@ export function addPerformanceEntries(span: Span, options: AddPerformanceEntries
 /** Create measure related spans */
 export function _addMeasureSpans(
   span: Span,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  entry: Record<string, any>,
+  entry: PerformanceEntry,
   startTime: number,
   duration: number,
   timeOrigin: number,
@@ -454,30 +452,37 @@ export function _addMeasureSpans(
 }
 
 /** Instrument navigation entries */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function _addNavigationSpans(span: Span, entry: Record<string, any>, timeOrigin: number): void {
-  ['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'].forEach(event => {
+function _addNavigationSpans(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
+  (['unloadEvent', 'redirect', 'domContentLoadedEvent', 'loadEvent', 'connect'] as const).forEach(event => {
     _addPerformanceNavigationTiming(span, entry, event, timeOrigin);
   });
-  _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL', 'connectEnd');
-  _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache', 'domainLookupStart');
+  _addPerformanceNavigationTiming(span, entry, 'secureConnection', timeOrigin, 'TLS/SSL');
+  _addPerformanceNavigationTiming(span, entry, 'fetch', timeOrigin, 'cache');
   _addPerformanceNavigationTiming(span, entry, 'domainLookup', timeOrigin, 'DNS');
+
   _addRequest(span, entry, timeOrigin);
 }
 
 /** Create performance navigation related spans */
 function _addPerformanceNavigationTiming(
   span: Span,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  entry: Record<string, any>,
-  event: string,
+  entry: PerformanceNavigationTiming,
+  event:
+    | 'secureConnection'
+    | 'fetch'
+    | 'domainLookup'
+    | 'unloadEvent'
+    | 'redirect'
+    | 'connect'
+    | 'domContentLoadedEvent'
+    | 'loadEvent',
   timeOrigin: number,
   name?: string,
-  eventEnd?: string,
 ): void {
-  const end = eventEnd ? (entry[eventEnd] as number | undefined) : (entry[`${event}End`] as number | undefined);
-  const start = entry[`${event}Start`] as number | undefined;
-  if (!start || !end) {
+  const eventEnd = getEndPropertyNameForNavigationTiming(event);
+  const end = entry[eventEnd];
+  const start = entry[`${event}Start`];
+  if (typeof start !== 'number' || typeof end !== 'number') {
     return;
   }
   startAndEndSpan(span, timeOrigin + msToSec(start), timeOrigin + msToSec(end), {
@@ -489,9 +494,28 @@ function _addPerformanceNavigationTiming(
   });
 }
 
+function getEndPropertyNameForNavigationTiming(
+  event:
+    | 'secureConnection'
+    | 'fetch'
+    | 'domainLookup'
+    | 'unloadEvent'
+    | 'redirect'
+    | 'connect'
+    | 'domContentLoadedEvent'
+    | 'loadEvent',
+): keyof PerformanceNavigationTiming {
+  if (event === 'secureConnection') {
+    return 'connectEnd';
+  }
+  if (event === 'fetch') {
+    return 'domainLookupStart';
+  }
+  return `${event}End`;
+}
+
 /** Create request and response related spans */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number): void {
+function _addRequest(span: Span, entry: PerformanceNavigationTiming, timeOrigin: number): void {
   const requestStartTimestamp = timeOrigin + msToSec(entry.requestStart as number);
   const responseEndTimestamp = timeOrigin + msToSec(entry.responseEnd as number);
   const responseStartTimestamp = timeOrigin + msToSec(entry.responseStart as number);
@@ -518,19 +542,10 @@ function _addRequest(span: Span, entry: Record<string, any>, timeOrigin: number)
   }
 }
 
-export interface ResourceEntry extends Record<string, unknown> {
-  initiatorType?: string;
-  transferSize?: number;
-  encodedBodySize?: number;
-  decodedBodySize?: number;
-  renderBlockingStatus?: string;
-  deliveryType?: string;
-}
-
 /** Create resource-related spans */
-export function _addResourceSpans(
+function _addResourceSpans(
   span: Span,
-  entry: ResourceEntry,
+  entry: PerformanceResourceTiming,
   resourceUrl: string,
   startTime: number,
   duration: number,
@@ -551,13 +566,19 @@ export function _addResourceSpans(
   setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
   setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');
 
-  if (entry.deliveryType != null) {
-    attributes['http.response_delivery_type'] = entry.deliveryType;
+  // `deliveryType` is experimental and does not exist everywhere
+  const deliveryType = (entry as { deliveryType?: 'cache' | 'navigational-prefetch' | '' }).deliveryType;
+  if (deliveryType != null) {
+    attributes['http.response_delivery_type'] = deliveryType;
   }
 
-  if ('renderBlockingStatus' in entry) {
-    attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
+  // Types do not reflect this property yet
+  const renderBlockingStatus = (entry as { renderBlockingStatus?: 'render-blocking' | 'non-render-blocking' })
+    .renderBlockingStatus;
+  if (renderBlockingStatus) {
+    attributes['resource.render_blocking_status'] = renderBlockingStatus;
   }
+
   if (parsedUrl.protocol) {
     attributes['url.scheme'] = parsedUrl.protocol.split(':').pop(); // the protocol returned by parseUrl includes a :, but OTEL spec does not, so we remove it.
   }
@@ -655,8 +676,8 @@ function _setWebVitalAttributes(span: Span): void {
 
 function setResourceEntrySizeData(
   attributes: SpanAttributes,
-  entry: ResourceEntry,
-  key: keyof Pick<ResourceEntry, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
+  entry: PerformanceResourceTiming,
+  key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
   dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
 ): void {
   const entryVal = entry[key];