From fd73b8bde567af21223f593bcaad67c0a221516d Mon Sep 17 00:00:00 2001
From: Kshitij <160704796+kshitij-ka@users.noreply.github.com>
Date: Sun, 3 May 2026 22:42:19 +0530
Subject: [PATCH] feat(client): add error boundary around root App component.

---
 web/client/src/components/ErrorBoundary.jsx | 34 +++++++++++++++++++++
 web/client/src/main.jsx                     |  5 ++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 web/client/src/components/ErrorBoundary.jsx

diff --git a/web/client/src/components/ErrorBoundary.jsx b/web/client/src/components/ErrorBoundary.jsx
new file mode 100644
index 0000000..bad453f
--- /dev/null
+++ b/web/client/src/components/ErrorBoundary.jsx
@@ -0,0 +1,34 @@
+import { Component } from "react";
+
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, message: "" };
+  }
+
+  static getDerivedStateFromError(err) {
+    return { hasError: true, message: err?.message || "Unknown error" };
+  }
+
+  componentDidCatch(err, info) {
+    console.error("[ErrorBoundary]", err, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: "2rem", textAlign: "center" }}>
+          <h2>Something went wrong.</h2>
+          <p style={{ color: "#666", marginTop: "0.5rem" }}>{this.state.message}</p>
+          <button
+            style={{ marginTop: "1rem", padding: "0.5rem 1.5rem", cursor: "pointer" }}
+            onClick={() => this.setState({ hasError: false, message: "" })}
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
diff --git a/web/client/src/main.jsx b/web/client/src/main.jsx
index 400c2d2..361f947 100644
--- a/web/client/src/main.jsx
+++ b/web/client/src/main.jsx
@@ -4,11 +4,14 @@ import { BrowserRouter } from "react-router-dom";
 import "./i18n.js";
 import "./index.css";
 import App from "./App.jsx";
+import ErrorBoundary from "./components/ErrorBoundary.jsx";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
     </BrowserRouter>
   </StrictMode>
 );