title: Nuxt layouts/error.vue does not work in production build the way it does in development
body: <p>Referencing the <a href="https://nuxtjs.org/guides/directory-structure/layouts/#error-page" rel="noreferrer">docs</a>, i added <code>layouts/error.vue</code> for a page handling errors. Testing this in development (<code>npm run dev</code>), everything works as expected. But when I do <code>npm run build</code> and then <code>npm start</code>, The error page is not rendered when i test throwing an exception in production.</p>
  <p>I'm using <code>SSR</code> but I don't see anything in the docs that suggest <code>layouts/error.vue</code> wont work for <code>SSR</code> or universal sites. There is a similar <a href="https://github.com/nuxt/nuxt.js/issues/6869" rel="noreferrer">issue reported</a>. 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.</p>
  <p>In development the error page is shown if I throw a test error with <code>throw new Error()</code> 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 <code>debug: true</code> in <code>nuxt.config.js</code>.</p>
  <p>Also note that <code>error.vue</code> works perfectly in production too for 404 pages. But it doesn't work like it does in development if I <code>throw new Error</code> in a production build from a component.</p>
  <p>You can easily reproduce this by generating a new nuxt app with <code>npm create nuxt-app &lt;app name&gt;</code> . Here are the settings I choose:
  <a href="https://i.stack.imgur.com/TP2lq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TP2lq.png" alt="enter image description here" /></a></p>
  <p>Add the following to <code>layouts/error.vue</code>:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;You are in layouts/error.vue&lt;/h1&gt;
      &lt;h1 v-if=&quot;error.statusCode === 404&quot;&gt;Page not found&lt;/h1&gt;
      &lt;h1 v-else&gt;An error occurred&lt;/h1&gt;
      &lt;pre v-if=&quot;error.statusCode !== 404&quot;&gt;{{ error }}&lt;/pre&gt;
      &lt;nuxt-link to=&quot;/&quot;&gt;Click to visit Home page&lt;/nuxt-link&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      error: {
        type: [Object, Error],
        default: () =&gt; {},
      },
    },
    layout: 'blog', // you can set a custom layout for the error page
  }
  &lt;/script&gt;
  </code></pre>
  <p>Then add <code>&lt;button @click=&quot;throwE&quot;&gt;Click to throw error&lt;/button&gt;</code> to <code>components/Logo.vue</code> and add the following script to the page:</p>
  <pre><code>&lt;script&gt;
  export default {
    methods: {
      throwE() {
        throw new Error('Error thrown by button click')
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>Click the button in development, and it works as expected. Click the button in production and <code>error.vue</code> is not rendered.</p>
  <p>Are the docs wrong? Is this a bug? Why does <code>error.vue</code> work as expected while in development but not in production build when throwing a error?</p>