[BUG] Missing React error boundaries - application crashes on any component error

[asadjan4611]

Describe the bug.

The AsyncAPI website application currently has no React error boundaries implemented. When any component throws an unhandled error during rendering, the entire application crashes and users see a blank white screen instead of a graceful error fallback UI.

Current Behavior

• ❌ No error boundaries in pages/_app.tsx (root component)
• ❌ No error boundaries in layout components (Layout.tsx, DocsLayout.tsx, BlogLayout.tsx)
• ❌ No error boundaries in page components
• ❌ Any unhandled React error crashes the entire application
• ❌ Users see blank white screen when errors occur
• ❌ No error logging or reporting to monitoring services
• ❌ No user-friendly error messages

Expected behavior

• ✅ Error boundaries at strategic points (app root, layouts, pages)
• ✅ Graceful error fallback UI with user-friendly messages
• ✅ Partial application functionality when possible (e.g., navigation still works)
• ✅ Error logging to monitoring service (Sentry, Winston, etc.)
• ✅ Error reporting with context (component, user, route, etc.)
• ✅ Option to retry or navigate away from error state

Screenshots

Development Mode - Error Overlay

What this shows:

• When a component error occurs, Next.js shows a development error overlay
• The error is uncaught (no error boundary)
• Error details: pages\index.tsx (16:11) @ HomePage
• The entire application is blocked by this error overlay

Production Impact:
In production builds, users would see a blank white screen instead of this error overlay, resulting in a poor user experience with no indication of what went wrong.

Expected Behavior (After Fix)

After implementing error boundaries, users should see:

• A user-friendly error message
• Option to retry or navigate away
• Partial application functionality (e.g., navigation still works)
• Error logged to monitoring service

How to Reproduce

1. Open the AsyncAPI website in a browser
2. Open browser DevTools Console
3. Inject an error into any component (e.g., add throw new Error('Test error') in a component's render)
4. Observe the result:
   • The entire application crashes
   • User sees a blank white screen
   • Console shows unhandled error
   • No error boundary catches the error

Alternative method:

• Use React DevTools to simulate component errors
• Or modify a component to throw an error during development

🖥️ Device Information [optional]

• Operating System (OS): Window 10
• Browser: Google Chrome
• Browser Version: 135.0

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[Khushboo1324]

Hi, I’ve reproduced this issue locally (in components/layout/Layout.tsx).
I don’t see any linked PR yet, so I’d like to start working on adding error boundaries.
Please let me know if that’s okay.

[asadjan4611]

Hey @Khushboo1324 ,
Glad to see you're interested in this!
Just a heads-up , I've already made a Pull Request for this issue and am currently waiting for a review from the @scharrier .

[q404365631]

I'd like to add React error boundaries. Will wrap key layout components so component errors don't crash the whole app. PR coming shortly.