feat: implement global React Error Boundary for graceful fallbacks

[vivek0028]

🚀 Program

GSSoC

📝 Description

This PR introduces a global React <ErrorBoundary> component to prevent the entire application from crashing to a blank white screen when an unexpected rendering error occurs.

Instead, the Error Boundary catches rendering errors and displays a user-friendly fallback UI with an option to reload the application.

Why is this needed?

Currently, if any component in the React tree throws an unhandled exception during rendering—for example, due to a malformed message object in the speech history—the React tree may unmount and leave the user with a blank screen and no clear recovery path.

Adding a top-level Error Boundary improves application resilience by providing a graceful fallback when unexpected rendering errors occur.

Changes Made

• client/src/components/ErrorBoundary.jsx

  • Added a reusable class-based Error Boundary.
  • Implemented static getDerivedStateFromError() to update the UI when an error occurs.
  • Implemented componentDidCatch() for error logging.
  • Added a styled fallback UI using the project's existing Tailwind styling.
  • Added a Reload Application button for recovery.

• client/src/main.jsx

  • Imported the new ErrorBoundary component.
  • Wrapped the application's ThemeProvider and App with <ErrorBoundary> to provide a top-level safety net.

🔗 Related Issue

Closes #1050

🔄 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🔍 SEO improvement
• 🎨 Style / UI improvement
• ♿ Accessibility improvement
• 📝 Documentation
• ⚙️ CI / configuration
• 🧹 Refactor / cleanup

🧪 How to Test

1. Run the application and open http://localhost:5173 in a browser.
2. Temporarily add the following line inside a child component's render path, such as App.jsx:

throw new Error("Simulated rendering crash");

3. Refresh the application.
4. Verify that the application displays the "Something went wrong" fallback UI instead of a blank white screen.
5. Verify that the error information is logged to the browser console.
6. Click the Reload Application button and confirm that it reloads the application.
7. Remove the temporary throw new Error(...) line and verify that the application works normally.

📸 Screenshots (if applicable)

Add a screenshot of the "Something went wrong" fallback UI here.

✅ Checklist

• I am contributing under GSSoC, NSOC, SSOC, or ELUSOC
• My code follows the project's existing style
• I have tested my changes in a browser
• I have linked the related issue above
• My PR title follows Conventional Commits format

Summary by CodeRabbit

• New Features
  • Added an error recovery screen when the application encounters an unexpected issue.
  • Displays an available error message and provides a Reload Application button to restart the app.

[vercel]

@vivek0028 is attempting to deploy a commit to the itzzavdhesh's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

✍️ DCO Sign-off Needed

Hey @vivek0028! 👋 One or more commits in this PR are missing a Signed-off-by: line.

Warning

• b862c25 feat: implement global React Error Boundary for graceful fallbacks

How to fix:

For the latest commit:

git commit --amend --signoff
git push --force-with-lease

For multiple commits, replace N with the number to update:

git rebase --signoff HEAD~N
git push --force-with-lease

This comment will update automatically after you push.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[github-actions]

🎉 PR Ready for Mentor Review

Hey @vivek0028! 👋 Your PR passed all checks and is now in the GSSoC review queue.

Note

🔗 Closing: #1050 · 📐 70 lines across 2 file(s) · 📬 Review requested

@sabeenaviklar @Anushreebasics @itsdakshjain @snehkris @1754riya @Mrigakshi-Rathore @Itzzavdheshh @Nitya-003 @4f4d @lovestaco, this PR is ready for your review — please confirm scope, check behavior and tests, then approve or request changes.

Important

This is not an approval. Please wait for mentor feedback before expecting a merge. If changes are requested, push them to this same branch and keep the PR focused on the linked issue.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

Application error handling

Layer / File(s)	Summary
Error boundary implementation and root wiring client/src/components/ErrorBoundary.jsx, client/src/main.jsx	Adds error capture, logging, a styled fallback with error details, and application reload behavior; wraps the root ThemeProvider and App tree with the boundary.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

• VoiceForge#1050 — Covers the same global React error boundary, fallback, reload behavior, and root application wiring.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a global React Error Boundary with a graceful fallback UI.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[cubic-dev-ai]

All reported issues were addressed across 2 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[github-actions]

❌ Merge Policy Violation

Caution

Unauthorized Merge — Pull request #1149 was merged by @Itzzavdheshh (mentor) without any review on record.

VoiceForge guidelines require contributors/mentors to submit at least one review (approval, comment, or changes requested) before merging a pull request to ensure code quality and point-tracking integrity.

📊 Violation Summary

Parameter	Details
Merged By	@Itzzavdheshh (mentor)
Review Count	0 reviews on record
PR Author	@vivek0028
PR Number	#1149

⚠️ Action Required (@itzzavdhesh):

• Please review the merged code for quality and scope.
• Consider reverting the merge if it was done inappropriately.
  • Ensure your repository ruleset or branch protection rules are active.

---

_{🤖 VoiceForge Automation}

[github-actions]

🎊 PR Merged Successfully

Hey @vivek0028! 👋 Congratulations and thank you for your contribution to VoiceForge!

Note

🔗 Linked issue(s): #1050 · ✅ Marked as merged and complete

Maintainers may still handle final cleanup, release notes, or follow-up tracking after the merge.

---

_{🤖 VoiceForge Automation · Updates automatically on edits}