RFC: standardize error handling in React components

[twschiller]

Context:

• We have an ErrorBoundary component
• Many components also contain logic for displaying error state

Approaches:

1. Components throw and ancestor is responsible for including an ErrorBoundary at the appropriate level. (This is my preference, since we'd want it anyway for unexpected errors, e.g., from bugs in our code)
2. Components know how to render their own error state. And introduce a standard error presentational component

Situations to consider:

1. A component uses a RTK Query that errors

Example code. Should this use useEffect or just throw directly from the render loop?

const {error} = useMyQuery();

if (error) {
  throw error;
}

Related:

• Support for Suspense in RTK Query reduxjs/redux-toolkit#1574. Loading state is related - each component is having to define their own loading state. React suspense might help to solve more elegantly in the future
• https://medium.com/@pkellner/upgrade-a-component-to-use-suspense-in-react-18-in-5-minutes-95f36996e74e

[BLoe]

@grahamlangford I'm not sure if there are really useful action items out of this one anymore.

My understanding of the current paradigm is:

• We use explicit ErrorBoundary components at various levels based on how we want to segment the UI, and which pieces can be independently reloaded/refreshed (this probably isn't super clean and could be improved in some places)
• Components are responsible for throwing or showing their own errors based on product specs / designs / etc.
• It's up to each component/call-site to determine if an RTK Query error should be suppressed, shown in the UI, or thrown up to parents

[BLoe]

• Related to Error improvements #3372

[twschiller]

We also have AsyncStateGate now as well that can help with the error state for async data

[BLoe]

• Related to Review error handling in RTK #4032

[github-actions]

This issue will be closed in 7 days unless the stale label is removed, or a comment is added to the issue.

[github-actions]

This issue was closed because it has been stale for 7 days with no activity.