Nuxtjs dépasse la taille maximale de la pile d'appels en mode développement et obtient l'erreur de serveur 500 en production au lieu de ma page d'erreur personnalisée lorsqu'une URL non valide est saisie

Question

Lorsque je saisis une URL qui n'existe pas, j'obtiens parfois une erreur personnalisée et la plupart du temps une erreur de serveur (image)

Voici ma page error.vue

<template>
  <div class="page d'erreur">
    <div class="page-not-found" v-if="error.statusCode === 404">
      <div class="image">
        <img src="/images/page-not-found.png" alt="page introuvable">
      </div>
      <h1 class="text-capitalize font-weight-bold">
        {{ $t('notFound.error404') }}
      </h1>
      <p class="info mon-3 mon-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"
      {{ $t('notFound.error500') }}
    </h1>
    <NuxtLink class="home-back text-capitalize mb-lg-3" :to="localePath('/')">
    {{ $t('notFound.home') }}
    </NuxtLink>
  </div>

</modèle>

<script>
exporter par défaut {
  accessoires : ['erreur']
}
</script>

<style lang="scss"
//supprimé pour minimiser le code
</style>

Remarque : 1- trrrrr est juste une chaîne aléatoire que j'ai écrite dans l'URL pour démontrer une URL inexistante. 2- En mode développement, j'obtiens parfois une erreur 404 personnalisée, la plupart du temps j'obtiens une erreur Taille maximale de la pile d'appels renvoyée

Ma configuration PWA :

pwa : {
    méta : {
      titre : "exemple",
      auteur : "exemple",
    },
    icône : {objectif : "n'importe lequel" },
    manifeste: {
      affichage : "autonome",
      nom : "exemple",
      langue : "fr",
      useWebmanifestExtension : vrai,
      theme_color : "#01bac6",
    },
  },
Mes questions sont les suivantes : 1-Pourquoi ma page d'erreur personnalisée ne fonctionne-t-elle toujours pas ? 
2- Pourquoi l'erreur de code est-elle 500 alors qu'elle devrait être 404 car je suis sur une page qui n'existe pas ? 
            

Answer 1

Enfin j'ai trouvé la source du problème, c'est ainsi que j'attrape l'erreur lorsque la demande n'est pas satisfaite

Comment le problème survient :

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
    }

Changez-le par :

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

Je ne sais toujours pas pourquoi ce problème se produit