BUG: Missing React Error Boundary causes app crashes #937
Description
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