Nuxtjs melebihi saiz tindanan panggilan maksimum dalam mod pembangunan dan mendapat ralat pelayan 500 dalam pengeluaran dan bukannya halaman ralat tersuai saya apabila URL tidak sah dimasukkan

Question

Apabila saya memasukkan URL yang tidak wujud, saya kadangkala mendapat ralat tersuai dan selalunya ralat pelayan (imej)

Ini adalah halaman error.vue

<template>
  <div class="halaman-ralat">
    <kelas div="halaman-tidak-ditemui" v-jika="error.statusCode === 404">
      <div class="imej">
        <img src="/images/page-not-found.png"
      </div>
      <h1 class="teks-huruf besar-huruf-berat-tebal">
        {{ $t('notFound.error404') }}
      </h1>
      <p class="maklumat my-3 my-lg-4">
        {{ $t('notFound.error404Info') }}
      </p>
    </div>
    <h1 class="teks-huruf besar-berat-bold" v-else-if="error.statusCode === 500">
      {{ $t('notFound.error500') }}
    </h1>
    <h1 class="teks-huruf besar-berat-tebal"
      {{ $t('notFound.error500') }}
    </h1>
    <NuxtLink class="home-back text-capitalize mb-lg-3" :to="localePath('/')">
    {{ $t('notFound.home') }}
    </NuxtLink>
  </div>

</template>

<skrip>
eksport lalai {
  prop: ['error']
}
</skrip>

<style lang="scss"
// dialih keluar untuk meminimumkan kod
</style>

Nota: 1- trrrrr hanyalah rentetan rawak yang saya tulis dalam URL untuk menunjukkan URL yang tidak wujud 2- Dalam mod pembangunan, kadangkala saya mendapat ralat 404 tersuai, kebanyakan masa saya mendapat Saiz tindanan panggilan maksimum dikembalikan

Konfigurasi PWA saya:

pwa: {
    meta: {
      tajuk: "contoh",
      pengarang: "contoh",
    },
    ikon: { tujuan: "mana-mana"
    nyata: {
      paparan: "berdiri sendiri",
      nama: "contoh",
      lang: "ms",
      gunakanWebmanifestExtension: benar,
      warna_tema: "#01bac6",
    },
  },

Soalan saya ialah: 1-Mengapa halaman ralat tersuai saya sentiasa tidak berfungsi?

2- Mengapakah ralat kod 500 sedangkan ia sepatutnya 404 kerana saya berada di halaman yang tidak wujud?

Answer 1

Akhirnya saya jumpa punca masalah, beginilah cara saya menangkap ralat apabila permintaan tidak dipenuhi

Bagaimana masalah berlaku:

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
    }

Tukar kepada:

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

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

Saya masih tidak tahu kenapa masalah ini berlaku