From 9b7d76517988eed861211280ac6ba13322c9a9f9 Mon Sep 17 00:00:00 2001 From: k-fish Date: Thu, 9 Feb 2023 12:38:17 -0500 Subject: [PATCH 1/2] 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. --- packages/replay/test/fixtures/transaction.ts | 1 + packages/tracing/src/browser/metrics/index.ts | 4 ++++ packages/tracing/test/browser/metrics/index.test.ts | 6 ++++++ 3 files changed, 11 insertions(+) diff --git a/packages/replay/test/fixtures/transaction.ts b/packages/replay/test/fixtures/transaction.ts index 24f89cdc9fb8..b29bf4926432 100644 --- a/packages/replay/test/fixtures/transaction.ts +++ b/packages/replay/test/fixtures/transaction.ts @@ -77,6 +77,7 @@ export function Transaction(obj?: Partial): any { 'Transfer Size': 1097, 'Encoded Body Size': 797, 'Decoded Body Size': 1885, + 'Render Blocking Status': 'non-blocking', }, description: '/favicon.ico', op: 'resource.other', diff --git a/packages/tracing/src/browser/metrics/index.ts b/packages/tracing/src/browser/metrics/index.ts index 67cdc1714ed9..60120d958fb9 100644 --- a/packages/tracing/src/browser/metrics/index.ts +++ b/packages/tracing/src/browser/metrics/index.ts @@ -333,6 +333,7 @@ export interface ResourceEntry extends Record { 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['Render Blocking Status'] = entry.renderBlockingStatus; + } const startTimestamp = timeOrigin + startTime; const endTimestamp = startTimestamp + duration; diff --git a/packages/tracing/test/browser/metrics/index.test.ts b/packages/tracing/test/browser/metrics/index.test.ts index 4820a70a5c9b..0260ec13f106 100644 --- a/packages/tracing/test/browser/metrics/index.test.ts +++ b/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, + ['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, + ['Render Blocking Status']: entry.renderBlockingStatus, }, }), ); From 015642d3ee1106a35fdb89e5bcdcbe616a4a353f Mon Sep 17 00:00:00 2001 From: k-fish Date: Fri, 10 Feb 2023 09:36:06 -0500 Subject: [PATCH 2/2] Switch data name to 'render_blocking_status' --- packages/replay/test/fixtures/transaction.ts | 2 +- packages/tracing/src/browser/metrics/index.ts | 2 +- packages/tracing/test/browser/metrics/index.test.ts | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/replay/test/fixtures/transaction.ts b/packages/replay/test/fixtures/transaction.ts index b29bf4926432..e1d686eadd01 100644 --- a/packages/replay/test/fixtures/transaction.ts +++ b/packages/replay/test/fixtures/transaction.ts @@ -77,7 +77,7 @@ export function Transaction(obj?: Partial): any { 'Transfer Size': 1097, 'Encoded Body Size': 797, 'Decoded Body Size': 1885, - 'Render Blocking Status': 'non-blocking', + 'resource.render_blocking_status': 'non-blocking', }, description: '/favicon.ico', op: 'resource.other', diff --git a/packages/tracing/src/browser/metrics/index.ts b/packages/tracing/src/browser/metrics/index.ts index 60120d958fb9..b59f344899d2 100644 --- a/packages/tracing/src/browser/metrics/index.ts +++ b/packages/tracing/src/browser/metrics/index.ts @@ -363,7 +363,7 @@ export function _addResourceSpans( data['Decoded Body Size'] = entry.decodedBodySize; } if ('renderBlockingStatus' in entry) { - data['Render Blocking Status'] = entry.renderBlockingStatus; + data['resource.render_blocking_status'] = entry.renderBlockingStatus; } const startTimestamp = timeOrigin + startTime; diff --git a/packages/tracing/test/browser/metrics/index.test.ts b/packages/tracing/test/browser/metrics/index.test.ts index 0260ec13f106..0622043a598c 100644 --- a/packages/tracing/test/browser/metrics/index.test.ts +++ b/packages/tracing/test/browser/metrics/index.test.ts @@ -93,7 +93,7 @@ describe('_addResourceSpans', () => { ['Decoded Body Size']: entry.decodedBodySize, ['Encoded Body Size']: entry.encodedBodySize, ['Transfer Size']: entry.transferSize, - ['Render Blocking Status']: entry.renderBlockingStatus, + ['resource.render_blocking_status']: entry.renderBlockingStatus, }, description: '/assets/to/css', endTimestamp: timeOrigin + startTime + duration, @@ -161,7 +161,7 @@ describe('_addResourceSpans', () => { ['Decoded Body Size']: entry.decodedBodySize, ['Encoded Body Size']: entry.encodedBodySize, ['Transfer Size']: entry.transferSize, - ['Render Blocking Status']: entry.renderBlockingStatus, + ['resource.render_blocking_status']: entry.renderBlockingStatus, }, }), );