FIX: Sanitize externally visible API errors

frontend/e2e/errors.spec.ts

@@ -259,8 +259,9 @@ test.describe("Error: backend 500 on send message", () => {
 
     // Error message should appear in chat
     await expect(
-      page.getByText(/Internal server error/i),
+      page.getByText(/The server could not complete the request\. Please try again\./i),
     ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByText(/Internal server error/i)).toHaveCount(0);
 
     // The failed text should be restored in the input for easy re-send
     await expect(input).toHaveValue("This should fail", { timeout: 5000 });
@@ -282,12 +283,42 @@ test.describe("Error: backend 500 on send message", () => {
     await input.fill("First send fails");
     await page.getByRole("button", { name: /send/i }).click();
 
-    await expect(page.getByText(/Internal server error/i)).toBeVisible({
-      timeout: 10000,
-    });
+    await expect(
+      page.getByText(/The server could not complete the request\. Please try again\./i),
+    ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByText(/Internal server error/i)).toHaveCount(0);
     await expect(page.getByTestId("loading-state")).toHaveCount(0);
     await expect(input).toHaveValue("First send fails", { timeout: 5000 });
   });
+
+  test("should show an explicitly categorized server error", async ({ page }) => {
+    await mockAllAPIs(page, async (route) => {
+      await route.fulfill({
+        status: 503,
+        contentType: "application/json",
+        body: JSON.stringify({
+          type: "/errors/target-unavailable",
+          title: "Target Unavailable",
+          status: 503,
+          detail: "The target is temporarily unavailable. Please try again later.",
+        }),
+      });
+    });
+
+    await page.goto("/");
+    await activateMockTarget(page);
+
+    const input = page.getByRole("textbox");
+    await input.fill("Unavailable target");
+    await page.getByRole("button", { name: /send/i }).click();
+
+    await expect(
+      page.getByText("The target is temporarily unavailable. Please try again later."),
+    ).toBeVisible({ timeout: 10000 });
+    await expect(
+      page.getByText("The server could not complete the request. Please try again."),
+    ).toHaveCount(0);
+  });
 });
 
 // ---------------------------------------------------------------------------

frontend/src/auth/AuthProvider.test.tsx

@@ -146,9 +146,11 @@ describe("AuthProvider", () => {
     });
   });
 
-  // Test 13: fetchAuthConfig rejects with Error → err.message shown
-  it("shows error when initialization fails with Error", async () => {
-    mockFetchAuthConfig.mockRejectedValue(new Error("Config fetch failed"));
+  // Test 13: fetchAuthConfig rejects with Error → generic message shown
+  it("shows a generic error when initialization fails with Error", async () => {
+    mockFetchAuthConfig.mockRejectedValue(
+      new Error("token secret=sk-test failed at C:\\internal\\auth.ts")
+    );
 
     render(
       <AuthProvider>
@@ -158,7 +160,8 @@ describe("AuthProvider", () => {
 
     await waitFor(() => {
       expect(screen.getByText("Authentication Error")).toBeVisible();
-      expect(screen.getByText("Config fetch failed")).toBeVisible();
+      expect(screen.getByText("Failed to initialize authentication")).toBeVisible();
+      expect(screen.queryByText(/sk-test|internal\\auth/i)).not.toBeInTheDocument();
     });
   });
 

frontend/src/auth/AuthProvider.tsx

@@ -133,9 +133,9 @@ export function AuthProvider({ children }: AuthProviderProps) {
           setMsalInstance(instance)
           setAuthConfig(config)
         }
-      } catch (err) {
+      } catch {
         if (!cancelled) {
-          setError(err instanceof Error ? err.message : 'Failed to initialize authentication')
+          setError('Failed to initialize authentication')
         }
       }
     }

frontend/src/components/Chat/ChatWindow.test.tsx

@@ -844,7 +844,7 @@ describe("ChatWindow Integration", () => {
     await user.click(screen.getByRole("button", { name: /send/i }));
 
     await waitFor(() => {
-      expect(screen.getByText(/Network error/)).toBeInTheDocument();
+      expect(screen.getByText(/An unexpected error occurred\./)).toBeInTheDocument();
     });
   });
 
@@ -877,11 +877,11 @@ describe("ChatWindow Integration", () => {
     await user.click(screen.getByRole("button", { name: /send/i }));
 
     await waitFor(() => {
-      expect(screen.getByText(/Request failed with status code 404/)).toBeInTheDocument();
+      expect(screen.getByText(/An unexpected error occurred\./)).toBeInTheDocument();
     });
   });
 
-  it("should extract detail from axios-style error response", async () => {
+  it("should sanitize detail from a 500 axios-style error response", async () => {
     const user = userEvent.setup();
 
     mockedMapper.buildMessagePieces.mockResolvedValue([
@@ -911,7 +911,7 @@ describe("ChatWindow Integration", () => {
     await user.click(screen.getByRole("button", { name: /send/i }));
 
     await waitFor(() => {
-      expect(screen.getByText(/Failed to add message/)).toBeInTheDocument();
+      expect(screen.getByText(/The server could not complete the request\. Please try again\./)).toBeInTheDocument();
     });
   });
 
@@ -945,7 +945,7 @@ describe("ChatWindow Integration", () => {
     await user.click(screen.getByRole("button", { name: /send/i }));
 
     await waitFor(() => {
-      expect(screen.getByText(/Internal Server Error/)).toBeInTheDocument();
+      expect(screen.getByText(/The server could not complete the request\. Please try again\./)).toBeInTheDocument();
     });
   });
 
@@ -971,7 +971,7 @@ describe("ChatWindow Integration", () => {
     await user.click(screen.getByRole("button", { name: /send/i }));
 
     await waitFor(() => {
-      expect(screen.getByText(/string error/)).toBeInTheDocument();
+      expect(screen.getByText(/An unexpected error occurred\./)).toBeInTheDocument();
     });
   });
 

frontend/src/components/Chat/ConversationPanel.test.tsx

@@ -366,7 +366,7 @@ describe("ConversationPanel", () => {
     await waitFor(() => {
       expect(screen.getByTestId("conversation-error")).toBeInTheDocument();
     });
-    expect(screen.getByText("Network error")).toBeInTheDocument();
+    expect(screen.getByText("An unexpected error occurred.")).toBeInTheDocument();
   });
 
   // -----------------------------------------------------------------------
@@ -428,7 +428,9 @@ describe("ConversationPanel", () => {
     await waitFor(() => {
       expect(screen.getByTestId("conversation-error")).toBeInTheDocument();
     });
-    expect(screen.getByText("Server exploded")).toBeInTheDocument();
+    expect(
+      screen.getByText("The server could not complete the request. Please try again.")
+    ).toBeInTheDocument();
     expect(screen.getByTestId("conversation-retry-btn")).toBeInTheDocument();
   });
 

frontend/src/components/Config/CreateTargetDialog.test.tsx

@@ -353,7 +353,7 @@ describe("CreateTargetDialog", () => {
     await user.click(screen.getByText("Create Target"));
 
     await waitFor(() => {
-      expect(screen.getByText("Invalid API key")).toBeInTheDocument();
+      expect(screen.getByText("An unexpected error occurred.")).toBeInTheDocument();
     });
   });
 
@@ -454,7 +454,7 @@ describe("CreateTargetDialog", () => {
     });
   });
 
-  it("should surface string throws verbatim via toApiError", async () => {
+  it("should sanitize string throws via toApiError", async () => {
     const user = userEvent.setup();
     mockedTargetsApi.createTarget.mockRejectedValue("string error");
 
@@ -474,7 +474,7 @@ describe("CreateTargetDialog", () => {
     await user.click(screen.getByText("Create Target"));
 
     await waitFor(() => {
-      expect(screen.getByText("string error")).toBeInTheDocument();
+      expect(screen.getByText("An unexpected error occurred.")).toBeInTheDocument();
     });
   });
 

frontend/src/components/Config/TargetConfig.test.tsx

@@ -148,7 +148,9 @@ describe("TargetConfig", () => {
 
       await waitFor(
         () => {
-          expect(screen.getByText(/Connection refused/)).toBeInTheDocument();
+          expect(
+            screen.getByText(/An unexpected error occurred\./)
+          ).toBeInTheDocument();
         },
         { timeout: 15000 }
       );

frontend/src/components/ErrorBoundary.test.tsx

@@ -4,7 +4,7 @@ import { ErrorBoundary } from './ErrorBoundary'
 // Component that throws on render
 function ThrowingChild({ shouldThrow }: { shouldThrow: boolean }) {
   if (shouldThrow) {
-    throw new Error('Test crash')
+    throw new Error('secret=sk-test at C:\\internal\\component.tsx')
   }
   return <div data-testid="child-content">OK</div>
 }
@@ -31,15 +31,16 @@ describe('ErrorBoundary', () => {
     expect(screen.queryByTestId('error-boundary-fallback')).toBeNull()
   })
 
-  it('catches render error and shows fallback', () => {
+  it('catches render error without showing internal details', () => {
     render(
       <ErrorBoundary>
         <ThrowingChild shouldThrow={true} />
       </ErrorBoundary>
     )
 
     expect(screen.getByTestId('error-boundary-fallback')).toBeInTheDocument()
-    expect(screen.getByText(/test crash/i)).toBeInTheDocument()
+    expect(screen.getByText(/something went wrong\. please try again\./i)).toBeInTheDocument()
+    expect(screen.queryByText(/sk-test|internal\\component/i)).not.toBeInTheDocument()
     expect(screen.getByText('Try again')).toBeInTheDocument()
   })
 

frontend/src/components/ErrorBoundary.tsx

@@ -4,7 +4,7 @@ import type { FallbackProps } from 'react-error-boundary'
 import type { ReactNode } from 'react'
 import { Button, MessageBar, MessageBarBody, tokens } from '@fluentui/react-components'
 
-function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+function ErrorFallback({ resetErrorBoundary }: FallbackProps) {
   const [crashCount, setCrashCount] = useState(1)
 
   const handleRetry = () => {
@@ -31,7 +31,7 @@ function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
     >
       <MessageBar intent="error">
         <MessageBarBody>
-          Something went wrong: {error instanceof Error ? error.message : 'Unknown error'}
+          Something went wrong. Please try again.
         </MessageBarBody>
       </MessageBar>
 

frontend/src/components/History/AttackHistory.test.tsx

@@ -425,7 +425,7 @@ describe('AttackHistory', () => {
     await waitFor(() => {
       expect(screen.getByTestId('error-state')).toBeInTheDocument()
     })
-    expect(screen.getByText('Internal server error')).toBeInTheDocument()
+    expect(screen.getByText('The server could not complete the request. Please try again.')).toBeInTheDocument()
     expect(screen.getByTestId('retry-btn')).toBeInTheDocument()
   })