Fork me on GitHub
#react
<
2021-04-20
>
orestis13:04:53

I'm trying to figure out a good error handling strategy and I'm hitting dead ends. I guess my hope is that I could somehow come up with a way to show a generic "something went wrong" toast or modal while keeping the UI in a state that can be still used to retry the operation but it seems like a pipe dream.

orestis13:04:26

Error boundaries have only limited usefulness because they have their own state so you need to have a way to reset their internal state to re-render which is not very practical.

orestis13:04:15

I would be curious to hear how the mainstream clojure frameworks handle errors. A cursory search doesn't bring up anything concrete.

lilactown14:04:04

There are different kinds of errors that require different handling

lilactown14:04:38

Validation errors, operational errors (e.g. backend is down), and coding errors

lilactown14:04:42

Probably more

lilactown14:04:47

It’s a good architectural problem

lilactown14:04:28

IME error boundaries are good at catching coding errors & operational errors (esp. with suspense), not good at catching validation errors

lilactown14:04:17

“Keeping the UI in a state that can be still used to retry the operation” what makes this hard?

lilactown14:04:49

> Error boundaries [...] need to have a way to reset their internal state to re-render which is not very practical this is an annoying thing about error boundaries. it forces you to unmount the component tree and remount it. TBD if this helps us toward better practices or not, but you can handle this by changing the key the error boundary has

lilactown14:04:50

for your toast idea, you could use an error boundary that doesn’t handle the actual error; rather, in its didCatch method you could signal the toast to appear, and then do nothing. or re-mount the children below it

orestis15:04:33

Yeah errors is very much a complected term. HTTP tries to categorize them but it’s still messy.

orestis15:04:15

> “Keeping the UI in a state that can be still used to retry the operation” > what makes this hard? With suspense for data fetching, what triggers the fetch might be far away, or the state of the UI might be subtly broken. Nothing a bit of discipline can’t fix of course, but it seems there’s not much discussion about this. Perhaps flux or relay have some opinions about this.

lilactown16:04:39

I think using declarative queries a la GraphQL does help here because you can scope the error to what actually uses the data being requested

lilactown16:04:27

GraphQL also allows fine-grained errors, i.e. some attributes may succeed and others can fail, so you can show errors for only components that depend on attributes that failed to resolve

Aron16:04:49

I have one way of doing errors that so far is working out, but I am actually not certain if it's sane. 1. I have global state, but obviously everything namespaced so no collisions 2. Errors have their own top level namespace, otherwise it's duplicated down 3. this way I can check for errors, keep more than one error, but also just clear from anywhere anytime

Aron16:04:29

I tried collecting, passing, keeping locally, all were problematic and buggy in the end.

orestis16:04:45

So components can check for specific errors @ashnur ?

Aron17:04:03

yeah, and some errors are less important, but sometimes I want a history of errors

Aron17:04:26

so then I can put a vector under the same namespace the input or whatever I need it for is

Aron17:04:06

but I think this stuff that I can't really use atoms like clojure intended it is a problem

orestis17:04:23

We are using Suspense for data via reseda. It seems though that errors should be a top-level prop for components, next to data. Like your approach @ashnur. I’m just surprised that Clojure frontend frameworks don’t seem to have a story for this, as it’s something that’s hard to retrofit as I find out :)