From 8d22ed5581c15055bad6044eaa5219c41a1219b7 Mon Sep 17 00:00:00 2001
From: Soha Rida khan <soharida2005@gmail.com>
Date: Fri, 27 Feb 2026 16:58:38 +0530
Subject: [PATCH 1/2] feat: implement global React Error Boundary with fallback
 UI

---
 eduaid_web/src/App.js                 | 23 +++++-----
 eduaid_web/src/utils/ErrorBoundary.js | 61 +++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 10 deletions(-)
 create mode 100644 eduaid_web/src/utils/ErrorBoundary.js

diff --git a/eduaid_web/src/App.js b/eduaid_web/src/App.js
index e9eef0a0..8784f1ef 100644
--- a/eduaid_web/src/App.js
+++ b/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>
   );
 }
diff --git a/eduaid_web/src/utils/ErrorBoundary.js b/eduaid_web/src/utils/ErrorBoundary.js
new file mode 100644
index 00000000..321c707e
--- /dev/null
+++ b/eduaid_web/src/utils/ErrorBoundary.js
@@ -0,0 +1,61 @@
+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 will show 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);
+    }
+
+    handleRetry = () => {
+        window.location.reload();
+    };
+
+    render() {
+        if (this.state.hasError) {
+            // Fallback UI
+            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;

From c39e7d98f095683419a8f979d6c50746a479d71b Mon Sep 17 00:00:00 2001
From: Soha Rida khan <soharida2005@gmail.com>
Date: Fri, 27 Feb 2026 17:19:06 +0530
Subject: [PATCH 2/2] Clean up ErrorBoundary

---
 eduaid_web/src/utils/ErrorBoundary.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/eduaid_web/src/utils/ErrorBoundary.js b/eduaid_web/src/utils/ErrorBoundary.js
index 321c707e..c74b1936 100644
--- a/eduaid_web/src/utils/ErrorBoundary.js
+++ b/eduaid_web/src/utils/ErrorBoundary.js
@@ -7,12 +7,10 @@ class ErrorBoundary extends React.Component {
     }
 
     static getDerivedStateFromError(error) {
-        // Update state so the next render will show 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);
     }
 
@@ -22,7 +20,6 @@ class ErrorBoundary extends React.Component {
 
     render() {
         if (this.state.hasError) {
-            // Fallback UI
             return (
                 <div style={{
                     display: 'flex',