feat(browser): Add http.response_delivery_type attribute to resource spans

Author: Lms24

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

@@ -513,6 +513,7 @@ export interface ResourceEntry extends Record<string, unknown> {
   encodedBodySize?: number;
   decodedBodySize?: number;
   renderBlockingStatus?: string;
+  deliveryType?: string;
 }
 
 /** Create resource-related spans */
@@ -539,6 +540,10 @@ 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 || 'default';
+  }
+
   if ('renderBlockingStatus' in entry) {
     attributes['resource.render_blocking_status'] = entry.renderBlockingStatus;
   }

packages/browser-utils/test/browser/browserMetrics.test.ts

@@ -340,6 +340,32 @@ describe('_addResourceSpans', () => {
   });
 });
 
+// resource delivery types: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/deliveryType
+// i.e. better but not yet widely supported way to check for browser cache hit
+it.each(['', 'cache', 'navigational-prefetch'])(
+  'attaches delivery type to resource spans if available',
+  deliveryType => {
+    const spans: Span[] = [];
+
+    getClient()?.on('spanEnd', span => {
+      spans.push(span);
+    });
+
+    const entry: ResourceEntry = {
+      initiatorType: 'css',
+      transferSize: 0,
+      encodedBodySize: 0,
+      decodedBodySize: 0,
+      deliveryType,
+    };
+
+    _addResourceSpans(span, entry, resourceEntryName, 100, 23, 345);
+
+    expect(spans).toHaveLength(1);
+    expect(spanToJSON(spans[0]!)).toEqual(expect.objectContaining({ 'http.response_delivery_type': deliveryType }));
+  },
+);
+
 const setGlobalLocation = (location: Location) => {
   // @ts-expect-error need to delete this in order to set to new value
   delete WINDOW.location;