Add error boundary for UI

[vladzabolotnyi]

Description

At the moment if the error is thrown on UI runtime, the user will see traces. We can handle this behavior with error boundary to show some error screen.

[probelabs]

Hello @vladzabolotnyi, thank you for this excellent suggestion.

You are correct that showing raw error traces to the user is not ideal. Implementing a React Error Boundary is the standard and most effective way to handle runtime errors gracefully in the UI.

Analysis

Based on your report, this is a clear user experience enhancement. The main application entry point seems to be the best place to implement this.

• Affected Area: The root of our React application, where the main App component is rendered.
• Implementation: A new ErrorBoundary component should be created and then used to wrap the <App /> component within ui/admin-frontend/src/index.js.

This will catch any rendering errors that occur in the component tree and allow us to display a user-friendly fallback screen instead of a crash.

Next Steps

1. Create a reusable ErrorBoundary class component.
2. Import it into ui/admin-frontend/src/index.js.
3. Wrap the existing <App /> component with it.

This is a valuable improvement for the application's robustness.

References:

• ui/admin-frontend/src/index.js:35-37 – The render location for the root App component.

---

Powered by Visor from Probelabs

💡 TIP: You can chat with Visor using /visor ask <your question>