diff --git a/packages/cra-template-typescript/template/src/reportWebVitals.ts b/packages/cra-template-typescript/template/src/reportWebVitals.ts
index 49a2a16e0fb..ef9636e33a6 100644
--- a/packages/cra-template-typescript/template/src/reportWebVitals.ts
+++ b/packages/cra-template-typescript/template/src/reportWebVitals.ts
@@ -2,13 +2,17 @@ import { ReportHandler } from 'web-vitals';
 
 const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   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(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+        getCLS(onPerfEntry);
+        getFID(onPerfEntry);
+        getFCP(onPerfEntry);
+        getLCP(onPerfEntry);
+        getTTFB(onPerfEntry);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   }
 };
 
diff --git a/packages/cra-template/template/src/reportWebVitals.js b/packages/cra-template/template/src/reportWebVitals.js
index 5253d3ad9e6..c9559b5f77b 100644
--- a/packages/cra-template/template/src/reportWebVitals.js
+++ b/packages/cra-template/template/src/reportWebVitals.js
@@ -1,12 +1,14 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   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(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+        getCLS(onPerfEntry);
+        getFID(onPerfEntry);
+        getFCP(onPerfEntry);
+        getLCP(onPerfEntry);
+        getTTFB(onPerfEntry);
+      })
+      .catch(() => {});
   }
 };