Axios-module: Failed requests break SSR even if they are handled

[megapctr]

I have a nuxt app with a onResponseError handler for handling exceptions.

The handler works great in client mode:

But in server mode (SSR) the entire render breaks if a request fails:

...even though my handler is being called correctly in SSR:

I think that SSR should render a page with the alert, just like in the client mode. Am I doing something wrong?

_{This question is available on Nuxt community (#c170)}

[cmty[bot]]

This issue as been imported as question since it does not respect axios-module issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/axios-module/issues/c170.

[megapctr]

Hey @pi0 I think it's a bug and not a question

[pi0]

Hey @megapctr. Actually, it is not a bug for this module and to be honest something expected with the current version of nuxt. Any thrown error in AsyncData/Fetch/Plugins/NuxtServerInit will cause SSR errors. We can improve it for sure.

One possible application-wide solution would be returning a fallback value in onResponseError handler: (Not tested but should work)

onResponseError() {
 // ...
 return Promise.resolve({ error: true })
}

The better idea would be to handle them inside asyncData:

async asyncData({ app }) {
   const something = await app.$axios.$get('...')
    .catch(() => Promise.resolve({ error: true }))

// something === { error: true } in case of any error

[megapctr]

Thanks! Turns out the fix is even simpler, at least in my case:

 export default function({ $axios, store }) {
-  $axios.onResponseError(e => {
+  $axios.onResponseError(async e => {
     const { status, data } = e.response

😁

[pi0]

@megacpr Your welcome and happy your problem is resolved. Please also note that in case of error, e.response is not always defined.