Major: Missing Global Error Handling and Error Boundaries

[AliiiBenn]

Priority

🟠 Major - Stability & User Experience

Locations

• API routes: src/app/
• React components: No error boundary
• Worker: src/core/compiler/client/index.ts
• Client-side: No global error handler

Problem Description

The application lacks comprehensive error handling at multiple levels:

1. API Routes - No Global Error Handler

// Example from src/api/courses/index.ts
export async function getLesson(...) {
  const payload = await getPayload({ config })
  // No try/catch - if payload fails, request crashes
  const courseQuery = await payload.find({...})
}

2. Worker Timeout - No Cleanup

// src/core/compiler/client/index.ts:57-62
setTimeout(() => {
  if (pendingMessages.has(id)) {
    pendingMessages.delete(id)
    reject(new Error('Execution timeout'))
    // Worker is not cleaned up, pending messages remain
  }
}, 30000)

3. No React Error Boundary

• If any component throws an error, entire app crashes
• No graceful degradation
• Poor user experience

4. No Global Error Logging

• Errors are only logged to console
• No error tracking (Sentry, etc.)
• Production errors are lost

Impact

• Users: See raw error screens or blank pages
• Developers: Cannot debug production issues
• Stability: Single error can crash entire application
• Support: No visibility into user-facing errors

Related Issues

• Minor: No API Documentation (OpenAPI/Swagger) #21 - Add structured logging

Steps to Fix

1. Add error boundary to src/app/(frontend)/layout.tsx
2. Create API error handler middleware
3. Wrap all API routes with error handler
4. Fix worker timeout cleanup
5. Integrate error tracking (Sentry)
6. Add error handling tests

Additional Context

This is a foundational issue that affects production reliability. Should be addressed before public launch.