diff --git a/app/package-lock.json b/app/package-lock.json
index 71e57052..18df24eb 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -26,7 +26,7 @@
         "react-syntax-highlighter": "^15.5.0",
         "swagger-ui-react": "=5.17.10",
         "use-interval": "^1.4.0",
-        "web-vitals": "^3.5.2"
+        "web-vitals": "^4.0.0"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.4.5",
@@ -7715,9 +7715,9 @@
       "optional": true
     },
     "node_modules/web-vitals": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",
-      "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.0.0.tgz",
+      "integrity": "sha512-8wQd4jkwFRwY5q3yAmHZAJ5MjnKR1vRACK+g2OEC8nUqi0WOxBrXfOxGNlJ+QtxzzSn/TkQO58wkW0coE68n0Q=="
     },
     "node_modules/which": {
       "version": "2.0.2",
diff --git a/app/package.json b/app/package.json
index fe6a630c..3f2e8dbf 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,7 +22,7 @@
     "react-syntax-highlighter": "^15.5.0",
     "swagger-ui-react": "=5.17.10",
     "use-interval": "^1.4.0",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^4.0.0"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/assets/*.js'",
diff --git a/app/src/reportWebVitals.ts b/app/src/reportWebVitals.ts
index 5fa3583b..61e439e7 100644
--- a/app/src/reportWebVitals.ts
+++ b/app/src/reportWebVitals.ts
@@ -1,13 +1,13 @@
-import { ReportHandler } from "web-vitals";
+import { MetricType } from "web-vitals";
 
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+const reportWebVitals = (onPerfEntry?: (metric: MetricType) => 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, onFID, onFCP, onLCP, onTTFB }) => {
+      onCLS(onPerfEntry);
+      onFID(onPerfEntry);
+      onFCP(onPerfEntry);
+      onLCP(onPerfEntry);
+      onTTFB(onPerfEntry);
     });
   }
 };