From 74b49bce3d7f4b78b20e5068b4f1590e42ec37bb Mon Sep 17 00:00:00 2001
From: OudomMunint <oudommunint@gmail.com>
Date: Sat, 17 Aug 2024 16:50:49 +1000
Subject: [PATCH] #85 - Web vitals enhancements and error handling.

---
 src/index.js           | 31 ++++++++++++++++++-------------
 src/reportWebVitals.js | 24 +++++++++++++++---------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/index.js b/src/index.js
index 55e3cf5..820580d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 
+// Main component
 ReactDOM.render(
   <React.StrictMode>
     <App />
@@ -13,17 +14,21 @@ ReactDOM.render(
 
 const isDevelopment = process.env.NODE_ENV === "development";
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);
-
-if (isDevelopment) {
-  reportWebVitals(console.log);
-}
+// Web Vitals
+// TODO: Send metrics to an analytics endpoint
+// if (isDevelopment) {
+//   reportWebVitals(console.log);
+// } else {
+//   reportWebVitals(metric => {
+//     fetch('/api/analytics', {
+//       method: 'POST',
+//       body: JSON.stringify(metric),
+//       headers: { 'Content-Type': 'application/json' }
+//     }).catch(err => console.error('Error reporting Web Vitals:', err));
+//   });
+// }
 
-else {
-  console.log("Web vitals report generation is disabled in production");
-}
\ No newline at end of file
+// Web Vitals
+  reportWebVitals(metric => {
+    console.log('Web Vitals metric:', metric);
+  });
\ No newline at end of file
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
index 8235120..042a59e 100644
--- a/src/reportWebVitals.js
+++ b/src/reportWebVitals.js
@@ -1,14 +1,20 @@
-//Web vitals! Do not remove!
+// Web vitals
 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 }) => {
+        try {
+          getCLS(onPerfEntry);
+          getFID(onPerfEntry);
+          getFCP(onPerfEntry);
+          getLCP(onPerfEntry);
+          getTTFB(onPerfEntry);
+        } catch (error) {
+          console.error('Error collecting Web Vitals:', error);
+        }
+      })
+      .catch(error => console.error('Error loading Web Vitals library:', error));
   }
 };
 
-export default reportWebVitals;
+export default reportWebVitals;
\ No newline at end of file