adds error handling to performance metrics collection

packages/utilities/web-vitals/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 | Version | Description |
 |---------|-------------|
+| 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 |
 | 1.0.8 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies |
 | 1.0.7 | [PR#4467](https://github.com/bbc/psammead/pull/4467) bumps 3rd-party dependencies |

packages/utilities/web-vitals/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/web-vitals",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

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

@@ -1,5 +1,5 @@
 import fetch from 'cross-fetch';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';
 import {
   useNetworkStatus,
@@ -90,6 +90,7 @@ const useWebVitals = ({
   reportParams,
 }) => {
   let pageLoadTime;
+  const [status, setStatus] = useState({ error: false });
   const shouldSendVitals = enabled && shouldSample(sampleRate);
 
   const { effectiveConnectionType } = useNetworkStatus();
@@ -113,21 +114,25 @@ const useWebVitals = ({
   useEvent('pagehide', shouldSendVitals ? sendVitals : noOp);
 
   useEffect(() => {
-    pageLoadTime = Date.now();
-    setCurrentUrl();
-    updateDeviceMetrics({
-      effectiveConnectionType,
-      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);
+    try {
+      pageLoadTime = Date.now();
+      setCurrentUrl();
+      updateDeviceMetrics({
+        effectiveConnectionType,
+        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);
+    } catch ({ message }) {
+      setStatus({ error: true, message });
+    }
   }, []);
 
-  return null;
+  return status;
 };
 
 export default useWebVitals;

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

@@ -6,6 +6,8 @@ import useWebVitals from './index';
 jest.mock('cross-fetch');
 jest.mock('web-vitals');
 
+beforeEach(jest.clearAllMocks);
+
 const mockVitalsGet = (name, value) => reportHandler => {
   reportHandler({ name, value });
 };
@@ -88,6 +90,7 @@ describe('useWebVitals', () => {
   describe('when enabled is set to true', () => {
     const enabled = true;
     const reportingEndpoint = 'https://endpoint.to.report.to';
+
     it('sends a beacon via navigator.sendBeacon when enabled', async () => {
       mockSendBeacon();
       renderHook(() => useWebVitals({ enabled, reportingEndpoint }));
@@ -100,6 +103,18 @@ describe('useWebVitals', () => {
       );
     });
 
+    it('should not return an error when reporting is successful', async () => {
+      mockSendBeacon();
+      const { result } = renderHook(() =>
+        useWebVitals({ enabled, reportingEndpoint }),
+      );
+      const { error } = result.current;
+
+      await eventListeners.pagehide();
+
+      expect(error).toEqual(false);
+    });
+
     it('falls back to use fetch when sendBeacon is unavailable', async () => {
       fetch.mockImplementation(() => Promise.resolve());
       renderHook(() => useWebVitals({ enabled, reportingEndpoint }));
@@ -318,5 +333,16 @@ describe('useWebVitals', () => {
         expect(navigator.sendBeacon).not.toHaveBeenCalled();
       });
     });
+
+    it('should handle errors during the performance metrics collection phase', () => {
+      webVitals.getCLS.mockImplementation(() => {
+        throw new Error('Some error');
+      });
+      const { result } = renderHook(() =>
+        useWebVitals({ enabled, reportingEndpoint }),
+      );
+
+      expect(result.current).toEqual({ error: true, message: 'Some error' });
+    });
   });
 });