How to manage errors on vue - vue.js

Question

i'm not sure on how to handle errors and global errors in vue. It's not specifically about the code, it is about the logic.
What i mean is, at the moment i placed a global error handler in the vue, something like:
app.config.errorHandler = function (err, vm, info) {
notyf.error(
"Something went wrong. Please try again."
);
}
with this, every error that propagates up to the root will be shown to the user with a small popup.
This works great for unexpected errors.
What confuses me is how should i manage "expected fails", let me give you an example:
Let's take the standard "refreshToken" method that takes care of the jwt token refresh when it is expired.
So, to manage this i'll make an interceptor in the axios client, so that every time i get a 401, i'll try to refresh:
if everything works fine
i'll proceed with the request
otherwise
i'll redirect to the login.
So the simplified code should be something like:
api.interceptors.response.use(
async res => {
return res;
}
,
async err => {
const originalRequest = err.config;
if (err.response.status === 401) {
if (session.accessToken && !isRefreshing) {
isRefreshing = true;
const tokenRefreshed = await tryRefreshToken(api, session);
if (tokenRefreshed === true) {
isRefreshing = false;
return api(originalRequest);
}
else {
router.push({ name: 'auth-login' }); <---------------------------
return Promise.reject("Unable to refresh token. Need login."); <-----------
}
}
}
else {
return Promise.reject(err);
}
},
)
Now, looking at the arrows, once i see that i'm unable to refresh i redirect the user, and from a logical point of view, this means that i've "managed" the problem. But since i'm in a async method i've to return a rejected promise, that clearly propagates upward until it hit the global error handler and gets finally managed.
This looks strange to me because global handler should be hit only by "unexpected" exception, not from things that i've already managed.
Looking at the logical hirerarchy here we can see:
level-1 app ( where the global handler resides )
level-2 page component ( user.vue )
level-3 page method ( saveUser(user) )
level-4 module method ( userService.updateUser(user) )
level-5 axios method ( axios.patch(....) )
level-6 axios.interceptor
level-7 tryRefreshToken method
What's the correct way to "manage" this situation?
From my point of view redirecting the user to the login page because it wansn't able to refresh the token means that i've managed the problem, but i totally understand that i've a chain of methods waiting a promise response ( that must be fullfilled )
The solutions i came up with are:
SOLUTION 1)
At level 7 reject passing a particular standard error "unable to refresh token"
At level 3 wrap the await saveUser(user) in a try catch and in case of "unable to refresh error" manage the redirect there.
This should totally work but what does it mean? That every single time i've an axios call i've to manage a potential "unable to refresh error", this seems tremendously wrong.
SOLUTION 2)
At level 7 reject passing a particular standard error "unable to refresh token"
At level 1, in the global handler, perform a switch case and in case of "unable to refresh error" manage the redirect there.
This should totally work too, but why should i manage a problem so far away from where it manifested? ( It manifested in the level-7 and i'm actually managing it at level 1 ).
From my point of view the global handler should manage only unamanaged errors and errors should be taken care as soon as possible ( so at level 7 in this example ).
SOLUTION 3) ( i don't know how to implement it )
At level 7 i manage the problem ( like i'm doing ) and then i find a way to "abort" the whole upward chain so that, on the redirect everything waiting is aborted.
This looks "kind of logically correct" but i'm not sure it really is and i don't know how to do that.
Do you have any suggestion or consideration on the matter?
Someone can help me understand better how to proceed?
Thank you very much in advance
Have a nice day