feat(browser): Add timing and status atttributes to resource spans

Author: Lms24

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

@@ -637,7 +637,7 @@ export function _addResourceSpans(
   startTime: number,
   duration: number,
   timeOrigin: number,
-  ignoreResourceSpans?: Array<string>,
+  ignoredResourceSpanOps?: Array<string>,
 ): void {
   // we already instrument based on fetch and xhr, so we don't need to
   // duplicate spans here.
@@ -646,31 +646,15 @@ export function _addResourceSpans(
   }
 
   const op = entry.initiatorType ? `resource.${entry.initiatorType}` : 'resource.other';
-  if (ignoreResourceSpans?.includes(op)) {
+  if (ignoredResourceSpanOps?.includes(op)) {
     return;
   }
 
-  const parsedUrl = parseUrl(resourceUrl);
-
   const attributes: SpanAttributes = {
     [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.resource.browser.metrics',
   };
-  setResourceEntrySizeData(attributes, entry, 'transferSize', 'http.response_transfer_size');
-  setResourceEntrySizeData(attributes, entry, 'encodedBodySize', 'http.response_content_length');
-  setResourceEntrySizeData(attributes, entry, 'decodedBodySize', 'http.decoded_response_content_length');
-
-  // `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;
-  }
 
-  // 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;
-  }
+  const parsedUrl = parseUrl(resourceUrl);
 
   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.
@@ -690,6 +674,49 @@ export function _addResourceSpans(
     attributes['network.protocol.version'] = version;
   }
 
+  setResourceRequestAttributes(entry, attributes, [
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/responseStatus
+    ['responseStatus', 'http.request.response_status'],
+
+    // Timing attributes (request/response lifecycle)
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming#timestamps
+    ['redirectStart', 'http.request.redirect_start'],
+    ['redirectEnd', 'http.request.redirect_end'],
+
+    ['workerStart', 'http.request.worker_start'],
+
+    ['fetchStart', 'http.request.fetch_start'],
+
+    ['domainLookupStart', 'http.request.domain_lookup_start'],
+    ['domainLookupEnd', 'http.request.domain_lookup_end'],
+
+    ['connectStart', 'http.request.connect_start'],
+    ['secureConnectionStart', 'http.request.secure_connection_start'],
+    ['connectEnd', 'http.request.connect_end'],
+
+    ['requestStart', 'http.request.request_start'],
+    ['firstInterimResponseStart', 'http.response.first_interim_response_start'],
+    ['finalResponseHeadersStart', 'http.response.final_response_headers_start'],
+
+    // responseStart can also be interpreted as TTFB for resource requests: https://web.dev/articles/ttfb
+    ['responseStart', 'http.response.response_start'],
+    ['responseEnd', 'http.response.response_end'],
+
+    // Size attributes:
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/transferSize
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/encodedBodySize
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/decodedBodySize
+    ['transferSize', 'http.response_transfer_size'],
+    ['encodedBodySize', 'http.response_content_length'],
+    ['decodedBodySize', 'http.decoded_response_content_length'],
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus
+    ['renderBlockingStatus', 'resource.render_blocking_status'],
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
+    ['deliveryType', 'http.response_delivery_type'],
+  ]);
+
   const startTimestamp = timeOrigin + startTime;
   const endTimestamp = startTimestamp + duration;
 
@@ -776,16 +803,34 @@ function _setWebVitalAttributes(span: Span, options: AddPerformanceEntriesOption
   }
 }
 
-function setResourceEntrySizeData(
+type ExperimentalResourceTimingProperty =
+  | 'firstInterimResponseStart'
+  | 'finalResponseHeadersStart'
+  | 'renderBlockingStatus'
+  | 'deliveryType';
+
+/**
+ * Use this to set any attributes we can take directly form the PerformanceResourceTiming entry.
+ *
+ * This is just a mapping function for entry->attribute to keep bundle-size minimal.
+ * Experimental properties are also accepted (see {@link ExperimentalResourceTimingProperty}).
+ * Assumes that all entry properties might be undefined for browser-specific differences.
+ * Only accepts string and number values for now and also sets 0-values.
+ */
+function setResourceRequestAttributes(
+  entry: Partial<PerformanceResourceTiming> & Partial<Record<ExperimentalResourceTimingProperty, number>>,
   attributes: SpanAttributes,
-  entry: PerformanceResourceTiming,
-  key: keyof Pick<PerformanceResourceTiming, 'transferSize' | 'encodedBodySize' | 'decodedBodySize'>,
-  dataKey: 'http.response_transfer_size' | 'http.response_content_length' | 'http.decoded_response_content_length',
+  properties: [keyof PerformanceResourceTiming | ExperimentalResourceTimingProperty, string][],
 ): void {
-  const entryVal = entry[key];
-  if (entryVal != null && entryVal < MAX_INT_AS_BYTES) {
-    attributes[dataKey] = entryVal;
-  }
+  properties.forEach(([entryKey, attributeKey]) => {
+    const entryVal = entry[entryKey];
+    if (
+      entryVal != null &&
+      ((typeof entryVal === 'number' && entryVal < MAX_INT_AS_BYTES) || typeof entryVal === 'string')
+    ) {
+      attributes[attributeKey] = entryVal;
+    }
+  });
 }
 
 /**