Merge pull request #4641 from adamhouten/upgrade-web-vitals

Web-vitals package bumped from 2.0.0 to 3.0.1

.yarn/versions/f60c3555.yml

@@ -0,0 +1,2 @@
+undecided:
+  - "@bbc/psammead"

packages/utilities/web-vitals/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 | Version | Description |
 |---------|-------------|
+| 1.2.0 | [PR#4641](https://github.com/bbc/psammead/pull/4641) Upgrades google web-vitals package from ^2.0.0 to ^3.0.1 and added INP metric |
 | 1.1.1 | [PR#4619](https://github.com/bbc/psammead/pull/4619) bump coss-fetch dependency for node-fetch patch
 | 1.1.0 | [PR#4573](https://github.com/bbc/psammead/pull/4573) adds error handling to performance metrics collection |
 | 1.0.9 | [PR#4492](https://github.com/bbc/psammead/pull/4492) upgrades google web-vitals package from ^1.1.1 to ^2.0.1 |

packages/utilities/web-vitals/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/web-vitals",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
@@ -21,7 +21,7 @@
   "dependencies": {
     "cross-fetch": "^3.1.5",
     "react-adaptive-hooks": "0.0.8",
-    "web-vitals": "^2.0.0"
+    "web-vitals": "^3.0.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0"

packages/utilities/web-vitals/src/index.js

@@ -1,6 +1,6 @@
 import fetch from 'cross-fetch';
 import { useEffect, useState } from 'react';
-import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';
+import { onCLS, onFID, onLCP, onFCP, onTTFB, onINP } from 'web-vitals';
 import {
   useNetworkStatus,
   useHardwareConcurrency,
@@ -102,7 +102,7 @@ const useWebVitals = ({
     const pageAge = pageExitTime - pageLoadTime;
 
     // Last chance to get the CLS before sending the beacon.
-    getCLS(updateWebVitals, true);
+    onCLS(updateWebVitals, { reportAllChanges: true });
 
     const beacon = [
       { ...webVitalsBase, age: pageAge, body: { ...vitals, ...deviceMetrics } },
@@ -122,11 +122,12 @@ const useWebVitals = ({
         numberOfLogicalProcessors,
         deviceMemory,
       });
-      getCLS(updateWebVitals, true); // Setting 'true' will report all CLS changes
-      getFID(updateWebVitals);
-      getLCP(updateWebVitals, true); // Setting 'true' will report all LCP changes
-      getFCP(updateWebVitals);
-      getTTFB(updateWebVitals);
+      onCLS(updateWebVitals, { reportAllChanges: true });
+      onFID(updateWebVitals);
+      onLCP(updateWebVitals, { reportAllChanges: true });
+      onFCP(updateWebVitals);
+      onTTFB(updateWebVitals);
+      onINP(updateWebVitals);
     } catch ({ message }) {
       setStatus({ error: true, message });
     }

packages/utilities/web-vitals/src/index.test.js

@@ -12,11 +12,12 @@ const mockVitalsGet = (name, value) => reportHandler => {
   reportHandler({ name, value });
 };
 
-webVitals.getCLS.mockImplementation(mockVitalsGet('CLS', 1));
-webVitals.getFID.mockImplementation(mockVitalsGet('FID', 2));
-webVitals.getLCP.mockImplementation(mockVitalsGet('LCP', 3));
-webVitals.getFCP.mockImplementation(mockVitalsGet('FCP', 4));
-webVitals.getTTFB.mockImplementation(mockVitalsGet('TTFB', 5));
+webVitals.onCLS.mockImplementation(mockVitalsGet('CLS', 1));
+webVitals.onFID.mockImplementation(mockVitalsGet('FID', 2));
+webVitals.onLCP.mockImplementation(mockVitalsGet('LCP', 3));
+webVitals.onFCP.mockImplementation(mockVitalsGet('FCP', 4));
+webVitals.onTTFB.mockImplementation(mockVitalsGet('TTFB', 5));
+webVitals.onINP.mockImplementation(mockVitalsGet('INP', 6));
 
 let eventListeners = {};
 
@@ -74,11 +75,12 @@ describe('useWebVitals', () => {
       mockSendBeacon();
       renderHook(() => useWebVitals({ enabled }));
 
-      expect(webVitals.getCLS).toHaveBeenCalled();
-      expect(webVitals.getFID).toHaveBeenCalled();
-      expect(webVitals.getLCP).toHaveBeenCalled();
-      expect(webVitals.getFCP).toHaveBeenCalled();
-      expect(webVitals.getTTFB).toHaveBeenCalled();
+      expect(webVitals.onCLS).toHaveBeenCalled();
+      expect(webVitals.onFID).toHaveBeenCalled();
+      expect(webVitals.onLCP).toHaveBeenCalled();
+      expect(webVitals.onFCP).toHaveBeenCalled();
+      expect(webVitals.onTTFB).toHaveBeenCalled();
+      expect(webVitals.onINP).toHaveBeenCalled();
 
       eventListeners.pagehide();
 
@@ -175,11 +177,12 @@ describe('useWebVitals', () => {
       mockSendBeacon();
       renderHook(() => useWebVitals({ enabled, reportingEndpoint }));
 
-      expect(webVitals.getCLS).toHaveBeenCalled();
-      expect(webVitals.getFID).toHaveBeenCalled();
-      expect(webVitals.getLCP).toHaveBeenCalled();
-      expect(webVitals.getFCP).toHaveBeenCalled();
-      expect(webVitals.getTTFB).toHaveBeenCalled();
+      expect(webVitals.onCLS).toHaveBeenCalled();
+      expect(webVitals.onFID).toHaveBeenCalled();
+      expect(webVitals.onLCP).toHaveBeenCalled();
+      expect(webVitals.onFCP).toHaveBeenCalled();
+      expect(webVitals.onTTFB).toHaveBeenCalled();
+      expect(webVitals.onINP).toHaveBeenCalled();
 
       await eventListeners.pagehide();
 
@@ -192,6 +195,7 @@ describe('useWebVitals', () => {
             lcp: 3,
             fcp: 4,
             ttfb: 5,
+            inp: 6,
           }),
         }),
       ];
@@ -335,7 +339,7 @@ describe('useWebVitals', () => {
     });
 
     it('should handle errors during the performance metrics collection phase', () => {
-      webVitals.getCLS.mockImplementation(() => {
+      webVitals.onCLS.mockImplementation(() => {
         throw new Error('Some error');
       });
       const { result } = renderHook(() =>

yarn.lock

@@ -2289,7 +2289,7 @@ __metadata:
     cross-fetch: ^3.1.5
     react: ^17.0.2
     react-adaptive-hooks: 0.0.8
-    web-vitals: ^2.0.0
+    web-vitals: ^3.0.1
   peerDependencies:
     react: ">=16.9.0"
   languageName: unknown
@@ -18512,10 +18512,10 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"web-vitals@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "web-vitals@npm:2.0.1"
-  checksum: 929316d4ce532d9d6d5031b703aa0ce757305114825c945beba76670f891928eb901eddc3a410eff6e4dffecbdf6635498e5ea63f07b9adcfd072d531a37dc8f
+"web-vitals@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "web-vitals@npm:3.0.1"
+  checksum: 7990d14812b599601146db6a179008deff16c165f355e93764968748a416101ef4120fd4d562d45b235b683b96ea8d00f06529bfd8708d04effcb57723949c3b
   languageName: node
   linkType: hard