afraid-scarlet

onCatch not getting fired if no errorComponent is present on a route

I have an errorComponent defined at _root level which acts as a fallback "catch-all-errors" component. An inner route that doesn't expose any error components is throwing an error via tanstack-query's throwOnError: I'd like to use the onCatch method to evaluate the error and eventually clear any invalid search parameters. However, the method doesn't get fired unless there's an errorComponent defined on that route, so I'm stuck going back all the way the fallback on __root and cannot access the route's onCatch method. Is this the expected behaviour, or should the onCatch method get fired anyway?

18 Replies

fair-rose•12mo ago

can you please provide a minimal complete example by forking one of the existing examples on stackblitz?

afraid-scarletOP•12mo ago

https://stackblitz.com/edit/github-k9fcly?file=src%2Froutes%2Fabout.tsx There's an errorComponent in __root, while /about throws an error (and tries to log it via onCatch, unsuccesfully)

fair-rose•12mo ago

so yeah currently there is the necessity to have an errorcomponent defined we could make it so that "if routeOnCatch is defined OR errorComponent is defined" however, which error component should be rendered then? btw if you define a defaultErrorComponent this will be used as a fallback in the component if no errorComponent is defined

afraid-scarletOP•12mo ago

I guess the lowest one down the tree? One could use onCatch for stuff like more granular error reporting via anlytics and such

fair-rose•12mo ago

we currently do not inherit errorComponents so its either the route's errorComponent or defaultErrorcomponent or none, if neither is set then it bubbles up

afraid-scarletOP•12mo ago

btw if you define a defaultErrorComponent this will be used as a fallback in the component if no errorComponent is defined

I am aware, but that makes the errorComponent creep into routes where I don't want any, so I'm manually setting it in all routes that require it (and fallback to the __root one inc ase) Makes sense, this means that the onCatch method only gets fired if an errorComponent is present to prevent it from bubbling up

fair-rose•12mo ago

yes

afraid-scarletOP•12mo ago

I can work around this, it actually makes sense. However, it looks like redirect() doesn't work in the onCatch method (which is the only way I can clear up search paramethers iirc), this is expected too right?

fair-rose•12mo ago

so you want to throw a redirect in onCatch?

afraid-scarletOP•12mo ago

yeah: I'm parsing the query error, which could originate from an invalid/unauthorized search param and I'm trying to silently clear it up without showing errors Well, looks like doing something like this makes the trick

  errorComponent: function Comp({ error }) {

    const navigate = useNavigate()

    // Error parsing logic...
    // [...]

    return navigate({
      to: "/items",
      search: {}
    })
  }

  errorComponent: function Comp({ error }) {

    const navigate = useNavigate()

    // Error parsing logic...
    // [...]

    return navigate({
      to: "/items",
      search: {}
    })
  }

I just wanted to handle it fully within the router and not via a react component, but at least there's a viable alternative. Looks like for now, redirect only work reliably when invoked in beforeLoad/loader

fair-rose•12mo ago

when you say you want to "clear search params" why can't you do this in validateSearch?

afraid-scarletOP•12mo ago

Can validateSearch perform async operations?

fair-rose•12mo ago

afraid-scarletOP•12mo ago

well then no: i have a uuid as search params that identifies a remote resource, so until I get a response back I can't know if it's really valid or not. I could do it in the loaders, but then that means I'm forced to show the loading component doesn't it?

fair-rose•12mo ago

so you are doing "not found" error handling really?

I'm forced to show the loading component

depends, you can configure after which time the loading component is shown

afraid-scarletOP•12mo ago

bascially yeah, if the resource isn't found I'm throwing an error. The absence of the parameter should always end up in an errorless route (if any error happens we fall back to the error component at __root, hence why I want to validate the error when it happens: there's no notFound/errorComponent really meant for this route, either silently clear the params or something's really wrong)

fair-rose•12mo ago

so yes I think you should do this in loader then

afraid-scarletOP•12mo ago

depends, you can configure after which time the loading component is shown

You're right: I probably need to figure a better way to manage in loader where it's easier to clean stuff up thanks for helping claryfing this situation 🙏

Gaming

Programming

onCatch not getting fired if no errorComponent is present on a route

Did you find this page helpful?