Feature/error boundary

[yahia008]

Title

feat(frontend): implement issue #99 - Error Boundary and Sentry Monitoring
Closes #99

Description

This PR implements the Error Boundary & Monitoring system (Issue #99) to safeguard the application against React
component-level crashes, integrate automated error tracking using Sentry, classify errors, scrub sensitive user
information/credentials before logging, and present a premium user fallback UI.

Additionally, this PR fixes a few pre-existing syntax/compilation errors in the frontend workspace files to ensure
clean compilation.

Key Changes

1. Sentry SDK Integration & Configuration:
   • Integrated @sentry/nextjs into the React application workspace.
   • Configured Sentry client, server, and edge configuration files ( sentry.client.config.ts , sentry.server.
   config.ts , and sentry.edge.config.ts ).
   • Hooked Sentry webpack compilation into next.config.js to enable source maps while hiding them from public
   bundles in production.
2. Error Categorization & Standardized Logger:
   • Created ErrorCategory ( USER , BUG , NETWORK , WALLET ) and AppError subclass supporting details and
   user-facing notifications.
   • Created logError utility in src/lib/error.ts to automatically assign scopes, categories, and report to
   Sentry.
3. Data Scrubbing & Sanitization:
   • Implemented sanitizeString and sanitizeObject utility functions to automatically filter sensitive fields
   from messages, stack traces, and contexts before reaching Sentry.
   • Specifically filters out Stellar secret keys (56-char uppercase keys starting with S ), 64-character hex
   keys/private keys, email addresses, JWT tokens, and sensitive request headers ( authorization , cookie , set-
   cookie , x-api-key ).
4. Premium Error Overlay UI:
   • Redesigned ErrorBoundary component to capture rendering crashes and show a responsive glassmorphic card
   with ambient background glows, warning icons, a sanitized error code block, and buttons to reload ("Try again")
   or navigate home.
   • Redesigned Next.js global route error.tsx page to log crashes automatically and render matching premium
   glassmorphic actions.
5. Pre-existing Codebase Fixes:
   • Corrected a duplicate code block and missing closing bracket in the governance/[id]/page.tsx page.
   • Resolved a TypeScript JSX compiler error in useLeaderboard.test.ts (a .ts file containing JSX code) by
   converting the wrapper implementation to use React.createElement .

──────

Technical Specs & Testing

Wrote 14 comprehensive unit tests in two suites matching /src/components/ui/tests :

• ErrorBoundary.test.tsx : Verifies crash catching, logging to Sentry handler, fallback rendering, reload button
click handler, and navigation.
• error.test.ts : Verifies full regex redacting/scrubbing for Stellar secrets, hex keys, emails, JWT tokens, and
nested objects, as well as verifying correct Sentry logging scope tag mapping.

Test Run Results:

PASS components src/components/ui/__tests__/error.test.ts
PASS components src/components/ui/__tests__/ErrorBoundary.test.tsx

Test Suites: 2 passed, 2 total
Tests:       14 passed, 14 total
Snapshots:   0 total
Time:        5.249 s
──────

Checklist

[✓] Error boundaries catch all component errors
[✓] Sentry SDK integrated on client, server, and edge runtimes
[✓] Stack traces captured safely with source maps configured
[✓] Sensitive user data (Stellar private seeds, hex keys, JWTs, emails) filtered from logs
[✓] Users shown responsive glassmorphism warning card
[✓] Comprehensive unit tests passing for boundaries and sanitization utilities***

───────────────────────────────────────────────