Merge pull request #1262 from solaawojobi00-bit/fix/issue-1242-route-error-boundaries

Add per-route error boundaries with Sentry reporting (#1242)

Author: Junirezz

frontend/src/App.tsx

@@ -31,7 +31,9 @@ import {
 } from "./lib/formDraftStorage";
 import ErrorBoundary from "./components/ErrorBoundary";
 import ErrorFallback from "./components/ErrorFallback";
+import RouteErrorBoundary from "./components/RouteErrorBoundary";
 import RouteLoadingFallback from "./components/RouteLoadingFallback";
+import { captureException } from "./config/sentry";
 import {
   LazyAnalytics,
   LazyHome,
@@ -178,40 +180,90 @@ function AppContent() {
                 <Route
                   path="/"
                   element={
-                    <LazyHome
-                      walletAddress={walletAddress}
-                      usdcBalance={usdcBalance}
-                      xlmBalance={xlmBalance}
-                    />
+                    <RouteErrorBoundary routeName="home">
+                      <LazyHome
+                        walletAddress={walletAddress}
+                        usdcBalance={usdcBalance}
+                        xlmBalance={xlmBalance}
+                      />
+                    </RouteErrorBoundary>
                   }
                 />
                 <Route
                   path="/portfolio"
                   element={
-                    <LazyPortfolio
-                      walletAddress={walletAddress}
-                    />
+                    <RouteErrorBoundary routeName="portfolio">
+                      <LazyPortfolio
+                        walletAddress={walletAddress}
+                      />
+                    </RouteErrorBoundary>
                   }
                 />
                 <Route
                   path="/analytics"
                   element={
                     <FeatureGate flag="ANALYTICS_PAGE">
-                      <LazyAnalytics />
+                      <RouteErrorBoundary routeName="analytics">
+                        <LazyAnalytics />
+                      </RouteErrorBoundary>
                     </FeatureGate>
                   }
                 />
-                <Route path="/transactions" element={<LazyTransactionHistory walletAddress={walletAddress} />} />
-                <Route path="/compare" element={<LazyVaultComparison />} />
-                <Route path="/strategies/:strategyId" element={<StrategyDetail walletAddress={walletAddress} />} />
-                <Route path="/receipt/:txHash" element={<TransactionReceipt />} />
-                <Route path="/settings" element={<LazySettings />} />
-                <Route path="/ui-kit" element={<LazyUIPreview />} />
+                <Route
+                  path="/transactions"
+                  element={
+                    <RouteErrorBoundary routeName="transactions">
+                      <LazyTransactionHistory walletAddress={walletAddress} />
+                    </RouteErrorBoundary>
+                  }
+                />
+                <Route
+                  path="/compare"
+                  element={
+                    <RouteErrorBoundary routeName="vault-comparison">
+                      <LazyVaultComparison />
+                    </RouteErrorBoundary>
+                  }
+                />
+                <Route
+                  path="/strategies/:strategyId"
+                  element={
+                    <RouteErrorBoundary routeName="strategy-detail">
+                      <StrategyDetail walletAddress={walletAddress} />
+                    </RouteErrorBoundary>
+                  }
+                />
+                <Route
+                  path="/receipt/:txHash"
+                  element={
+                    <RouteErrorBoundary routeName="transaction-receipt">
+                      <TransactionReceipt />
+                    </RouteErrorBoundary>
+                  }
+                />
+                <Route
+                  path="/settings"
+                  element={
+                    <RouteErrorBoundary routeName="settings">
+                      <LazySettings />
+                    </RouteErrorBoundary>
+                  }
+                />
+                <Route
+                  path="/ui-kit"
+                  element={
+                    <RouteErrorBoundary routeName="ui-preview">
+                      <LazyUIPreview />
+                    </RouteErrorBoundary>
+                  }
+                />
                 <Route
                   path="/admin"
                   element={
                     <ProtectedRoute role={role} allow={["admin"]}>
-                      <Admin walletAddress={walletAddress} />
+                      <RouteErrorBoundary routeName="admin">
+                        <Admin walletAddress={walletAddress} />
+                      </RouteErrorBoundary>
                     </ProtectedRoute>
                   }
                 />
@@ -256,7 +308,7 @@ function App() {
       )}
       showDialog={false}
     >
-      <ErrorBoundary>
+      <ErrorBoundary onError={(error) => captureException(error, { route: "app-root" })}>
         <AuthProvider>
           <FeatureFlagProvider>
             <VaultProvider>

frontend/src/components/RouteErrorBoundary.test.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import RouteErrorBoundary from "./RouteErrorBoundary";
+
+const captureException = vi.fn();
+
+vi.mock("../config/sentry", () => ({
+  captureException: (...args: unknown[]) => captureException(...args),
+}));
+
+function Boom({ shouldThrow }: { shouldThrow: boolean }) {
+  if (shouldThrow) {
+    throw new Error("page crashed");
+  }
+  return <div>page content</div>;
+}
+
+describe("RouteErrorBoundary", () => {
+  beforeEach(() => {
+    captureException.mockClear();
+  });
+
+  it("renders the page when it does not throw", () => {
+    render(
+      <RouteErrorBoundary routeName="home">
+        <Boom shouldThrow={false} />
+      </RouteErrorBoundary>,
+    );
+
+    expect(screen.getByText("page content")).toBeDefined();
+    expect(captureException).not.toHaveBeenCalled();
+  });
+
+  it("shows a user-friendly fallback and reports to Sentry when the page throws", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+
+    render(
+      <RouteErrorBoundary routeName="home">
+        <Boom shouldThrow />
+      </RouteErrorBoundary>,
+    );
+
+    expect(screen.getByRole("alert")).toBeDefined();
+    expect(screen.getByText("Something went wrong")).toBeDefined();
+    expect(captureException).toHaveBeenCalledTimes(1);
+    expect(captureException.mock.calls[0][0]).toBeInstanceOf(Error);
+    expect(captureException.mock.calls[0][1]).toEqual({ route: "home" });
+
+    spy.mockRestore();
+  });
+
+  it("recovers via the retry button after the underlying error is resolved", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => undefined);
+    let shouldThrow = true;
+
+    const { rerender } = render(
+      <RouteErrorBoundary routeName="home">
+        <Boom shouldThrow={shouldThrow} />
+      </RouteErrorBoundary>,
+    );
+
+    expect(screen.getByRole("alert")).toBeDefined();
+
+    shouldThrow = false;
+    rerender(
+      <RouteErrorBoundary routeName="home">
+        <Boom shouldThrow={shouldThrow} />
+      </RouteErrorBoundary>,
+    );
+
+    fireEvent.click(screen.getByText("Try Again"));
+
+    expect(screen.getByText("page content")).toBeDefined();
+    spy.mockRestore();
+  });
+});

frontend/src/components/RouteErrorBoundary.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import ErrorBoundary from "./ErrorBoundary";
+import { captureException } from "../config/sentry";
+
+interface RouteErrorBoundaryProps {
+  /** Identifies which route/page crashed in error monitoring. */
+  routeName: string;
+  children: ReactNode;
+}
+
+/**
+ * Isolates a single routed page so a render error there shows a
+ * user-friendly fallback (with retry) instead of blanking the whole app,
+ * and reports the failure to Sentry for monitoring.
+ */
+export default function RouteErrorBoundary({ routeName, children }: RouteErrorBoundaryProps) {
+  return (
+    <ErrorBoundary onError={(error) => captureException(error, { route: routeName })}>
+      {children}
+    </ErrorBoundary>
+  );
+}