Refactor code to add ErrorBoundary component for better error handling

Author: berhili098

components/ErrorBoundary.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render shows the fallback UI
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex h-screen items-center justify-center">
+          <h1 className="text-red-600">Something went wrong.</h1>
+        </div>
+      );
+    }
+
+    return this.props.children; 
+  }
+}
+
+export default ErrorBoundary; 

components/ProfileList.json

@@ -455,6 +455,5 @@
   "Groot-2001.json",
   "kshashikumar.json",
   "Stoppedwumm.json",
-  "vishal065.json",
-  "berhili098.json"
+  "vishal065.json"
 ]

pages/_app.js

@@ -1,12 +1,15 @@
 import "@/styles/globals.css";
 import { Inter } from "next/font/google";
+import ErrorBoundary from "@/components/ErrorBoundary";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export default function App({ Component, pageProps }) {
   return (
     <main className={inter.className}>
-      <Component {...pageProps} />
+      <ErrorBoundary>
+        <Component {...pageProps} />
+      </ErrorBoundary>
     </main>
   );
 }

pages/index.js

@@ -22,35 +22,38 @@ function App() {
   const router = useRouter();
   const currentUrl = router.pathname;
 
-  useEffect(() => {
-    const fetchData = async (file) => {
-      try {
-        const response = await fetch(file);
-        const data = await response.json();
-        return data;
-      } catch (error) {
-        console.error("Error fetching data:", error);
-        return [];
-      }
-    };
-
-    const combineData = async () => {
-      setLoadingProfiles(true);
-      try {
-        const promises = filenames.map((file) => fetchData(`/data/${file}`));
-        const combinedData = await Promise.all(promises).then((results) =>
-          results.flat()
-        );
-        setCombinedData(combinedData);
-        setShuffledProfiles(shuffleProfiles(combinedData));
-      } catch (error) {
-        console.error("Error combining data:", error);
-        setCombinedData([]);
-        setShuffledProfiles([]);
+  const fetchData = async (file) => {
+    try {
+      const response = await fetch(file);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
       }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      return [];
+    }
+  };
+
+  const combineData = async () => {
+    setLoadingProfiles(true);
+    try {
+      const promises = filenames.map((file) => fetchData(`/data/${file}`));
+      const results = await Promise.all(promises);
+      const combinedData = results.flat();
+      setCombinedData(combinedData);
+      setShuffledProfiles(shuffleProfiles(combinedData));
+    } catch (error) {
+      console.error("Error combining data:", error);
+      setCombinedData([]);
+      setShuffledProfiles([]);
+      alert("Failed to load profiles. Please try again later.");
+    } finally {
       setLoadingProfiles(false);
-    };
+    }
+  };
 
+  useEffect(() => {
     combineData();
   }, []);