fix: add React error boundary to prevent full app crash (#4688)

[subham-cd]

Summary

This PR adds a global React Error Boundary to ensure the application does not completely crash when a component throws a runtime error. Instead, the user sees a clean fallback UI.

What This Fixes

Currently, if any component throws an error, the entire page breaks. This PR catches such errors and prevents a full blank crash.

Changes Made

• Added ErrorBoundary.tsx component with fallback UI.
• Wrapped the entire application inside ErrorBoundary in _app.tsx.
• Verified behavior by intentionally triggering a test crash during development.
• Removed test crash code after confirming fallback UI works.

Screenshots

Related Issue

Fixes #4688

Summary by CodeRabbit

• New Features

  • Added error recovery interface that displays when the application encounters unexpected errors. Users can now reload the page using a dedicated button to restore functionality and continue using the application.

• Style

  • Minor formatting adjustments.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify[bot]]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	38995e3228909b96f83009978e8a7f249abd3c0d
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/69380ed8b40b2f00088acc80
😎 Deploy Preview	https://deploy-preview-4697--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai[bot]]

Walkthrough

The pull request adds React error boundaries to the application by creating a new ErrorBoundary component that catches render-time errors and displays a fallback UI with a reload button. The component is wrapped at the app root level to protect the entire application tree from unhandled errors.

Changes

Cohort / File(s)	Summary
Error Boundary Component components/ErrorBoundary.tsx	New React class component that extends React.Component. Implements getDerivedStateFromError() to capture errors, componentDidCatch() to log them, and renders a full-viewport red-themed error UI with a Reload Page button when an error is caught.
App Integration pages/_app.tsx	Added import of ErrorBoundary and wrapped the app's root content (children within AppContext.Provider) with <ErrorBoundary> to enable error boundary protection at the app level.
Formatting pages/[lang]/index.tsx	Added extra blank lines for whitespace/formatting after the useTranslation() call. No functional changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• components/ErrorBoundary.tsx: Verify the error logging in componentDidCatch() is appropriate; check that the error UI matches design specs and that the reload button handler works correctly.
• pages/_app.tsx: Confirm the ErrorBoundary placement correctly wraps the intended content and doesn't inadvertently catch errors that should propagate elsewhere.

Poem

🐰 A boundary so fine, a catch for the fall,
When errors creep in and threaten us all,
A friendly red message, a reload to try,
No more white screens—just a user's soft sigh. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: add React error boundary to prevent full app crash' directly and clearly summarizes the main change: adding an error boundary component to prevent application crashes.
Linked Issues check	✅ Passed	All coding requirements from issue #4688 are met: ErrorBoundary component created with fallback UI, wrapped around app root in _app.tsx, and prevents full app crashes as required.
Out of Scope Changes check	✅ Passed	All changes are directly aligned with issue #4688 requirements. The whitespace modification in pages/[lang]/index.tsx is minimal and does not introduce scope creep.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	40
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4697--asyncapi-website.netlify.app/