[Request] Set error boundary for component subtrees

[tthvo]

Describe the feature

Sometimes, if there are something wrong (e.g. bugs or local storage is tampered with invalid values), the console will crash with plain screen.

This is not very nice UX. We should show some error message so that the users can move on to other views and also report the issue quickly without tracing browser console.

Any other information?

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

Though we need to consider where to put the boundary so that its not redundant: https://aweary.dev/fault-tolerance-react/

Attention

From: https://stackoverflow.com/questions/48482619/how-can-i-make-use-of-error-boundaries-in-functional-react-components

Also bear in mind that try/catch blocks won't work on all cases.
If a component deep in the hierarchy tries to updates and fails, the try/catch block in one of the parents won't work -- > because it isn't necessarily updating together with the child.

[andrewazores]

https://stackoverflow.com/questions/48482619/how-can-i-make-use-of-error-boundaries-in-functional-react-components

[andrewazores]

This was something I had wanted to look into for a while. The SO snippets above look pretty straightforward - maybe we can get a single error boundary in place within the AppLayout or somewhere else high up in our component tree by tomorrow? This way at least if there is some such bug, the user is likely to at least still see the general Cryostat frame and navigation menu so they can try clicking away to a non-bugged view. Better handling for specific views can be targeted for a later release.

[andrewazores]

I think this can be closed now. There might be more places where this technique can be applied but it has been working well for some time as it is.