feat: Upgrade to web-vitals v4 (#1193)

Co-authored-by: Chunwai Li <[email protected]>

package.json

@@ -196,7 +196,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",

src/common/vitals/interaction-to-next-paint.js

@@ -10,9 +10,15 @@ 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,
+      inputDelay: attribution.inputDelay,
+      nextPaintTime: attribution.nextPaintTime,
+      processingDuration: attribution.processingDuration,
+      presentationDelay: attribution.presentationDelay,
       loadState: attribution.loadState
     }
     interactionToNextPaint.update({ value, attrs })

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, deprecated in v3->v4
         elementRenderDelay: attribution.elementRenderDelay
       }
       if (attribution.url) attrs.elUrl = cleanURL(attribution.url)

tests/unit/common/vitals/interaction-to-next-paint.test.js

@@ -5,9 +5,13 @@ beforeEach(() => {
 })
 
 const inpAttribution = {
-  eventTarget: 'html',
-  eventType: 'keydown',
-  eventTime: 100,
+  interactionType: 'keyboard',
+  interactionTarget: 'html',
+  interactionTime: 100,
+  inputDelay: 0,
+  nextPaintTime: 200,
+  processingDuration: 0,
+  presentationDelay: 0,
   loadState: 'complete'
 }
 const getFreshINPImport = async (codeToRun) => {
@@ -19,10 +23,22 @@ 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({ ...inpAttribution, metricId: 'ruhroh' })
+      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()
     }))
   })

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()