From 17295fd2d653da8572e5493bd4ca212ad1615e5c Mon Sep 17 00:00:00 2001 From: Zaid Abdulameer Date: Tue, 16 Jun 2026 19:08:46 -0400 Subject: [PATCH 1/7] feat: add ErrorBoundary component --- frontend/src/components/ErrorBoundary.tsx | 55 +++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 frontend/src/components/ErrorBoundary.tsx diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..05523f7 --- /dev/null +++ b/frontend/src/components/ErrorBoundary.tsx @@ -0,0 +1,55 @@ +import { Component, type ErrorInfo, type ReactNode } from "react"; + +interface Props { + children: ReactNode; +} + +interface State { + hasError: boolean; +} + +class ErrorBoundary extends Component { + constructor(props: Props) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(): State { + return { hasError: true }; + } + + componentDidCatch(error: Error, errorInfo: ErrorInfo): void { + console.error("ErrorBoundary caught an error:", error, errorInfo); + } + + handleRetry = (): void => { + window.location.reload(); + }; + + render(): ReactNode { + if (this.state.hasError) { + return ( +
+
+

+ Something went wrong +

+

+ An unexpected error occurred. Please try again. +

+ +
+
+ ); + } + + return this.props.children; + } +} + +export default ErrorBoundary; From 3e40439505af40f2e80af16961e63c0217fc9e61 Mon Sep 17 00:00:00 2001 From: Zaid Abdulameer Date: Tue, 16 Jun 2026 19:08:49 -0400 Subject: [PATCH 2/7] feat: wrap App with ErrorBoundary in main.tsx --- frontend/src/main.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 0ec0703..e15c1ef 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -2,6 +2,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import App from "./App"; +import ErrorBoundary from "./components/ErrorBoundary"; import "./index.css"; import "leaflet/dist/leaflet.css"; @@ -17,7 +18,9 @@ const queryClient = new QueryClient({ ReactDOM.createRoot(document.getElementById("root")!).render( - + + + ); From bf9960a0c8179d12439d4f7b38e493d638871e2d Mon Sep 17 00:00:00 2001 From: Zaid Abdulameer Date: Tue, 16 Jun 2026 19:09:40 -0400 Subject: [PATCH 3/7] style: format ErrorBoundary with Prettier --- frontend/src/components/ErrorBoundary.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx index 05523f7..b7f6aff 100644 --- a/frontend/src/components/ErrorBoundary.tsx +++ b/frontend/src/components/ErrorBoundary.tsx @@ -31,12 +31,8 @@ class ErrorBoundary extends Component { return (
-

- Something went wrong -

-

- An unexpected error occurred. Please try again. -

+

Something went wrong

+

An unexpected error occurred. Please try again.