fix: add global error boundary to prevent full app crashes (#251)

[JyantiM]

Description

This PR addresses Issue #251 by introducing a global React ErrorBoundary at the top of the component tree in App.jsx.

Previously, any unhandled render exception within the context providers or routing layer would crash the entire application, leaving the user stuck on a blank white screen. With this change, exceptions are caught gracefully and the user is presented with a themed, friendly fallback UI that allows them to attempt recovery.

What changed

• Created ErrorBoundary.jsx: A new class component implementing getDerivedStateFromError and componentDidCatch.
• Wrapped App.jsx: The ErrorBoundary now wraps the entire provider and router tree. Note: The large diff in App.jsx is primarily due to the 2-space indentation shift required to wrap the existing <ThemeProvider> block.
• Themed Fallback UI: The error screen uses our existing CSS custom properties (e.g., var(--color-fin-bg), var(--color-fin-accent)) so it adapts to both dark and light modes automatically, without any hardcoded colors.
• Recovery Actions: Added "Try again" (clears error state for a soft reset) and "Reload page" (hard refresh) buttons.

Why a class component?

I opted for a standard class component rather than bringing in the react-error-boundary package. This keeps our dependencies light and avoids adding unnecessary bundle weight for functionality that React supports natively out of the box.

Visual Proof

Dark Mode

Light Mode

The fallback UI was verified to be visually consistent with the overall website in both themes. All colors are resolved from the existing CSS custom properties defined in index.css.

How to test

1. Pull this branch and start the dev server.
2. Open App.jsx and temporarily add a component that throws inside the <ErrorBoundary>.
3. Verify the fallback UI renders instead of a blank screen.
4. Click "Try again" and "Reload page" to confirm both recovery paths work.
5. Check the browser console for the [ErrorBoundary] log from componentDidCatch.

Closes #251

[netlify]

👷 Deploy request for finnboard0 pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	74ea1b8

[netlify]

✅ Deploy Preview for finnboard ready!

Name	Link
🔨 Latest commit	74ea1b8
🔍 Latest deploy log	https://app.netlify.com/projects/finnboard/deploys/6a797c1304fa00000862df66
😎 Deploy Preview	https://deploy-preview-253--finnboard.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.

[khanirfan18]

Hey @JyantiM This looks great 🙌 Nice that you wrapped it right at the top so it catches provider/router errors too.
Quick q before I merge.. did you test if "Try again" actually recovers after a render error, or does it just throw again? Not a blocker, just curious.
Also, totally optional: role="alert" on the fallback card would help screen readers. Could be a follow-up.

And are you planning to hook this into Sentry or similar later, or is console logging fine for now?

[khanirfan18]

Hey @JyantiM, merging now, really solid work on this 🙌 Feel free to circle back on the role="alert"/Sentry stuff whenever, no pressure. If you enjoyed working on this, would mean a lot if you starred the repo ⭐

[JyantiM]

Thanks for the feedback! I actually tested the "Try again" button. When you click it, the boundary successfully clears its state and remounts the tree. As long as the error was transient, it perfectly recovers the app without just crashing again.

Great catch on using the alert role for screen readers. I will open a quick follow-up PR to add that in so we can keep this one focused.

As for error tracking, I just stuck to basic console logging for now to get the baseline boundary in place. However, if you would like me to wire it up to Sentry or our preferred tracking service right now, just let me know and I am completely happy to add that in! Otherwise, we can definitely set that up later.