Nuxtjs が開発モードで最大コール スタック サイズを超え、無効な​​ URL が入力されると運用環境でカスタム エラー ページではなくサーバー エラー 500 が発生します

Question

存在しない URL を入力すると、カスタム エラーが発生することがありますが、ほとんどの場合はサーバー エラー (画像)

これは私の error.vue ページです:

<テンプレート>
  <div class="エラーページ">
    <div class="ページが見つかりません" v-if="error.statusCode === 404"""
      <div class="画像">
        <img src="/images/page-not-found.png" alt="ページが見つかりません">
      </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>

</テンプレート>

<スクリプト>
デフォルトのエクスポート {
  小道具: ['エラー']
}
</スクリプト>

<style lang="scss" スコープ>
// コードを最小限にするために削除されました
</style>

注: 1- trrrrr は、存在しない URL を示すために URL に書き込んだランダムな文字列です。 2- 開発モードでは、カスタム 404 エラーが発生することがありますが、ほとんどの場合、最大コール スタック サイズが返されました エラー (図) が発生します。

私の PWA 設定:

pwa: {
    メタ: {
      タイトル: 「例」、
      著者: 「例」、
    }、
    アイコン: { 目的: "任意" }、
    マニフェスト: {
      表示: 「スタンドアロン」、
      名前: "例"、
      言語: "en"、
      useWebmanifestExtension: true、
      テーマカラー: "#01bac6",
    }、
  },

私の質問は次のとおりです: 1-カスタム エラー ページが常に機能しないのはなぜですか?

2- 存在しないページを使用しているため、コード エラーは 404 であるはずなのに、なぜ 500 になるのですか?

Answer 1

ついに問題の原因が見つかりました。これが、リクエストが満たされなかったときにエラーを捕捉した方法です。

問題の発生方法:

リーリー

これを次のように変更します:

リーリー

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

なぜこの問題が発生するのかまだわかりません