Skip to content

fix(ui): add a top-level renderer error boundary - #57

Merged
mrsibe merged 1 commit into
mainfrom
fix/renderer-error-boundary
Sep 24, 2026
Merged

mrsibe merged 1 commit into
mainfrom
fix/renderer-error-boundary

Conversation

@mrsibe

@mrsibe mrsibe commented Sep 24, 2026

Copy link
Copy Markdown
Owner

What does this PR do?

Adds a top-level React error boundary so a render error can no longer leave the app as a blank window.

Why?

The renderer had no error boundary. Any render-phase exception made React unmount the whole tree, so the user got a white window with nothing to act on. The "Add to Note" crash (TypeError: ... reading 'getMarkdown' in NoteEditor) was the latest instance of this failure mode; the underlying crash is fixed separately, but the app should not be able to disappear like that again.

Related issue

None.

What changed?

  • New AppErrorBoundary (src/renderer/src/components/common/AppErrorBoundary.tsx): catches render errors, logs the error and component stack via componentDidCatch, shows the error message and a Reload button.
  • main.tsx wraps <App /> in the boundary.
  • Added errorTitle, errorDescription and reload to the common namespace (en-US, zh-CN).

The boundary uses the i18n instance directly instead of useTranslation, because it must be able to render outside a React provider.

How was this tested?

  • Temporarily made App throw during render, then launched npm run dev and inspected the window over Electron CDP:
    • window shows Something went wrong / An unexpected error occurred. Reload to continue. / the error message / Reload,
    • console shows [AppErrorBoundary] Uncaught render error: Error: ...,
    • the app stays interactive instead of blank.
  • Reverted the temporary throw; only the boundary wiring remains.
  • npm run typecheck:web passes.
  • npm run check:design passes (no token/design violations).
  • npx prettier --check on the touched files passes.

Screenshots / recordings

Not captured.

Checklist

  • I have reviewed my own changes.
  • npm run typecheck passes.
  • npm run build passes.
  • I have tested the affected user workflow.
  • I have not included unrelated changes.
  • I have updated documentation when necessary.

Desktop / build changes

  • Not applicable

Any render-phase exception unmounted the whole React tree and left a
blank window with no on-screen clue. The "Add to Note" crash was the
latest example of that failure mode.

Wrap <App /> in an error boundary that keeps the error on screen, logs
the original error and component stack, and offers a reload.
@github-actions github-actions Bot added the bug Something isn't working label Sep 24, 2026
@mrsibe
mrsibe merged commit 62796da into main Sep 24, 2026
4 checks passed
@mrsibe
mrsibe deleted the fix/renderer-error-boundary branch September 24, 2026 10:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant