Application crashes to a blank screen when a runtime error occurs due to missing Error Boundary
Describe the bug Currently, the application does not implement a React Error Boundary around the main ERP application. If any runtime error is thrown from a child component (e.g., Dashboard, Customers, Invoices, Payments, Expenses, etc.), the entire React application crashes and displays a blank screen to the user.
This results in poor user experience and makes it difficult for users to recover from unexpected runtime exceptions.
Also, due to the implementation being missing:
No Quote MongoDB model No Quote controller No Quote frontend pages
This causes an app crash on a fresh install.
To Reproduce Steps to reproduce the behavior:
- Start the application locally.
- Navigate to any page within the ERP application (Dashboard, Customers, Invoices, etc.).
- Introduce a runtime error in any child component, for example:
- throw new Error('Test Error Boundary');
- Refresh the application.
- Observe that the application crashes and displays a blank screen.
Expected behavior Instead of displaying a blank screen, the application should gracefully handle unexpected runtime errors by:
- Displaying a user-friendly fallback UI.
- Logging the error details to the console.
- Providing a recovery mechanism such as a "Reload Application" button.
- Preventing the entire application from becoming unusable.
Screenshots
Before :
After:
*Desktop (please complete the following information) OS: macOS Sequoia Browser: Chrome Version: Latest Smartphone (please complete the following information) Device: N/A OS: N/A Browser: N/A Version: N/A Additional context Proposed Solution
Implement a reusable React Error Boundary component and wrap the main ERP application inside the boundary.
Example:
}> Pros Prevents application-wide crashes.Improves user experience by showing a meaningful fallback UI. Allows future integration with monitoring tools such as Sentry, Datadog, or LogRocket. Makes debugging easier by capturing component stack traces. Aligns with React best practices for production applications. Cons Error Boundaries only catch rendering, lifecycle, and constructor errors in React components. They do not catch: Event handler errors Asynchronous errors (setTimeout, Promises) Server-side rendering errors Adds a small amount of additional code and maintenance overhead. Impact
High user experience impact with minimal implementation complexity and low risk of regression.
PR for the fix : https://github.com/idurar/idurar-erp-crm/pull/1469
Source: idurar/idurar-erp-crm