1. 处理Vue生命周期运行时错误
    2. 处理API或Nitro server运行时错误
    3. 处理应用启动时的错误
    4. 处理JS片断下载错误
    5. 参考

Nuxt3是一个全栈web框架,意味着运行时的错误有以下多种上下文环境:

  1. Vue渲染的生命周期过程中发生的错误
  2. API或者Nitro server生周期中发和的错误
  3. 服务端或客户端启动时发生的错误
  4. 客户端下载JS片断代码时发生的错误

处理Vue生命周期运行时错误

方法一:使用Vue的onErrorCaptured方法 components/test.vue

<template>
  <div @click="throwErrorMethod">throw an error</div>
</template>
<script setup>
const throwErrorMethod = () => {
  throw new Error('error')
}
</script>

app.vue

<template>
  <test></test>
</template>
<script setup>
onErrorCaptured(err => {
  console.log('error captured')
})
</script>

方法二:在插件中定义错误处理方法,如下:

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, context) => {
    // ...
  }
})

处理API或Nitro server运行时错误

处理应用启动时的错误

处理JS片断下载错误

由于网络连接失败或新部署(使旧的哈希JS块URL无效),您可能会遇到块加载错误。 Nuxt提供了内置支持,通过在路由导航期间块未能加载时执行硬刷新来处理块加载错误。 您可以通过将experimental.emitRouteChunkError设置为false(完全禁用钩入这些错误)或自动(如果您想要自己处理它们)来更改此行为

参考