Nuxtjs exceeds maximum call stack size in development mode and get server error 500 in production instead of my custom error page when an invalid URL is entered

Question

When I enter a URL that does not exist, I sometimes get a custom error and most of the time a server error (image)

This is my error.vue page:

<template>
  <div class="error-page">
    <div class="page-not-found" v-if="error.statusCode === 404">
      <div class="image">
        <img src="/images/page-not-found.png" alt="page not found">
      </div>
      <h1 class="text-capitalize font-weight-bold">
        {{ $t('notFound.error404') }}
      </h1>
      <p class="info my-3 my-lg-4">
        {{ $t('notFound.error404Info') }}
      </p>
    </div>
    <h1 class="text-capitalize font-weight-bold" v-else-if="error.statusCode === 500">
      {{ $t('notFound.error500') }}
    </h1>
    <h1 class="text-capitalize font-weight-bold" v-else>
      {{ $t('notFound.error500') }}
    </h1>
    <NuxtLink class="home-back text-capitalize mb-lg-3" :to="localePath('/')">
    {{ $t('notFound.home') }}
    </NuxtLink>
  </div>

</template>

<script>
export default {
  props: ['error']
}
</script>

<style lang="scss" scoped>
//removed to minimize the code
</style>

Note: 1- trrrrr is just a random string I wrote in the URL to demonstrate a non-existent URL 2- In development mode, sometimes I get a custom 404 error, most of the time I get a Maximum call stack size returned error (picture)

My PWA configuration:

pwa: {
    meta: {
      title: "example",
      author: "example",
    },
    icon: { purpose: "any" },
    manifest: {
      display: "standalone",
      name: "example",
      lang: "en",
      useWebmanifestExtension: true,
      theme_color: "#01bac6",
    },
  },

My questions are: 1-Why does my custom error page always not work?

2- Why is the code error 500 when it should be 404 because I'm on a page that doesn't exist?

Answer 1

Finally I found the source of the problem, this is how I caught the error when the request was not fulfilled

How the problem occurs:

asyncData(context) {
        return context.app.$api.fetchSinglePage(context.params.slug)
        .then(response => {
            return {
                page: response.content
            }
        })
        .catch(e => context.error(e)) //This line causes the problem
    }

Change it to:

asyncData(context) {
    return context.app.$api.fetchSinglePage(context.params.slug)
      .then(response => {
        return {
          page: response.content
        }
      })
      .catch(e =>{
        context.error({ statusCode: 404 }) //this is how I solved it
      })
  },

Source: https://github.com/nuxt/nuxt .js/issues/6294#issuecomment-526902792

I still don’t know why this problem occurs