chore: Update deprecated web vitals library methods (#293)

Author: limhjgrace

package.json

@@ -60,6 +60,7 @@
         "prepare": "husky install"
     },
     "devDependencies": {
+        "@aws-sdk/client-rum": "^3.76.0",
         "@babel/plugin-transform-runtime": "^7.16.0",
         "@babel/preset-env": "~7.6.3",
         "@playwright/test": "^1.21.1",
@@ -114,7 +115,6 @@
     },
     "dependencies": {
         "@aws-crypto/sha256-js": "^2.0.2",
-        "@aws-sdk/client-rum": "^3.76.0",
         "@aws-sdk/fetch-http-handler": "^3.36.0",
         "@aws-sdk/protocol-http": "^3.36.0",
         "@aws-sdk/signature-v4": "^3.36.0",

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -2,7 +2,7 @@ import { InternalPlugin } from '../InternalPlugin';
 import { LargestContentfulPaintEvent } from '../../events/largest-contentful-paint-event';
 import { FirstInputDelayEvent } from '../../events/first-input-delay-event';
 import { CumulativeLayoutShiftEvent } from '../../events/cumulative-layout-shift-event';
-import { getCLS, getFID, getLCP, Metric } from 'web-vitals';
+import { Metric, onCLS, onFID, onLCP } from 'web-vitals';
 import {
     LCP_EVENT_TYPE,
     FID_EVENT_TYPE,
@@ -37,8 +37,8 @@ export class WebVitalsPlugin extends InternalPlugin {
     }
 
     protected onload(): void {
-        getLCP((data) => this.getWebVitalData(data, LCP_EVENT_TYPE));
-        getFID((data) => this.getWebVitalData(data, FID_EVENT_TYPE));
-        getCLS((data) => this.getWebVitalData(data, CLS_EVENT_TYPE));
+        onLCP((data) => this.getWebVitalData(data, LCP_EVENT_TYPE));
+        onFID((data) => this.getWebVitalData(data, FID_EVENT_TYPE));
+        onCLS((data) => this.getWebVitalData(data, CLS_EVENT_TYPE));
     }
 }

src/plugins/event-plugins/__tests__/WebVitalsPlugin.test.ts

@@ -29,17 +29,17 @@ const mockCLSData = {
 
 jest.mock('web-vitals', () => {
     return {
-        getLCP: jest
+        onLCP: jest
             .fn()
             .mockImplementation((callback) =>
                 callback(mockLCPData, LCP_EVENT_TYPE)
             ),
-        getFID: jest
+        onFID: jest
             .fn()
             .mockImplementation((callback) =>
                 callback(mockFIDData, FID_EVENT_TYPE)
             ),
-        getCLS: jest
+        onCLS: jest
             .fn()
             .mockImplementation((callback) =>
                 callback(mockCLSData, CLS_EVENT_TYPE)