feat: add Next.js route error boundaries and UI fallback

[Devadakene]

Closes #884

Description

This PR introduces robust error handling mechanisms across the Next.js application shell and its key learning journeys. Previously, unexpected frontend exceptions could result in a blank screen or a completely broken state, leaving students stuck without clear recovery options.

By implementing Next.js route-level error boundaries, we intercept these exceptions and present users with a branded, accessible ErrorFallback UI. This interface provides explicit recovery actions, enabling students to either retry their current action without a full page reload or return safely to their dashboard.

Implementation Details

1. Next.js Error Boundaries Added

Created standard Next.js error.tsx boundary files to catch uncaught exceptions and prevent cascading UI failures across the application tree.

• Core Application Shell: src/app/error.tsx (catches global app-level errors)
• Key Learning Routes:
  • src/app/courses/error.tsx
  • src/app/lessons/error.tsx
  • src/app/simulator/error.tsx
  • src/app/dashboard/error.tsx

2. Enhanced UI Fallback & Recovery Options

Modified the shared ErrorFallback component (src/components/ui/ErrorFallback.tsx) to support a more resilient user experience:

• Added a new onReturnHome boolean prop to dynamically render a "Return to Dashboard" action link alongside the existing "Try again" (onRetry) button.
• Formatted the layout to easily accommodate multiple recovery actions side-by-side using responsive flex containers.

3. Client-Safe Error Monitoring Integration

Integrated existing client-safe telemetry within the boundaries:

• Hooked the error boundaries into the application's global state using useGlobalStore((state) => state.setGlobalError).
• Ensures that unexpected errors are captured and reported safely without leaking raw stack traces, DB credentials, or server-side details to the end-user.
• Retained explicit development-only visibility (process.env.NODE_ENV === 'development') to help engineers debug easily without jeopardizing production security.

4. Automated Component Testing

Added Vitest and React Testing Library tests in src/components/ui/__tests__/ErrorFallback.test.tsx to prevent future regressions. The test suite covers:

• Default and custom error message rendering.
• The invocation of onRetry callbacks when the "Try again" button is clicked.
• The presence and correct routing of the "Return to Dashboard" link.
• Security assertions ensuring sensitive raw error stack traces are hidden in production and visible in development.

Acceptance Criteria Met

• A thrown error in a covered route renders a branded, accessible recovery state.
• Users can retry the route without a full manual navigation sequence.
• Sensitive stack traces and server details never render in the browser UI in production.
• Existing dashboard and simulator loading states remain compatible.
• Tests cover error rendering and recovery behavior.

How to Test Manually

1. Pull down the fix/error-boundaries branch and start the local development server.
2. Navigate to /courses, /simulator, or /dashboard and manually throw a JavaScript error within a client component or page layout.
3. Observe the ErrorFallback UI render instead of a blank screen.
4. Verify that clicking Try again attempts to reset the route state, and clicking Return to Dashboard navigates you safely back to /dashboard.
5. Check your console to verify that the error was caught and logged to the global store via the monitoring pipeline.

---

[vercel]

@rhoggs-bot-test-account is attempting to deploy a commit to the Ayomide Adeniran's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Devadakene Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[ayomideadeniran]

pr under review