[UI] Add Validation and Error Boundaries

[aabidsofi19]

Notes for Reviewers

This PR fixes the crash of ui on invalid/corrupt events and adds error boundaries for gracefull error handling

Notes :

• I have used react-error-boundary ( we use it in other projects also )
• ajv for validation of response ( i have hardcoded the event schema for now but we can also use openapi codegen )

Signed commits

• Yes, I signed my commits.

[aabidsofi19]

@theBeginner86

[MUzairS15]

Suggested change

	<ErrorBoundary FallbackComponent>
	<ErrorBoundary Fallback>

Or I am missing something?

[leecalcote]

Suggested change

	<p>Something went wrong:</p>
	<h3>Please pardon the mesh</h3>

[MUzairS15]

We can add error boundary to the top level app , also the component lvl boundary could be made more specific to include the comp name or filename which caused the error. As stacktrace might be difficult to trace through sometimes.

in case of multiple error boundary closest one will be executed

[MUzairS15]

The schema is already present but the contract b/w fronted and backend is missing.

also, this schema is inaccurate as it lacks category and action

[aabidsofi19]

we were not using that in frontend anywhere yet , thats why forgot . will add those

[MUzairS15]

This isn’t always the case, in long operations i.e. an operation which invoked multiple other operation the metadata contains a summary which is not an error specifically.

[leecalcote]

Very good point regarding errors being one of a number of different types of events.

[aabidsofi19]

Thanks Uzair , i have not considered that . do you have an example response for this kind of situation

[theBeginner86]

We can add error boundary to the top level app , also the component lvl boundary could be made more specific to include the comp name or filename which caused the error. As stacktrace might be difficult to trace through sometimes.

in case of multiple error boundary closest one will be executed

+1

I too think that adding error boundary at root level would be more beneficial. As by doing that we would resolve not only the notifications center issues but unwanted UI crashes in general. Would help us to be future-proof

[MUzairS15]

Follow up on review suggestions separately.

[aabidsofi19]

We can add error boundary to the top level app , also the component lvl boundary could be made more specific to include the comp name or filename which caused the error. As stacktrace might be difficult to trace through sometimes.
in case of multiple error boundary closest one will be executed

+1

I too think that adding error boundary at root level would be more beneficial. As by doing that we would resolve not only the notifications center issues but unwanted UI crashes in general. Would help us to be future-proof

error boundary at root level is good to catch all the errors but that also means we wont have a usable ui on error . the more granular we go the better ux and easy debugging . But I Agree to your point that there should be a balance and every component might not need it .