In an app I'm working on, we're frequently but inconsistently getting a very ugly NuxtServerError on our dev server.
This NuxtServerError has status code 500, but the error message says it's a 401 error.
The stack trace shows only a single frame, which is totally unhelpful (see screenshot).
Clearing the Local Storage, Session Storage & Cookies gets rid of this error, only for it to re-occur at another time.
As I'm not sure what might be causing this issue, I struggle to reproduce it, let alone find a way to fix it.
We already defined an onError callback in the axios plugin that catches 401 errors, but that one doesn't seem to be caught here... perhaps because it happens before the plugin is loaded?
Again, Nuxt is really, really not helpful in allowing us to figure out the cause!
export default ({ $axios, nuxtState, app }) => {
let logoutPage;
if (process.client) {
$axios.setBaseURL(nuxtState.env.API_URL);
logoutPage = `https://${nuxtState.env.AUTH0_DOMAIN}/v2/logout`;
}
$axios.onError((e) => {
if ([401, 403].includes(parseInt(e.response && e.response.status, 10))) {
return app.$auth.logout().then(() => {
if (process.client) {
// Use JSON.parse(atob(feedback)) to decode on login page
const returnTo = `${window.location.origin}/login?feedback=${btoa(JSON.stringify({
error: e.response.status,
error_description: 'Session expired. Please log in again to acces the portal.',
}))}`;
window.location = `${logoutPage}?returnTo=${returnTo}`;
}
});
}
return Promise.reject(e);
});
};
