feat(tracing): Track PerformanceResourceTiming.renderBlockingStatus (#7127)

* ref(perf): Add renderBlockingStatus

As per https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming/renderBlockingStatus the resource timing has information about whether an asset is blocking render or not, which is useful for determining which assets need to be addressed for fixing critical path.

Author: k-fish

packages/replay/test/fixtures/transaction.ts

@@ -77,6 +77,7 @@ export function Transaction(obj?: Partial<Event>): any {
           'Transfer Size': 1097,
           'Encoded Body Size': 797,
           'Decoded Body Size': 1885,
+          'resource.render_blocking_status': 'non-blocking',
         },
         description: '/favicon.ico',
         op: 'resource.other',

packages/tracing/src/browser/metrics/index.ts

@@ -333,6 +333,7 @@ export interface ResourceEntry extends Record<string, unknown> {
   transferSize?: number;
   encodedBodySize?: number;
   decodedBodySize?: number;
+  renderBlockingStatus?: string;
 }
 
 /** Create resource-related spans */
@@ -361,6 +362,9 @@ export function _addResourceSpans(
   if ('decodedBodySize' in entry) {
     data['Decoded Body Size'] = entry.decodedBodySize;
   }
+  if ('renderBlockingStatus' in entry) {
+    data['resource.render_blocking_status'] = entry.renderBlockingStatus;
+  }
 
   const startTimestamp = timeOrigin + startTime;
   const endTimestamp = startTimestamp + duration;

packages/tracing/test/browser/metrics/index.test.ts

@@ -48,6 +48,7 @@ describe('_addResourceSpans', () => {
       transferSize: 256,
       encodedBodySize: 256,
       decodedBodySize: 256,
+      renderBlockingStatus: 'non-blocking',
     };
     _addResourceSpans(transaction, entry, '/assets/to/me', 123, 456, 100);
 
@@ -61,6 +62,7 @@ describe('_addResourceSpans', () => {
       transferSize: 256,
       encodedBodySize: 256,
       decodedBodySize: 256,
+      renderBlockingStatus: 'non-blocking',
     };
     _addResourceSpans(transaction, entry, '/assets/to/me', 123, 456, 100);
 
@@ -74,6 +76,7 @@ describe('_addResourceSpans', () => {
       transferSize: 256,
       encodedBodySize: 456,
       decodedBodySize: 593,
+      renderBlockingStatus: 'non-blocking',
     };
 
     const timeOrigin = 100;
@@ -90,6 +93,7 @@ describe('_addResourceSpans', () => {
         ['Decoded Body Size']: entry.decodedBodySize,
         ['Encoded Body Size']: entry.encodedBodySize,
         ['Transfer Size']: entry.transferSize,
+        ['resource.render_blocking_status']: entry.renderBlockingStatus,
       },
       description: '/assets/to/css',
       endTimestamp: timeOrigin + startTime + duration,
@@ -143,6 +147,7 @@ describe('_addResourceSpans', () => {
       transferSize: 0,
       encodedBodySize: 0,
       decodedBodySize: 0,
+      renderBlockingStatus: 'non-blocking',
     };
 
     _addResourceSpans(transaction, entry, '/assets/to/css', 100, 23, 345);
@@ -156,6 +161,7 @@ describe('_addResourceSpans', () => {
           ['Decoded Body Size']: entry.decodedBodySize,
           ['Encoded Body Size']: entry.encodedBodySize,
           ['Transfer Size']: entry.transferSize,
+          ['resource.render_blocking_status']: entry.renderBlockingStatus,
         },
       }),
     );