Nuxt.js: how to catch nuxt error like this

[lemonpigpig]

first i do not know why have such error really , it look like a timeout, i guess may a error at nuxt server render, is right ?
second there a way to catch such error and show a my own friendly page , need help thx

_{This question is available on Nuxt.js community (#c1151)}

[f15gdsy]

I have the same problem.
I found that customize error layout won't work.
At least having a way to customize this pink error page would help.

[awronski]

I do this in catch, something like this. (I call axios from the store, but you can call it directly if you like).

    fetch ({ store, params, error }) {

      const {lessonId, page = 0, keywords = 0 } = params

      return store.dispatch('changePageTo', { page, keywords })
        .then(store.dispatch('changeLessonTo', lessonId))
        .catch(function (reason) {
          error({ statusCode: 500, message: reason })
        })
    },

[shyamchandranmec]

@pi0 I think there should be a way to handle this globally. Adding this in all the pages is a redundancy.
Is there a way to forward any such unexpected errors to custom error page?

[awronski]

@pi0 could we do something to handle it in axios-module? Maybe some default interceptor with option to overwrite its behavior.

What do you think?

[pi0]

Hi. If you take a look at new axios module docs, we now have an option to specify error page for specific error codes (possibly for timeouts too) (more).@awronski If you think that won't fit for all cases, whats your idea adding another option like requestInterceptor but for responseInterceptor?

[awronski]

@pi0 yes, I was thinking about response interceptor but first I will look at the default solution. Maybe it will be enough. I will let you know tomorrow.

[shyamchandranmec]

Hi
I don't think handling it in axios is the right way.
Axios will be used for other ajax calls along with api calls for ssr. So showing an error page by adding an interceptor in axios might raise other issues. We will have to differentiate between normal api calls and api calls used in fetch() or asyncData() methods.

[awronski]

@shyamchandranmec you can catch errors in the interceptor only for client side calls.
Do you have any other solution?

[shyamchandranmec]

@awronski I am able to catch the server side error by using axios response interceptors.
Right now I am handling this by using a try {} catch {} block and throwing the error to the asyncData and fetch functions. This will show the default error layout page whenever there is an error

But this looks like a redundant code.
We might need to add some new functionality in nuxt.js to generalise this.

[pi0]

Custom error handler is now possible with axios module version 4.0.0 🎉

https://github.com/nuxt-community/axios-module#errorhandler

[awronski]

@pi0 is it possible to get nuxt context inside errorHandler ?

[pi0]

@awronski . Sure (this is the context!)

[hackuun]

@awronski God bless you! :smile:

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.