Nuxt layouts/error.vue does not work in production build the way it does in development

Question

Referencing the docs, i added layouts/error.vue for a page handling errors. Testing this in development (npm run dev), everything works as expected. But when I do npm run build and then npm start, The error page is not rendered when i test throwing an exception in production.

I'm using SSR but I don't see anything in the docs that suggest layouts/error.vue wont work for SSR or universal sites. There is a similar issue reported. The person made a work around for their use case. But the issue (Main error handler is ignored and exception ends up logged to console instead of rendering error page) was not resolved.

In development the error page is shown if I throw a test error with throw new Error() on button click. But in production, the error just goes to console and the error page is not rendered. The only way i can make it work in production without changing a lot of other code is to set debug: true in nuxt.config.js.

Also note that error.vue works perfectly in production too for 404 pages. But it doesn't work like it does in development if I throw new Error in a production build from a component.

You can easily reproduce this by generating a new nuxt app with npm create nuxt-app <app name> . Here are the settings I choose:

Add the following to layouts/error.vue:

<template>
  <div>
    <h1>You are in layouts/error.vue</h1>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <pre v-if="error.statusCode !== 404">{{ error }}</pre>
    <nuxt-link to="/">Click to visit Home page</nuxt-link>
  </div>
</template>

<script>
export default {
  props: {
    error: {
      type: [Object, Error],
      default: () => {},
    },
  },
  layout: 'blog', // you can set a custom layout for the error page
}
</script>

Then add <button @click="throwE">Click to throw error</button> to components/Logo.vue and add the following script to the page:

<script>
export default {
  methods: {
    throwE() {
      throw new Error('Error thrown by button click')
    },
  },
}
</script>

Click the button in development, and it works as expected. Click the button in production and error.vue is not rendered.

Are the docs wrong? Is this a bug? Why does error.vue work as expected while in development but not in production build when throwing a error?

Hi, what is your production environment exactly? Is it Github Pages, Netlify, a pretty classic server? I'm asking because the first two could have their own way of handling 404 errors (not sure though) — Bruno Martins, Sep 07 '20 at 08:11
I'm experiencing the same. the only way I got it to work the same both in dev and prod, was to use this.$nuxt.error({ message: 'Error' }) instead of throw new Error('Error') — ramigs, Nov 14 '20 at 12:45

score 0 · Answer 1 · answered May 29 '22 at 12:44

If you want to force any feature to launch a Nuxt error, you need to call the error function. This function is available in the nuxt context.

(Example from doc)

export default {
  async asyncData({ params, $http, error }) {
    const id = params.id

    try {
      // Using the nuxtjs/http module here exposed via context.app
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${id}`)
      return { post }
    } catch (e) {
      error(e) // Show the nuxt error page with the thrown error
    }
  }
}

Doc: https://nuxtjs.org/docs/concepts/context-helpers/#using-page-parameters-for-your-api-query

Then if your app is universal (target = 'static') you must set into nuxt.config.file the fallback for your error page: