like-gold

Error boundary does not seem to reset suspense query properly when leaving the page with the error.

Lets say Page2 executes useSuspenseQuery that fail. The query is rendered inside Suspense, ErrorBoundary and QueryErrorResetBoundary inside the Page2. Steps - Navigating to Page2 - Loading state on Suspense - Error occurred on suspense query - Rendered Fallback on error boundary - Inside fallback we automatically navigate to Page1 - on Fallback unmount, we reset error boundary and query - when navigate on Page2 again the query is not re executed Code sandbox provided. https://codesandbox.io/p/sandbox/infallible-worker-kx3f84?file=%2Fsrc%2FApp.js

25 Replies

optimistic-gold•3y ago

what we do is use resetKeys from react-error-boundary to reset the error boundary every time the path changes. The reset in an effect unmount doesn't work, timing wise something like:

const { asPath } = useRouter()
const { reset } = useQueryErrorResetBoundary()
return <ReactErrorBoundary
    onReset={reset}
    FallbackComponent={FallbackComponent}
    onResetKeysChange={reset}
    resetKeys={[asPath]}
>
    {children}
</ReactErrorBoundary>

const { asPath } = useRouter()
const { reset } = useQueryErrorResetBoundary()
return <ReactErrorBoundary
    onReset={reset}
    FallbackComponent={FallbackComponent}
    onResetKeysChange={reset}
    resetKeys={[asPath]}
>
    {children}
</ReactErrorBoundary>

additionally, our error boundary has a button that can also perform the reset imperatively. But it didn't work with a useEffect because I think the effect runs too late for the error boundary

like-goldOP•3y ago

Hmm interesting! I did the changes you are mentioning. I used location.pathname as resetKeys but onReset callback never called. I did the changes on codesandbox in orde to see this live. @TkDodo 🔮

optimistic-gold•3y ago

but onReset callback never called

because it will call onResetKeysChange instead of onReset. Not sure why react-error-boundary has different callbacks for that in the first place 🤷‍♂️

foreign-sapphire•3y ago

will the page always break on error. cuz on the sandbox navigating to the error page breaks the page rather than rendering the error from the boundary?

like-goldOP•3y ago

React error boundary api changed. There is no onResetKeysChange anymore, just onReset that provides a reason when executed. I tried onResetKeysChange, neither this is called. Thats why i used onReset and check the reason to be keys I am not sure to be honest.

foreign-sapphire•3y ago

ohh my😑 , i thought my code was wrong i kept refactoring, had to delete it all. Spent the whole of yesterday configuring the error boundary with next.js will be in this thread if you find a solution. Thanks🙌

like-goldOP•3y ago

@TkDodo 🔮

optimistic-gold•3y ago

your code works fine in a new tab: https://kx3f84.csb.app/ I think the embedeed browser of codesandbox doesn't change the pathname ?

like-goldOP•3y ago

Maybe I have created a misunderstanding and apologize for that. The question is why the query is not executed when we navigate again on the error page. Steps: 1. Load page 2. Navigate to error page, (see console that query executed) 3. Navigate to home page 4. Navigate again on error page 5. We should see on console that the query is executed again But we can not. The question is why the query is not executed again. Some how is not reseted on the from react query. @TkDodo 🔮 Sorry again for any misunderstanding!

optimistic-gold•3y ago

is step 3 clicking the "navigate" button or clicking the "goto home" button? Why are there even two buttons? Please be precice in steps to reproduce ... but I think the issue is again that the ErrorBoundary umounts, because it only spans the Error Page. What you'd want is an error boundary that spans both pages like this: https://codesandbox.io/p/sandbox/stupefied-williams-tqh3f5

like-goldOP•3y ago

I have improved the example. 1. Load page 2. Navigate to error page (see console that query executed) 3. You will navigated automatically on Home page 4. Navigate again on error page. 5. You SHOULD see that the query has been executed on console. But you dont.

optimistic-gold•3y ago

Did you see my fix where I moved up the error boundary?

like-goldOP•3y ago

Yes sure!

optimistic-gold•3y ago

If you want to automatically navigate, why do you need error an error boundary in this case? if you navigate automatically inside the error fallback, that effect should probably also re-set the boundary:

  useEffect(() => {
    reset() // this is missing
    navigate("/home");
  }, [navigate, reset]);

  useEffect(() => {
    reset() // this is missing
    navigate("/home");
  }, [navigate, reset]);

but the use-case beats me 🤷‍♂️ if there are certain conditions where you want to redirect, you can also conditionally use error boundaries by providing a function for it. anyways, I can't change the fact that reset must be called somewhere, and an effect cleanup is too late. I've shown a lot for workarounds for the problem, and the root cause is always the same. So please pick one of the solutions, or, idk, "it's not possible", sorry .

like-goldOP•3y ago

"you can also conditionally use error boundaries by providing a function for it" what do you mean by that? How could I redirect without the error boundary catch?

optimistic-gold•3y ago

useErrorBoundary: (query) => ...

useErrorBoundary: (query) => ...

like-goldOP•3y ago

On version 5 and useSuspenseQuery this is not doable! 🙂

optimistic-gold•3y ago

oh right, this is only for non suspense queries ... hmmm so then I guess the manual reset before navigate() is the best option?

like-goldOP•3y ago

Unfortunately this does not work! reset() before navigate does not take any effect at the end

optimistic-gold•3y ago

can you check if this is the same error as this? https://github.com/TanStack/query/issues/2712

GitHub

Errored queries caught by ErrorBoundary are not retried on mount · ...

Describe the bug I'm using Suspense and ErrorBoundaries and I'm seeing unexpected behavior when queries are erroring. If a query errors I'm displaying an ErrorBoundary for that part of ...

optimistic-gold•3y ago

ah, I see you're already in that discussion yeah so again, the issue is open for a reason: I don't know the answer 🙂 feel free to dig in and let me know what you find

like-goldOP•3y ago

Ok. Thank you for your time. I will make a try. Thank you again !!!

optimistic-gold•3y ago

I left a larger comment on the issue itself

like-goldOP•2y ago

Yes yes, I have seen that!!

foreign-sapphire•2y ago

seems there was no solution to using error boundaries. A workaround on how to handle errors on RSC would be appreciated

Gaming

Programming

Error boundary does not seem to reset suspense query properly when leaving the page with the error.

Did you find this page helpful?