feat: detailed error page for crashes

[leowla]

Issue

App crashes fall back to a blank page with no information

Solution

• Dev mode: show error details
• Prod mode: show generic error message

Risk

Low

Checklist

• Acceptance criteria met
• Continuous integration build passing

Summary by CodeRabbit

• Bug Fixes
  • Added a top-level error fallback so the app shows a friendly message instead of a blank screen when something goes wrong.
  • Improved the recovery experience with options to retry or refresh the page.
  • In development, error details and stack information are now shown to help with troubleshooting.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a new ErrorBoundary React class component that catches rendering errors, storing error and component stack state, with distinct dev-mode and production fallback UIs. App is updated to wrap its rendered tree with this ErrorBoundary instead of a plain fragment.

Changes

Error Boundary

Layer / File(s)	Summary
ErrorBoundary component implementation frontend/src/components/ErrorBoundary.jsx	New class component captures errors via getDerivedStateFromError/componentDidCatch, exposes a reset method, and renders dev-mode (detailed error/stack, copy-to-clipboard, retry/reload) or production (generic message) fallback UI.
App tree wrapped with ErrorBoundary frontend/src/App.jsx	Imports ErrorBoundary and replaces the top-level fragment wrapper with <ErrorBoundary> around the app's providers, router, and UI.

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

Sequence Diagram(s)

sequenceDiagram
  participant App
  participant ErrorBoundary
  participant ReactRuntime

  App->>ErrorBoundary: render children
  ReactRuntime-->>ErrorBoundary: error thrown during render
  ErrorBoundary->>ErrorBoundary: getDerivedStateFromError(error)
  ErrorBoundary->>ErrorBoundary: componentDidCatch(error, info)
  ErrorBoundary->>ErrorBoundary: render fallback UI (dev or prod)
  ErrorBoundary-->>App: reset() clears error state

Loading

Related issues: None specified.

Related PRs: None specified.

Suggested labels: frontend, enhancement

Suggested reviewers: None specified.

Poem

A rabbit hops where errors creep,
Wraps the app so bugs won't leap,
Stack traces caught in tidy state,
"Try again" — don't hesitate,
Safe within the boundary's keep. 🐰

🚥 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.
Title check	✅ Passed	The title clearly matches the main change: adding a detailed crash error page.
Description check	✅ Passed	The description includes the required Issue, Solution, Risk, and Checklist sections and is sufficiently specific.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/dev-error-boundary

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/components/ErrorBoundary.jsx (1)

13-15: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

No error reporting/telemetry on catch.

componentDidCatch only stores the component stack locally; nothing is sent to a monitoring/logging service. In production the user only sees a generic message, so without reporting here, crashes go unnoticed by the team.

♻️ Suggested addition

   componentDidCatch(error, info) {
     this.setState({ componentStack: info.componentStack });
+    // e.g. reportError(error, info.componentStack);
   }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/components/ErrorBoundary.jsx` around lines 13 - 15, The
ErrorBoundary component currently only saves the component stack in
componentDidCatch and does not report the caught error anywhere. Update
componentDidCatch in ErrorBoundary.jsx to send the error and its stack/info to
the existing telemetry or logging service used by the app, while keeping the
local setState({ componentStack: info.componentStack }) behavior. Use the
componentDidCatch method and ErrorBoundary class as the integration point, and
make sure the report happens whenever a render crash is caught in production.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/components/ErrorBoundary.jsx`:
- Line 29: The ErrorBoundary heading text contains a stray trailing backslash in
the "Something went wrong :\\" string, which renders as an artifact. Update the
message in ErrorBoundary.jsx to use the intended sad-face text, and verify the
JSX heading displays the corrected emoticon consistently.

---

Nitpick comments:
In `@frontend/src/components/ErrorBoundary.jsx`:
- Around line 13-15: The ErrorBoundary component currently only saves the
component stack in componentDidCatch and does not report the caught error
anywhere. Update componentDidCatch in ErrorBoundary.jsx to send the error and
its stack/info to the existing telemetry or logging service used by the app,
while keeping the local setState({ componentStack: info.componentStack })
behavior. Use the componentDidCatch method and ErrorBoundary class as the
integration point, and make sure the report happens whenever a render crash is
caught in production.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a8bc321a-3e93-45d1-922e-6c376cf54ce8

📥 Commits

Reviewing files that changed from the base of the PR and between 7543bb5 and 90d36de.

📒 Files selected for processing (2)

• frontend/src/App.jsx
• frontend/src/components/ErrorBoundary.jsx

[harbassan]

lgtm 😄