updated web vitals package

package.json

@@ -26,7 +26,7 @@
     "react-select": "^5.7.0",
     "store": "^2.0.12",
     "typescript": "^4.8.3",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^3.4.0"
   },
   "scripts": {
     "start": "cross-env BROWSER=none react-scripts start",
@@ -63,6 +63,14 @@
   },
   "devDependencies": {
     "@beyondtracks/spritezero-cli": "^2.3.1",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.0.3",
+    "@types/node": "^18.7.18",
+    "@types/react": "^18.0.20",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-image-gallery": "^1.2.0",
     "@types/store": "^2.0.2",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
@@ -72,14 +80,6 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.2.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^29.0.3",
-    "@types/node": "^18.7.18",
-    "@types/react": "^18.0.20",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-image-gallery": "^1.2.0"
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }

src/index.tsx

@@ -3,10 +3,13 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import Main from "./Main";
 import "./i18n";
+import reportWebVitals from "./reportWebVitals";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(
     <React.StrictMode>
         <Main />
     </React.StrictMode>,
 );
+
+reportWebVitals(console.log);

src/reportWebVitals.ts

@@ -1,13 +1,13 @@
 const reportWebVitals = (onPerfEntry: any) => {
     if (onPerfEntry && onPerfEntry instanceof Function) {
         import("web-vitals").then(({
-            getCLS, getFID, getFCP, getLCP, getTTFB,
+            onCLS, onFID, onFCP, onLCP, onTTFB,
         }) => {
-            getCLS(onPerfEntry);
-            getFID(onPerfEntry);
-            getFCP(onPerfEntry);
-            getLCP(onPerfEntry);
-            getTTFB(onPerfEntry);
+            onCLS(onPerfEntry);
+            onFID(onPerfEntry);
+            onFCP(onPerfEntry);
+            onLCP(onPerfEntry);
+            onTTFB(onPerfEntry);
         });
     }
 };