Nuxt.js: Error page not work on Nuxt Server Error

[retep0214]

Version

2.4.0

Reproduction link

http://localhost:3000

Steps to reproduce

1) Create the layout/error.vue
2) Create the page which will call Axios via Vuex
3) When calling API via Axios, the API return 404/500

What is expected ?

The error will pass to the custom Error page.

What is actually happening?

If user use nuxt-router to change the page (not SSR), the custom error page shown.
But if I refresh and view the SSR Page. The NuxtServerError Page will be shown in dev mode (yarn dev) and the default Server Error page when yarn start.

Additional comments?

Here is my Axios Helper

import axios from 'axios'
const myAxios = axios.create({
  headers: { 'Accept': 'application/json' }
})

myAxios.interceptors.response.use((response) => {
  return response
}, (error) => {

  const { response } = error
  const { status, statusText } = response
  if (process.client) {
    $nuxt.error({ message: statusText, statusCode: status })
  } else {
    // Any solution can access the $nuxt here?
  }
  return Promise.reject(error)
})

export default myAxios

The page

import myAxios from 'PATH/TO/THIS/HELPER'
..
...
..

myAxios.get('http://example.com')

_{This bug report is available on Nuxt community (#c9332)}

[manniL]

Any reason you don't use https://github.com/nuxt-community/axios-module/ together with a nuxt plugin, where you have access to the context as well? :thinking:

[retep0214]

@manniL Hi, Thanks for reply. My main problem is the custom error page not work when serverside rendering, so I choose the $nuxt.error() to force redirect to errorpage.

I can use the axios module with nuxt plugin to fix this problem in this case. But in other files such as Vuex , the action cannot use the nuxt in server side too. the this.$nuxt will be undefined when server side rendering. If I use throw error, it will show the default NuxtServerError page.

So I want to know is there any functions can redirect to custom error page or override the default server error page.

@/store/item.js

export const actions = {
  fetchItems: async ({ commit }) => {
    const items = await myAxois.get('myAPI")
    if(items.data.title =='deleted'){
        commit('setItems', items.data) 
    }else{
        this.$nuxt.error("deleted Post")..... // Redirect to error page
    }
  },
}

[husayt]

I have the same problem . How to bring custom error page if initialisation fails even before rendering layout? Also, is it possible to go to error page from plugin e.g. in case if plugin failed to initialise? I am trying all these scenarios in SPA mode and yet didn't manage to get to error page from early failure

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[barnabas-lesti]

Hi, maybe this can help?
https://github.com/nuxt/nuxt.js/issues/2120
https://blog.lichter.io/posts/change-the-nuxtjs-server-error-page/

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[janzheng]

The custom error server page (https://blog.lichter.io/posts/change-the-nuxtjs-server-error-page/) doesn't seem to work for something like Zeit Now, as they just send a "Nuxt.js Internal server error" without seemingly any easy to customize the error, rather than let Nuxt handle the error on its own.

[Ed-ouard]

Solved by adding an .htaccess file, in the root folder, with this code :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>

Maybe it can help. :)

[unr]

Has anyone managed to get this working again, specifically on Zeit Now?