feat: add route-segment error boundaries for isolated widget failure …

[onyemaechiezekiel9]

Fix Issue #593: Add Route-Segment-Level Error Boundaries

Summary

Implements granular error boundaries across 10 critical route segments to prevent application-wide crashes when individual widgets or features fail. Errors are now isolated to their segment scope, keeping the shared layout, navbar, and sidebar fully interactive.

closes #593

Problem

Previously, errors in data-fetching segments (dashboard, marketplace, analytics, etc.) could crash the entire application or disable navigation. Users had no way to recover from segment-specific failures without a full page reload.

Solution

Added Next.js App Router error boundaries at the segment level for all dynamic/data-fetching routes:

• Dashboard (widgets)
• Marketplace (creator listings)
• Profile (user settings)
• Transactions (tip history)
• Analytics (charts & visualizations)
• Discover (creator discovery)
• Store (shopping cart & checkout)
• Stream (live streaming + WebSocket)
• Settings (account management)
• Creator (dynamic profiles)

Implementation Details

Error Boundary Pattern

Each boundary:

• Uses 'use client' directive (required for error boundaries)
• Implements ErrorPageProps interface
• Reuses ErrorFallback component for consistent UX
• Logs errors with segment context via logError() utility
• Shows "Try again" button that calls reset() to re-render the segment
• Provides "Go home" as alternative navigation

Accessibility

• ✅ role="alert" with aria-live="assertive" for screen readers
• ✅ Keyboard navigation (Tab, Enter keys)
• ✅ Focus-visible ring on interactive elements
• ✅ Semantic HTML structure
• ✅ Dark mode support via Tailwind CSS

Error Details Visibility

• Development: Shows error message + digest for debugging
• Production: Shows generic error message only

Files Added

• 10 error boundary components (src/app/*/error.tsx)
• 10 comprehensive test files (src/app/*/error.test.tsx)
• 100+ test cases covering accessibility, keyboard nav, and edge cases
• Documentation file: ERROR_BOUNDARIES_SUMMARY.md

Testing

Run all tests with:

npm run test

[Christopherdominic]

Thanks for picking this up, @onyemaechiezekiel9 — this is assigned to you via the GrantFox bot for issue #593.

Before this can be merged, all required CI checks need to pass. Currently failing:

• ❌ Lint (ESLint)
• ❌ Unit Tests (Vitest)
• ❌ E2E Tests (Playwright)

Currently passing:

• ✅ Typecheck (tsc --noEmit)
• ✅ Build (Next.js)

Please push a fix and make sure the full CI suite is green — I'll take another look once it is. Thanks for the contribution!

[Christopherdominic]

👋 Thanks for the submission!

This PR currently has one or more failing CI checks. Per the GrantFox review process, PRs need all checks green before they can be merged — please take a look at the Checks tab (or run gh pr checks 657 locally) and push a fix.

I'll take another look once everything is passing. Thanks for your patience!