Suspense + Mutate + ErrorBoundary

[samselikoff]

I'm trying to get an ErrorBoundary showing after a refetch via mutate(). If the initial request fails, the error boundary shows. If I make it so the initial request succeeds but then the next request fails, and try to use the bound mutate(), the error boundary doesn't show (nor does its componentDidCatch hook run).

I'll be able to put a simplified reproduction later but wanted to drop this in now to see if there's something I'm missing wrt to the expected behavior? I do want to keep the stale data rendered but was hoping for at least a componentDidCatch() so I could show a Toast UI that the feed wasn't able to refresh.

Thanks for any tips!

[shuding]

This is kinda tricky to consider — should a revalidation cause the component to throw and fallback to its boundary (Suspense or error boundary)?

Due to the built-in cache of SWR, when a revalidation fails, I think that showing the stale data on the screen (not throwing and returning the error state like before), instead of falling back to the boundary, might lead to a better UX. Otherwise the component might fallback unexpectedly whenever e.g. user refocuses on the screen.

But of course, if that’s inside a transition, then it’s not the case.

Overall I feel that it’s pretty difficult to reason about the “stale-while-revalidate” model with suspense. A blurry idea in my head is to always wrap the internal revalidations with transitions.

Maybe for now you can add if (error) throw error to force triggering the error boundary?

[samselikoff]

Yeah I kinda realized a lot of what you were saying as I've been simmering on this. I agree it feels a little like a mismatch between the two paradigms. I also agree you want to see the stale data.

My idea was to build something like Twitter's pull-to-refresh, and if the refresh fails, show a toast message. I was hoping to implement it as an error boundary around the root that renders the toast but now I'm wondering if that actually makes sense. You definitely want the child to render the stale timeline, but in that case, it's not erroring. It can successfully render.

I haven't actually used Transition yet, do you think that would help here? Or should toast UI just be triggered if error somehow? If you had three components that error but wanted to show a single toast in the root, would you want to use suspense/error boundary to let the parent coordinate? Maybe all you need is some Context you can send a message to.

[timedtext]

Possible to use global exception handling to achieve this?

[samselikoff]

Interesting, don't think I tried this. Been a while but would be interested in the result if anyone goes down this path!

The demo I referred to in the OP is here if anyone wants to give it a shot: https://github.com/samselikoff/2020-07-16-show-new-tweets