feat(error): set error boundary for first renders

[tthvo]

Welcome to Cryostat! 👋

Before contributing, make sure you have:

• Read the contributing guidelines
• Linked a relevant issue which this PR resolves
• Linked any other relevant issues, PR's, or documentation, if any
• Resolved all conflicts, if any
• Rebased your branch PR on top of the latest upstream main branch
• Attached at least one of the following labels to the PR: [chore, ci, docs, feat, fix, test]
• Signed the last commit: git commit --amend --signoff

---

Related to: #950

Description of the change:

Add an error boundary around component that renders the main container view. Though, this won't completely fix the issue because we need consider more granular handling.

Note: this applies for first render. If later one child components build fail, no error views will be shown.

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.

Motivation for the change:

See #950. This applies to first renders to that errors are caught early.

How to manually test:

1. Run CRYOSTAT_IMAGE=quay.io... sh smoketest.sh...
2. Try:

diff --git a/src/app/Dashboard/Dashboard.tsx b/src/app/Dashboard/Dashboard.tsx
index 6dffda0c..cdd0e35d 100644
--- a/src/app/Dashboard/Dashboard.tsx
+++ b/src/app/Dashboard/Dashboard.tsx
@@ -267,6 +267,7 @@ export const getDashboardCards: (featureLevel?: FeatureLevel) => DashboardCardDe
 export interface DashboardComponentProps {}
 
 export const Dashboard: React.FC<DashboardComponentProps> = (_) => {
+  throw new Error('Somehow the dashboard cannot be rendered');
   const history = useHistory();
   const serviceContext = React.useContext(ServiceContext);
   const dispatch = useDispatch<StateDispatch>();

Screenshots

Light Theme	Dark Theme

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-951-fb7eff6433cc982cf3be6e18d1b13328e1872195 sh smoketest.sh

[github-actions]

Test image available:

CRYOSTAT_IMAGE=ghcr.io/cryostatio/cryostat-web:pr-951-f83cebee471a9386c603e0c9c8d4dd4d2190504e sh smoketest.sh

[tthvo]

Routing still works fine thanks to route having a distinct key (causing its component tree to unmounted). This allows the ErrorBoundary to start with a fresh state.

cryostat-web/src/app/routes.tsx

Line 292 in 65b8867

key={idx}

I think its an important note for later implementation of error boundaries that needs updating -> use key prop.