feat: implement global React Error Boundary with fallback UI

eduaid_web/src/App.js

@@ -1,23 +1,26 @@
 import "./App.css";
 import { Routes, Route, HashRouter } from "react-router-dom";
 import Home from "./pages/Home";
-import Question_Type from "./pages/Question_Type";
-import Text_Input from "./pages/Text_Input";
+import QuestionType from "./pages/Question_Type";
+import TextInput from "./pages/Text_Input";
 import Output from "./pages/Output";
 import Previous from "./pages/Previous";
 import NotFound from "./pages/PageNotFound";
+import ErrorBoundary from "./utils/ErrorBoundary";
 
 function App() {
   return (
     <HashRouter>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/question-type" element={<Question_Type />} />
-        <Route path="/input" element={<Text_Input />} />
-        <Route path="/output" element={<Output />} />
-        <Route path="/history" element={<Previous />} />
-        <Route path="*" element={<NotFound />} />
-      </Routes>
+      <ErrorBoundary>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/question-type" element={<QuestionType />} />
+          <Route path="/input" element={<TextInput />} />
+          <Route path="/output" element={<Output />} />
+          <Route path="/history" element={<Previous />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </ErrorBoundary>
     </HashRouter>
   );
 }

eduaid_web/src/utils/ErrorBoundary.js

@@ -0,0 +1,58 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error("ErrorBoundary caught an error:", error, errorInfo);
+    }
+
+    handleRetry = () => {
+        window.location.reload();
+    };
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    backgroundColor: '#02000F',
+                    color: 'white',
+                    fontFamily: 'sans-serif'
+                }}>
+                    <h1>Something went wrong.</h1>
+                    <button
+                        onClick={this.handleRetry}
+                        style={{
+                            padding: '10px 20px',
+                            fontSize: '16px',
+                            backgroundColor: '#7600F2',
+                            color: 'white',
+                            border: 'none',
+                            borderRadius: '5px',
+                            cursor: 'pointer',
+                            marginTop: '20px'
+                        }}
+                    >
+                        Retry
+                    </button>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}
+
+export default ErrorBoundary;