Add ErrorBoundary component to catch render-time errors

- Create ErrorBoundary component to handle React render errors
- Wrap App component with ErrorBoundary for global error handling
- Add comprehensive tests for ErrorBoundary functionality
- Show fallback UI with error message when errors occur

frontend/src/components/__tests__/ErrorBoundary.test.tsx

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { ErrorBoundary } from "../ErrorBoundary";
+
+function ExplodingChild(): React.ReactElement {
+  throw new Error("boom");
+}
+
+describe("ErrorBoundary", () => {
+  it("renders the fallback UI when a child throws", () => {
+    render(
+      <ErrorBoundary>
+        <ExplodingChild />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByRole("alert")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByText(/boom/i)).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /reload/i })).toBeInTheDocument();
+  });
+
+  it("renders children normally when no error occurs", () => {
+    render(
+      <ErrorBoundary>
+        <div data-testid="safe-child">safe</div>
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByTestId("safe-child")).toBeInTheDocument();
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+});