onError global guard doesn't seem to catch all the errors

[AnnaYuS]

I've noticed a problem with onError guard. The errors thrown in beforeEnter aren't always caught in global onError. If we go directly to the route (via a router link) then we don't get an error in the browser console, but if we use router.push the error isn't caught.
https://stackblitz.com/edit/vue3-vite-router-typescript-starter-fyt8sr?file=src%2Frouter.ts

Screen.Recording.2024-01-05.at.17.57.33.mov

I'm not sure if this is a bug or just that the errors aren't supposed to be thrown/handled this way in vue router.
Maybe someone could share best practices for error handling in vue router?

[posva]

The onError triggers both times (you have 2 logs of it). You see the red log from the router.push() which will also reject the promise it returns but router-links cannot be caught so it catches the internal call of router.push() it does

[AnnaYuS]

Thanks for your reply. You're right, the onError logs the error both times. I should have explained the problem better.
Could you suggest what can be done to avoid the red log in the browser console when router.push() is used? Doing something like

router.push({ name: 'Contact' }).catch((error) => ({ path: '/' }))

each time doesn't seem practical. The thing is these errors that are handled in onError but still thrown as unhandled when router.push is used are caught by sentry in our project, and we'd like to avoid them. Is it possible to have the same behaviour for router.push as router link has?

[posva]

I think you do not mean to throw an Error in that case as that is for unexpected errors and it is meant to be caught by things like sentry.
That being said you could always create your custom push function that always adds a catch() at the end

[yakobe]

@posva Thanks for the info!

Is there a way to "handle" errors in the onError to stop them propagating to sentry?

Eg. If we make an axios request in a route's beforeEnter guard and it fails with a 403 error. We then use the global onError handler to inspect the error and push to an "Access Denied" page. Something like this:

router.onError(async (error, to: RouteLocationNormalized) => {

  const statusCode = axios.isAxiosError(error) ? error.response?.status : undefined
  if (statusCode === StatusCodes.FORBIDDEN) {
    // Here the error is sexpected so we want to mark as "handled" and not go to sentry
    await router.push(createErrorLocation(to, StatusCodes.FORBIDDEN))
    return
  }

  // Here the error was unexpected so we want it to go to sentry
  await router.push(createErrorLocation(to))
})

Or is this just the wrong place to redirect for known 403 errors like that and the error handler is only for errors that are completely unhandled. If so.... is there somewhere else in the routing to handle them? Or do we have to catch every single axios 403 while data fetching in beforeEnter and redirect directly?

[posva]

Since that error is expected, I would handle it inside the beforeEnter, wrapping the code to avoid repetition in a function. In the navigation guard, I would return the new location to trigger a proper redirect: return createErrorLocation(...)

Note that depending of where the router.push() is made, it will propagate to app.config.errorHnadler()

[yakobe]

Thanks for the definitive answer @posva! I think for now we will try to handle the errors in place (i.e. where we make the fetch in the beforeEnter guard) and maybe create a helper function like you say.

However, it is a bit inconsistent that I get an handled error in the global onError guard if I click a router-link, but an unhandled error if i do a router.push(). Perhaps it should be made more consistent so that the same arrives at the global onError guard?

It would also be nice if it was possible to actually "handle" the error in the onError guard so that it does not propagate. At the moment the handler parameter it accept can only process it and not prevent propagation to app.config.errorHandler(). This would be very useful because we could handle known error types but still get notified of errors that are unexpected.

[posva]

However, it is a bit inconsistent that I get an handled error in the global onError guard if I click a router-link, but an unhandled error if i do a router.push(). Perhaps it should be made more consistent so that the same arrives at the global onError guard?

Not at all: the RouterLink does the handling of the error by catching it and doing nothing. There is no way to handle the error from the dev POV, so it has to catch it. They are just different cases, so they behave differently.

It would also be nice if it was possible to actually "handle" the error in the onError guard so that it does not propagate.

It might seem like a good idea but adding a global handler that allows to completely strip away the rejection of local router.push() would break 3rd party plugin that relies on the behavior.

In short, the current behavior is the most flexible one. Handling errors globally breaks 3rd party plugins.