Merge pull request Junirezz#998 from ToryMic/fix/912-frontend-add-frontend-error-boundary-with-user-safe-fallback-ui

[912] Frontend: Add frontend error boundary with user-safe fallback UI

Author: Junirezz

frontend/SENTRY_GUIDE.md

@@ -42,15 +42,19 @@ main.tsx
 
 ### Error Boundary (`src/App.tsx`)
 
-The root `<Sentry.ErrorBoundary>` wraps the entire application:
+The app uses a layered boundary so users never see a blank screen or raw stack traces:
 
 ```tsx
-<Sentry.ErrorBoundary fallback={<ErrorFallback />} showDialog>
-  <App />
+<Sentry.ErrorBoundary fallback={…} showDialog={false}>
+  <ErrorBoundary>
+    <App />
+  </ErrorBoundary>
 </Sentry.ErrorBoundary>
 ```
 
-This automatically captures and reports any unhandled React render errors.
+- `ErrorBoundary` (`src/components/ErrorBoundary.tsx`) catches render errors even when Sentry is not configured.
+- `ErrorFallback` shows a fixed, user-safe message with **Try Again** / Reload / Go Home. Technical `error.message` values are not shown in production.
+- Sentry’s native crash dialog is disabled (`showDialog={false}`) to keep the fallback UI consistent.
 
 ### Router Integration (`src/App.tsx`)
 

frontend/src/App.tsx

@@ -23,6 +23,7 @@ import {
   loadVaultFormDraft,
   type VaultFormDraft,
 } from "./lib/formDraftStorage";
+import ErrorBoundary from "./components/ErrorBoundary";
 import ErrorFallback from "./components/ErrorFallback";
 import RouteLoadingFallback from "./components/RouteLoadingFallback";
 import {
@@ -227,15 +228,17 @@ function App() {
           resetError={props.resetError}
         />
       )}
-      showDialog
+      showDialog={false}
     >
-      <AuthProvider>
-        <FeatureFlagProvider>
-          <VaultProvider>
-            <AppContent />
-          </VaultProvider>
-        </FeatureFlagProvider>
-      </AuthProvider>
+      <ErrorBoundary>
+        <AuthProvider>
+          <FeatureFlagProvider>
+            <VaultProvider>
+              <AppContent />
+            </VaultProvider>
+          </FeatureFlagProvider>
+        </AuthProvider>
+      </ErrorBoundary>
     </Sentry.ErrorBoundary>
   );
 }

frontend/src/components/ErrorBoundary.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ErrorBoundary } from "./ErrorBoundary";
+
+function Boom({ shouldThrow }: { shouldThrow: boolean }) {
+  if (shouldThrow) {
+    throw new Error("TypeError: boom");
+  }
+  return <div>ok</div>;
+}
+
+describe("ErrorBoundary", () => {
+  it("renders children when there is no error", () => {
+    render(
+      <ErrorBoundary>
+        <div>healthy</div>
+      </ErrorBoundary>,
+    );
+    expect(screen.getByText("healthy")).toBeDefined();
+  });
+
+  it("shows user-safe fallback when a child throws", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+    render(
+      <ErrorBoundary>
+        <Boom shouldThrow />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByRole("alert")).toBeDefined();
+    expect(screen.getByText("Something went wrong")).toBeDefined();
+    expect(screen.queryByText(/TypeError: boom/)).toBeNull();
+
+    spy.mockRestore();
+  });
+
+  it("recovers when Try Again is clicked after the child stops throwing", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    let shouldThrow = true;
+
+    const { rerender } = render(
+      <ErrorBoundary>
+        <Boom shouldThrow={shouldThrow} />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByRole("alert")).toBeDefined();
+
+    shouldThrow = false;
+    rerender(
+      <ErrorBoundary>
+        <Boom shouldThrow={shouldThrow} />
+      </ErrorBoundary>,
+    );
+    // Boundary still holds error state until reset
+    expect(screen.getByRole("alert")).toBeDefined();
+    fireEvent.click(screen.getByText("Try Again"));
+
+    expect(screen.getByText("ok")).toBeDefined();
+    spy.mockRestore();
+  });
+
+  it("invokes onError when a child throws", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    const onError = vi.fn();
+
+    render(
+      <ErrorBoundary onError={onError}>
+        <Boom shouldThrow />
+      </ErrorBoundary>,
+    );
+
+    expect(onError).toHaveBeenCalled();
+    expect(onError.mock.calls[0][0]).toBeInstanceOf(Error);
+    spy.mockRestore();
+  });
+});

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,49 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import ErrorFallback from "./ErrorFallback";
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: (props: { error: Error; resetError: () => void }) => ReactNode;
+  onError?: (error: Error, info: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+/**
+ * React error boundary with a user-safe fallback UI.
+ * Works without Sentry so render failures never blank the app.
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: unknown): ErrorBoundaryState {
+    return {
+      error: error instanceof Error ? error : new Error(String(error)),
+    };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    this.props.onError?.(error, info);
+  }
+
+  resetError = (): void => {
+    this.setState({ error: null });
+  };
+
+  render(): ReactNode {
+    const { error } = this.state;
+    if (!error) {
+      return this.props.children;
+    }
+
+    if (this.props.fallback) {
+      return this.props.fallback({ error, resetError: this.resetError });
+    }
+
+    return <ErrorFallback error={error} resetError={this.resetError} />;
+  }
+}
+
+export default ErrorBoundary;

frontend/src/components/ErrorFallback.test.tsx

@@ -7,33 +7,58 @@ describe('ErrorFallback', () => {
   const mockError = new Error('Test error message');
   const mockResetError = vi.fn();
 
-  it('renders error message', () => {
-    render(<ErrorFallback error={mockError} resetError={mockResetError} />);
-    
+  it('renders a user-safe message without exposing technical errors by default', () => {
+    render(
+      <ErrorFallback
+        error={new Error('TypeError: Cannot read properties of null')}
+        resetError={mockResetError}
+        showErrorDetail={false}
+      />,
+    );
+
+    expect(screen.getByRole('alert')).toBeDefined();
     expect(screen.getByText('Something went wrong')).toBeDefined();
-    expect(screen.getByText('Test error message')).toBeDefined();
+    expect(screen.queryByTestId('error-fallback-detail')).toBeNull();
+    expect(screen.queryByText(/TypeError/)).toBeNull();
+  });
+
+  it('calls resetError when Try Again is clicked', () => {
+    render(<ErrorFallback error={mockError} resetError={mockResetError} showErrorDetail={false} />);
+
+    fireEvent.click(screen.getByText('Try Again'));
+    expect(mockResetError).toHaveBeenCalled();
   });
 
   it('calls reload when reload button is clicked', () => {
     const reloadSpy = vi.spyOn(ErrorNavigation, 'reloadPage').mockImplementation(() => undefined);
 
-    render(<ErrorFallback error={mockError} resetError={mockResetError} onReload={reloadSpy} />);
-    
-    const reloadButton = screen.getByText('Reload Page');
-    fireEvent.click(reloadButton);
-    
+    render(
+      <ErrorFallback
+        error={mockError}
+        resetError={mockResetError}
+        onReload={reloadSpy}
+        showErrorDetail={false}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Reload Page'));
     expect(reloadSpy).toHaveBeenCalled();
     reloadSpy.mockRestore();
   });
 
   it('navigates to home when Go Home button is clicked', () => {
     const assignSpy = vi.spyOn(ErrorNavigation, 'goHome').mockImplementation(() => undefined);
 
-    render(<ErrorFallback error={mockError} resetError={mockResetError} onGoHome={assignSpy} />);
-    
-    const homeButton = screen.getByText('Go Home');
-    fireEvent.click(homeButton);
-    
+    render(
+      <ErrorFallback
+        error={mockError}
+        resetError={mockResetError}
+        onGoHome={assignSpy}
+        showErrorDetail={false}
+      />,
+    );
+
+    fireEvent.click(screen.getByText('Go Home'));
     expect(assignSpy).toHaveBeenCalled();
     assignSpy.mockRestore();
   });

frontend/src/components/ErrorFallback.tsx

@@ -8,16 +8,37 @@ interface ErrorFallbackProps {
   resetError: () => void;
   onReload?: () => void;
   onGoHome?: () => void;
+  /** When true, show a sanitized one-line detail (dev only by default). */
+  showErrorDetail?: boolean;
+}
+
+function isSafeUserFacingDetail(message: string): boolean {
+  const trimmed = message.trim();
+  if (!trimmed || trimmed.length > 160) return false;
+  // Block stack-like / path / secret-looking content
+  if (/[/\\]|\.tsx?\b|\.jsx?\b|at\s+\S+|Error:|TypeError|ReferenceError|http/i.test(trimmed)) {
+    return false;
+  }
+  return true;
 }
 
 const ErrorFallback: React.FC<ErrorFallbackProps> = ({
   error,
+  resetError,
   onReload = reloadPage,
   onGoHome = goHome,
+  showErrorDetail = import.meta.env.DEV,
 }) => {
   const { t } = useTranslation();
+  const detail =
+    showErrorDetail && error?.message && isSafeUserFacingDetail(error.message)
+      ? error.message
+      : null;
+
   return (
     <div
+      role="alert"
+      aria-live="assertive"
       style={{
         display: "flex",
         alignItems: "center",
@@ -51,7 +72,7 @@ const ErrorFallback: React.FC<ErrorFallbackProps> = ({
             marginBottom: "8px",
           }}
         >
-          <AlertOctagon size={48} />
+          <AlertOctagon size={48} aria-hidden="true" />
         </div>
 
         <div>
@@ -71,8 +92,9 @@ const ErrorFallback: React.FC<ErrorFallbackProps> = ({
           >
             {t("errorFallback.message")}
           </p>
-          {error?.message && (
+          {detail && (
             <div
+              data-testid="error-fallback-detail"
               style={{
                 background: "rgba(0,0,0,0.2)",
                 border: "1px solid var(--border-glass)",
@@ -87,7 +109,7 @@ const ErrorFallback: React.FC<ErrorFallbackProps> = ({
                 fontFamily: "monospace",
               }}
             >
-              {error.message}
+              {detail}
             </div>
           )}
         </div>
@@ -102,20 +124,32 @@ const ErrorFallback: React.FC<ErrorFallbackProps> = ({
           }}
         >
           <button
+            type="button"
             className="btn btn-primary"
+            onClick={resetError}
+            style={{ width: "100%", padding: "14px" }}
+          >
+            <RefreshCw size={18} aria-hidden="true" />
+            {t("errorFallback.tryAgain")}
+          </button>
+
+          <button
+            type="button"
+            className="btn btn-outline"
             onClick={onReload}
             style={{ width: "100%", padding: "14px" }}
           >
-            <RefreshCw size={18} />
+            <RefreshCw size={18} aria-hidden="true" />
             {t("errorFallback.reload")}
           </button>
 
           <button
+            type="button"
             className="btn btn-outline"
             onClick={onGoHome}
             style={{ width: "100%", padding: "14px" }}
           >
-            <Home size={18} />
+            <Home size={18} aria-hidden="true" />
             {t("errorFallback.goHome")}
           </button>
         </div>

frontend/src/i18n/locales/en.ts

@@ -182,6 +182,7 @@ export const en = {
   errorFallback: {
     title: "Something went wrong",
     message: "We've encountered an unexpected issue. Our team has been notified and is working on it.",
+    tryAgain: "Try Again",
     reload: "Reload Page",
     goHome: "Go Home",
   },

frontend/src/i18n/locales/es.ts

@@ -182,6 +182,7 @@ export const es = {
   errorFallback: {
     title: "Algo salió mal",
     message: "Encontramos un problema inesperado. Nuestro equipo ha sido notificado y está trabajando en ello.",
+    tryAgain: "Intentar de nuevo",
     reload: "Recargar página",
     goHome: "Ir al inicio",
   },