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 : #1469
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:
Expected behavior
Instead of displaying a blank screen, the application should gracefully handle unexpected runtime errors by:
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 : #1469