feat: upgrade web-vitals to 4.x

Author: williazz

package-lock.json

@@ -125,7 +125,7 @@
         "shimmer": "^1.2.1",
         "ua-parser-js": "^1.0.33",
         "uuid": "^9.0.0",
-        "web-vitals": "^3.0.2"
+        "web-vitals": "^4.0.0"
     },
     "lint-staged": {
         "*.ts": "npm run lint:errors",

package.json

@@ -83,7 +83,7 @@ export class WebVitalsPlugin extends InternalPlugin {
             url: a.url,
             timeToFirstByte: a.timeToFirstByte,
             resourceLoadDelay: a.resourceLoadDelay,
-            resourceLoadTime: a.resourceLoadTime,
+            resourceLoadTime: a.resourceLoadDuration,
             elementRenderDelay: a.elementRenderDelay
         };
         if (a.lcpResourceEntry) {

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -18,6 +18,11 @@ import { context, record } from '../../../test-utils/test-utils';
 import { Topic } from '../../../event-bus/EventBus';
 import { WebVitalsPlugin } from '../WebVitalsPlugin';
 import { navigationEvent } from '../../../test-utils/mock-data';
+import {
+    CLSMetricWithAttribution,
+    FIDMetricWithAttribution,
+    LCPMetricWithAttribution
+} from 'web-vitals';
 
 const mockLCPData = {
     delta: 239.51,
@@ -29,10 +34,10 @@ const mockLCPData = {
         url: 'example.com/source.png',
         timeToFirstByte: 1000,
         resourceLoadDelay: 250,
-        resourceLoadTime: 1000,
+        resourceLoadDuration: 1000,
         elementRenderDelay: 250
     }
-};
+} as LCPMetricWithAttribution;
 
 const mockFIDData = {
     delta: 1.2799999676644802,
@@ -45,7 +50,7 @@ const mockFIDData = {
         eventType: 'keydown',
         loadState: 'dom-interactive'
     }
-};
+} as FIDMetricWithAttribution;
 
 const mockCLSData = {
     delta: 0,
@@ -58,7 +63,7 @@ const mockCLSData = {
         largestShiftTime: 3447485.600000024,
         loadState: 'dom-interactive'
     }
-};
+} as CLSMetricWithAttribution;
 
 // only need hasLatency fields
 const imagePerformanceEntry = {
@@ -128,7 +133,8 @@ describe('WebVitalsPlugin tests', () => {
                     timeToFirstByte: mockLCPData.attribution.timeToFirstByte,
                     resourceLoadDelay:
                         mockLCPData.attribution.resourceLoadDelay,
-                    resourceLoadTime: mockLCPData.attribution.resourceLoadTime,
+                    resourceLoadTime:
+                        mockLCPData.attribution.resourceLoadDuration,
                     elementRenderDelay:
                         mockLCPData.attribution.elementRenderDelay
                 })