From 35bc643448c07ad4cb644c9b8ae9ee3f90461c12 Mon Sep 17 00:00:00 2001 From: Pik Tang Date: Tue, 17 Sep 2024 11:08:49 -0700 Subject: [PATCH 1/7] feat: Update existing INP event* attrs Old `event*` attrs are preserved to ease v3 to v4 transition for customers/any internal refs. The only exception is `eventType`, which is replaced due to being a reserved keyword in NRDB. --- src/common/vitals/interaction-to-next-paint.js | 8 +++++--- .../common/vitals/interaction-to-next-paint.test.js | 13 +++++++++---- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/common/vitals/interaction-to-next-paint.js b/src/common/vitals/interaction-to-next-paint.js index 851fa803c..a9ac205d9 100644 --- a/src/common/vitals/interaction-to-next-paint.js +++ b/src/common/vitals/interaction-to-next-paint.js @@ -10,9 +10,11 @@ if (isBrowserScope) { onINP(({ value, attribution, id }) => { const attrs = { metricId: id, - eventTarget: attribution.eventTarget, - eventType: attribution.eventType, - eventTime: attribution.eventTime, + eventTarget: attribution.interactionTarget, // event* attrs deprecated in v4, kept for NR backwards compatibility + eventTime: attribution.interactionTime, // event* attrs deprecated in v4, kept for NR backwards compatibility + interactionTarget: attribution.interactionTarget, + interactionTime: attribution.interactionTime, + interactionType: attribution.interactionType, loadState: attribution.loadState } interactionToNextPaint.update({ value, attrs }) diff --git a/tests/unit/common/vitals/interaction-to-next-paint.test.js b/tests/unit/common/vitals/interaction-to-next-paint.test.js index 13b489421..520ebca78 100644 --- a/tests/unit/common/vitals/interaction-to-next-paint.test.js +++ b/tests/unit/common/vitals/interaction-to-next-paint.test.js @@ -5,9 +5,9 @@ beforeEach(() => { }) const inpAttribution = { - eventTarget: 'html', - eventType: 'keydown', - eventTime: 100, + interactionType: 'keydown', + interactionTarget: 'html', + interactionTime: 100, loadState: 'complete' } const getFreshINPImport = async (codeToRun) => { @@ -22,7 +22,12 @@ describe('inp', () => { test('reports fcp from web-vitals', (done) => { getFreshINPImport(metric => metric.subscribe(({ value, attrs }) => { expect(value).toEqual(8) - expect(attrs).toEqual({ ...inpAttribution, metricId: 'ruhroh' }) + expect(attrs).toEqual({ + ...inpAttribution, + eventTarget: inpAttribution.interactionTarget, + eventTime: inpAttribution.interactionTime, + metricId: 'ruhroh' + }) done() })) }) From b50b67b3ad9b26709b80b2c1f941b3fba715f7e6 Mon Sep 17 00:00:00 2001 From: Pik Tang Date: Tue, 17 Sep 2024 16:16:49 -0700 Subject: [PATCH 2/7] feat: Add web-vitals v4 INP attrs Note: interactionTargetElement, processedEventEntries, and longAnimationFrameEntries are excluded. --- src/common/vitals/interaction-to-next-paint.js | 4 ++++ tests/unit/common/vitals/interaction-to-next-paint.test.js | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/common/vitals/interaction-to-next-paint.js b/src/common/vitals/interaction-to-next-paint.js index a9ac205d9..3c27b6502 100644 --- a/src/common/vitals/interaction-to-next-paint.js +++ b/src/common/vitals/interaction-to-next-paint.js @@ -15,6 +15,10 @@ if (isBrowserScope) { interactionTarget: attribution.interactionTarget, interactionTime: attribution.interactionTime, interactionType: attribution.interactionType, + inputDelay: attribution.inputDelay, + nextPaintTime: attribution.nextPaintTime, + processingDuration: attribution.processingDuration, + presentationDelay: attribution.presentationDelay, loadState: attribution.loadState } interactionToNextPaint.update({ value, attrs }) diff --git a/tests/unit/common/vitals/interaction-to-next-paint.test.js b/tests/unit/common/vitals/interaction-to-next-paint.test.js index 520ebca78..a51e654b5 100644 --- a/tests/unit/common/vitals/interaction-to-next-paint.test.js +++ b/tests/unit/common/vitals/interaction-to-next-paint.test.js @@ -8,6 +8,10 @@ const inpAttribution = { interactionType: 'keydown', interactionTarget: 'html', interactionTime: 100, + inputDelay: 0, + nextPaintTime: 200, + processingDuration: 0, + presentationDelay: 0, loadState: 'complete' } const getFreshINPImport = async (codeToRun) => { @@ -19,7 +23,7 @@ const getFreshINPImport = async (codeToRun) => { } describe('inp', () => { - test('reports fcp from web-vitals', (done) => { + test('reports inp from web-vitals', (done) => { getFreshINPImport(metric => metric.subscribe(({ value, attrs }) => { expect(value).toEqual(8) expect(attrs).toEqual({ From b961c99f900364868cac0806f90bca8d42777a5c Mon Sep 17 00:00:00 2001 From: Pik Tang Date: Wed, 18 Sep 2024 10:52:46 -0700 Subject: [PATCH 3/7] chore: Improve INP unit test --- .../common/vitals/interaction-to-next-paint.test.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/tests/unit/common/vitals/interaction-to-next-paint.test.js b/tests/unit/common/vitals/interaction-to-next-paint.test.js index a51e654b5..9bc938fba 100644 --- a/tests/unit/common/vitals/interaction-to-next-paint.test.js +++ b/tests/unit/common/vitals/interaction-to-next-paint.test.js @@ -26,10 +26,17 @@ describe('inp', () => { test('reports inp from web-vitals', (done) => { getFreshINPImport(metric => metric.subscribe(({ value, attrs }) => { expect(value).toEqual(8) - expect(attrs).toEqual({ - ...inpAttribution, + expect(attrs).toStrictEqual({ eventTarget: inpAttribution.interactionTarget, eventTime: inpAttribution.interactionTime, + interactionTarget: inpAttribution.interactionTarget, + interactionTime: inpAttribution.interactionTime, + interactionType: inpAttribution.interactionType, + inputDelay: inpAttribution.inputDelay, + nextPaintTime: inpAttribution.nextPaintTime, + processingDuration: inpAttribution.processingDuration, + presentationDelay: inpAttribution.presentationDelay, + loadState: inpAttribution.loadState, metricId: 'ruhroh' }) done() From 6c83b6db674e0de5e6829f78e10d999335bd9725 Mon Sep 17 00:00:00 2001 From: Pik Tang Date: Wed, 18 Sep 2024 11:18:36 -0700 Subject: [PATCH 4/7] chore: Bump web-vitals to v4 --- package-lock.json | 9 ++++----- package.json | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index c612a6c36..f89e9a278 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "fflate": "0.7.4", "rrweb": "2.0.0-alpha.12", - "web-vitals": "3.5.2" + "web-vitals": "4.2.3" }, "devDependencies": { "@babel/cli": "^7.23.4", @@ -24225,10 +24225,9 @@ } }, "node_modules/web-vitals": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz", - "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==", - "license": "Apache-2.0" + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.3.tgz", + "integrity": "sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==" }, "node_modules/webdriver": { "version": "8.40.3", diff --git a/package.json b/package.json index 011704712..c0cd245b1 100644 --- a/package.json +++ b/package.json @@ -193,7 +193,7 @@ "dependencies": { "fflate": "0.7.4", "rrweb": "2.0.0-alpha.12", - "web-vitals": "3.5.2" + "web-vitals": "4.2.3" }, "devDependencies": { "@babel/cli": "^7.23.4", From 317e0b1fa4a1a69cc2cdde83ffbbb28e2bb30bec Mon Sep 17 00:00:00 2001 From: Pik Tang Date: Wed, 18 Sep 2024 11:22:22 -0700 Subject: [PATCH 5/7] feat: Update LCP for web-vitals v4 --- src/common/vitals/largest-contentful-paint.js | 3 ++- tests/unit/common/vitals/largest-contentful-paint.test.js | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/common/vitals/largest-contentful-paint.js b/src/common/vitals/largest-contentful-paint.js index c7c259523..b32ea9a0b 100644 --- a/src/common/vitals/largest-contentful-paint.js +++ b/src/common/vitals/largest-contentful-paint.js @@ -20,7 +20,8 @@ if (isBrowserScope) { element: attribution.element, timeToFirstByte: attribution.timeToFirstByte, resourceLoadDelay: attribution.resourceLoadDelay, - resourceLoadTime: attribution.resourceLoadTime, + resourceLoadDuration: attribution.resourceLoadDuration, + resourceLoadTime: attribution.resourceLoadDuration, // kept for NR backwards compatibility elementRenderDelay: attribution.elementRenderDelay } if (attribution.url) attrs.elUrl = cleanURL(attribution.url) diff --git a/tests/unit/common/vitals/largest-contentful-paint.test.js b/tests/unit/common/vitals/largest-contentful-paint.test.js index c3009ce1d..b8eba9935 100644 --- a/tests/unit/common/vitals/largest-contentful-paint.test.js +++ b/tests/unit/common/vitals/largest-contentful-paint.test.js @@ -13,7 +13,7 @@ const lcpAttribution = { element: '#someid', timeToFirstByte: 1, resourceLoadDelay: 2, - resourceLoadTime: 3, + resourceLoadDuration: 3, elementRenderDelay: 4, url: 'http://domain.com/page?k1=v1#hash' } @@ -38,7 +38,8 @@ describe('lcp', () => { element: lcpAttribution.element, timeToFirstByte: lcpAttribution.timeToFirstByte, resourceLoadDelay: lcpAttribution.resourceLoadDelay, - resourceLoadTime: lcpAttribution.resourceLoadTime, + resourceLoadDuration: lcpAttribution.resourceLoadDuration, + resourceLoadTime: lcpAttribution.resourceLoadDuration, elementRenderDelay: lcpAttribution.elementRenderDelay }) done() From 9fe4825f7dec37280abd8f782db9ae306a0ce01d Mon Sep 17 00:00:00 2001 From: ptang-nr Date: Fri, 20 Sep 2024 13:54:10 -0700 Subject: [PATCH 6/7] fix: Add code review suggestion Co-authored-by: Chunwai Li --- src/common/vitals/largest-contentful-paint.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/common/vitals/largest-contentful-paint.js b/src/common/vitals/largest-contentful-paint.js index b32ea9a0b..0ecd5f769 100644 --- a/src/common/vitals/largest-contentful-paint.js +++ b/src/common/vitals/largest-contentful-paint.js @@ -21,7 +21,7 @@ if (isBrowserScope) { timeToFirstByte: attribution.timeToFirstByte, resourceLoadDelay: attribution.resourceLoadDelay, resourceLoadDuration: attribution.resourceLoadDuration, - resourceLoadTime: attribution.resourceLoadDuration, // kept for NR backwards compatibility + resourceLoadTime: attribution.resourceLoadDuration, // kept for NR backwards compatibility, deprecated in v3->v4 elementRenderDelay: attribution.elementRenderDelay } if (attribution.url) attrs.elUrl = cleanURL(attribution.url) From d4b396c15ad942e640b83a166373ff4c86854569 Mon Sep 17 00:00:00 2001 From: Pik Tang Date: Fri, 20 Sep 2024 17:00:52 -0700 Subject: [PATCH 7/7] fix: Update INP unit test value for `interactionType` --- tests/unit/common/vitals/interaction-to-next-paint.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/unit/common/vitals/interaction-to-next-paint.test.js b/tests/unit/common/vitals/interaction-to-next-paint.test.js index 9bc938fba..8e9b3cbe1 100644 --- a/tests/unit/common/vitals/interaction-to-next-paint.test.js +++ b/tests/unit/common/vitals/interaction-to-next-paint.test.js @@ -5,7 +5,7 @@ beforeEach(() => { }) const inpAttribution = { - interactionType: 'keydown', + interactionType: 'keyboard', interactionTarget: 'html', interactionTime: 100, inputDelay: 0,