[Good First Issue]: Add `error.tsx` error boundaries for graceful crash handling

[knoxiboy]

Description

DoubtDesk has zero error.tsx error boundary files. When a runtime error occurs on any page (e.g., API failure, undefined variable), the user sees the default Next.js error page which is ugly and unhelpful. This breaks the user experience.

Current State

• No app/error.tsx (root level)
• No app/dashboard/error.tsx
• No app/ask-ai/error.tsx
• No app/rooms/error.tsx

Proposed Solution

Create error.tsx files with user-friendly error UI and a "Try Again" button.

Example (app/error.tsx):

'use client'

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center space-y-4">
        <h2 className="text-2xl font-bold">Something went wrong!</h2>
        <p className="text-gray-500">{error.message}</p>
        <button onClick={reset} className="px-4 py-2 bg-blue-600 text-white rounded-lg">
          Try Again
        </button>
      </div>
    </div>
  )
}

Acceptance Criteria

• Root app/error.tsx created
• At least 3 route-specific error boundaries created
• Styled consistently with DoubtDesk design (dark/light mode)
• "Try Again" button resets the error

Labels

good first issue, beginner-friendly, frontend, gssoc'26, level:beginner, type:feature

[sachin-mahato25]

Hi @knoxiboy, I noticed PR #197 is related to this issue. Is this issue still open for contribution under GSSoC’26?

If yes, I’d like to work on adding the remaining route-specific error.tsx boundaries with proper dark/light mode support and reset handling.