當輸入無效 URL 時，Nuxtjs 在開發模式下超出了最大呼叫堆疊大小，並且在生產中出現伺服器錯誤 500，而不是我的自訂錯誤頁面

Question

當我輸入不存在的 URL 時，有時會收到自訂錯誤，大多數情況下會收到伺服器錯誤（圖片）

這是我的 error.vue 頁：

<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>

注意：1- trrrrr 只是我在 URL 中寫入的隨機字串，用於演示不存在的 URL 2-在開發模式下，有時我會收到自訂的404 錯誤，大多數時候我會收到Maximum call stack size returned 錯誤（圖片）

我的 PWA 設定：

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

我的問題是：1-為什麼我的自訂錯誤頁面始終不起作用？

2- 為什麼程式碼錯誤 500，而應該是 404，因為我進入了一個不存在的頁面？

Answer 1

最後，我找到了問題的根源，這是我在請求未滿足時捕獲錯誤的方式

問題產生方式：

#

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
    }

將其更改為：

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
      })
  },

來源：https://github.com/nuxt/nuxt .js/issues/6294#issuecomment-526902792

#我還是不知道為什麼會出現這個問題