Skip to content

BUG: Missing React Error Boundary causes app crashes #937

@monu808

Description

@monu808

Is there an existing issue for this?

  • I have searched the existing issues

What happened?

Hi @rahulharpal1603 ,
While checking out the new steps to run the sync-microservice separately i encountere sometimes the app crahesh bluntly leaving a white screen after it i come to know that the application has no React Error Boundary Component.

How to reproduce:

  • Run the command: npm run tauri dev and other backend & sync-microservice command
  • trigger any unhandled javascript error(as the error happens rarely so we need to triger manually)
  • for ex. add this to Home.tsx
    const brokenData = undefined;
    return
    {brokenData.map(x => x)}
    // Crashes!
  • The entire app crashes and turns into a blank white screen

Real world scenarios where this could possibly happen:

  • Image path is missing
  • Networks fails mid-load (most probably happened in my case)

The Solution:

  • Create an ErrorBoundary component
  • Wrap the main component with the ErrorBoundary in main.tsx
  • Display a fallback UI with error details and a “Reload” button

Reference: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

Record

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions