Upgrade web vitals to v4 (#318)

* fix: 🗑️ update deprecated web vitals Replace "ReportHandler" with (metric: MetricType) => void. Replace "getXXX" functions with "onXXX". * chore: ⬆️ upgrade web vitals to v4
vektorprogrammet · Oct 15, 2024 · 4eeb2b5 · 4eeb2b5
1 parent c42d50f
commit 4eeb2b5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -67,7 +67,7 @@
     "typescript": "^5.4.5",
     "vaul": "^1.0.0",
     "vite": "^5.2.10",
-    "web-vitals": "^3.0.0"
+    "web-vitals": "^4.2.3"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts
@@ -1,13 +1,13 @@
-import type { ReportHandler } from "web-vitals";
+import type { MetricType } from "web-vitals";
 
-const reportWebVitals = (onPerfEntry?: ReportHandler): void => {
+const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void): void => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
+    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry);
+      onINP(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };