#531 Add resilient global error boundaries and route-level diagnostic…

[felladaniel36-hash]

📝 Summary & Overview

This PR hardens the frontend application against route-level errors, unexpected React component tree crashes, unhandled asynchronous fetch failures, and local storage corruption. It introduces accessible fallback UI states with clear recovery actions (in-place retry, reload, and safe home route navigation), comprehensive secret and PII scrubbing before telemetry dispatch, and route-level error boundaries for Next.js App Router.

---

🚩 Problem & Motivation

1. Blank Screen on Uncaught Errors: Route-level errors and rendering crashes previously left the application blank without an actionable recovery path.
2. Infinite Loading on Fetch Failures: When API calls failed (e.g., marketplaceApi.fetchListings()), the UI remained stuck indefinitely in skeleton loading state with no error banner or retry button.
3. Leaked Telemetry Secrets: The previous error reporter only redacted standard email/phone patterns, leaving Stellar secret keys (S...), Bearer tokens, JWTs, API keys, passwords, and sensitive object keys exposed in crash reports.
4. Hydration Crashes on Corrupt Storage: Corrupted or non-array JSON in localStorage caused runtime exceptions during notification hydration.
5. Silent Async Failures: Async utilities such as analyticsApi swallowed errors silently without triage reporting.

---

🚀 Key Changes

1. Route-Level & Application Error Boundaries

• Created app/frontend/src/app/error.tsx: Added Next.js App Router route segment error boundary with automatic error capture and "Try again" / "Return to Home" recovery options.
• Created app/frontend/src/app/global-error.tsx: Added root layout error boundary to catch critical root-level failures.
• Enhanced app/frontend/src/components/ErrorBoundary.tsx:
  • Added static getDerivedStateFromError for immediate error-state transitions.
  • Added support for custom fallback (ReactNode or render function (error, retry) => ReactNode) and onError callback.
  • Added accessible fallback UI (role="alert", aria-live="assertive") with retry, home navigation, and issue reporting actions.

2. Global Error Shell & Telemetry Hardening

• Enhanced app/frontend/src/components/ErrorReportingShell.tsx: Registered global listeners for window.onerror and window.unhandledrejection with origin metadata and unmount cleanup.
• Hardened app/frontend/src/lib/errorReporter.ts (redactPII & extractCodeOrigin):
  • Added redaction patterns for Stellar secret keys (S[A-Z0-9]{55}), Bearer tokens, JWT tokens, API keys, passwords, and secrets.
  • Added key-based redaction for sensitive object fields (password, secret, apiKey, token, secretKey, auth, authorization).
  • Added automatic codeOrigin extraction from stack traces and context.
  • Automatically attached route context (window.location.pathname) when omitted.

3. Async Fetch Resilience & Page Recovery Paths

• app/frontend/src/app/marketplace/page.tsx: Replaced infinite loading on fetch failures with an error state, fallback UI, retry buttons, and defensive checks for real-time bid updates.
• app/frontend/src/app/settings/page.tsx: Added error telemetry for profile load/save failures, an interactive retry banner, and broken avatar image fallbacks.
• app/frontend/src/hooks/analyticsApi.ts: Integrated errorReporter.captureError in fetchAnalytics and exportAnalyticsReport.
• app/frontend/src/components/NotificationCenterProvider.tsx: Added Array.isArray guards for corrupt localStorage values and captured deserialization failures to errorReporter.

---

📂 File Changes Breakdown

Modified Files (12)

Path	Description
app/frontend/src/lib/errorReporter.ts	Secret/PII scrubbing, code origin parser, auto-route context
app/frontend/src/components/ErrorBoundary.tsx	Fallback render options, getDerivedStateFromError, recovery actions
app/frontend/src/components/ErrorReportingShell.tsx	Window error & unhandled rejection event capture
app/frontend/src/app/layout.tsx	Cleaned up unused imports
app/frontend/src/app/page.tsx	Prefetch error guards and error reporting context
app/frontend/src/hooks/analyticsApi.ts	Error reporting for fetch and export operations
app/frontend/src/app/marketplace/page.tsx	Error state handling, retry capability, realtime safety
app/frontend/src/app/settings/page.tsx	Profile error state, retry controls, avatar image fallback
app/frontend/src/components/NotificationCenterProvider.tsx	Defensive array parsing and corrupt storage recovery
app/frontend/src/app/pay/PaymentPageClient.tsx	Cleaned unused parameters in analytics tracking
app/frontend/src/hooks/__tests__/usePersistentState.test.tsx	Fixed TypeScript any lint rule
app/frontend/__tests__/errorReporter.smoke.test.ts	Extended tests for secret redaction and network failure resilience

Created Files (5)

Path	Description
app/frontend/src/app/error.tsx	Route segment error boundary
app/frontend/src/app/global-error.tsx	Root layout error boundary
app/frontend/src/components/__tests__/ErrorBoundary.test.tsx	ErrorBoundary unit tests
app/frontend/src/components/__tests__/ErrorReportingShell.test.tsx	ErrorReportingShell unit tests
app/frontend/src/__tests__/errorRecovery.test.tsx	Resilience and recovery tests

---

✅ Acceptance Criteria Checklist

• Uncaught Route/Component Errors: Captured and shown with a clear fallback state instead of leaving the app blank.
• Redacted Error Payloads: Error payloads include route context, code origin, and triage metadata without exposing secrets (Stellar secret keys, tokens, passwords).
• Tested Recovery Mechanisms: Recovery paths (in-place retry, home navigation, error reset) are tested across representative client-side failure scenarios.

---

🧪 Testing & Verification

All test suites, type checking, linting, and production builds execute cleanly:

# Unit Tests
$ pnpm test:unit
 Test Files  16 passed (16)
      Tests  127 passed (127)

# Type Check
$ pnpm type-check
 tsc --noEmit -p tsconfig.test.json (0 errors)

# ESLint
$ pnpm lint
 eslint (0 errors, 0 warnings)

# Production Build
$ pnpm build
 ✓ Compiled successfully (18/18 static & dynamic pages generated)

---

🔒 Security & Privacy Impact

• No Secret Leakage: Cryptographic Stellar secret keys (S...), Bearer tokens, JWTs, API keys, passwords, and sensitive dictionary fields are scrubbed from telemetry before network dispatch.
• Defensive Storage Ingestion: Corrupted local storage payloads are caught and sanitized without executing unvalidated data.

CLOSE #531

[MaryammAli]

LGTM

[felladaniel36-hash]

PLEASE @MaryammAli ...

When you have a chance to review and approve the PR, please issue the payment through GrantFox. Receiving the payment for this milestone will help me keep pushing forward and stay motivated on future contributions.

Thanks,