nuxt3中出错时的常用处理方式
nuxt3是一个全栈框架，所以项目中错误产生的来源也会有多个地方。
错误产生的地方。
总的来说，错误主要会出现在三个不同的上下文中:
1. vue渲染生命周期(SSR + SPA)中产生的错误。
你可以在onErrorCaptured中处理Vue中的错误。同时Nuxt3也提供了vue::error钩子，这种钩子会拦截所有可以传到最上层的错误。如果你正在使用一个错误上报的库或者框架，你可以将一个全局处理函数设置给vueApp.config.errorHandler,这样它就可以接收到所有的Vue错误，即使这些错误已经被处理过了。
示例:
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.config.errorHandler = (error, context) => {
// ...
}
})
2. API调用和Nitro服务中产生的错误。
目前这些地方的错误还不处理，但你可以在这些地方产生错误时显示一个错误页面。
3. 服务端和客户端启动时产生的错误(SSR + SPA)
如何在启动nuxt应用时产生了任何错误, Nuxt都会调用app:error钩子。
其中错误可能产生的地方:
- 正在执行中的插件。
-
app:created和app:beforeMount钩子中。 - 客户端挂载应用时，当然你也可以在
onErrorCaptured或者vue:error中处理此处的错误。 -
app:mounted钩子中。
显示一个错误页面。
在服务端生命周期或者渲染你的vue应用(SSR和SPA)中出现严重错误时,要么返回一个出错的json数据要么返回一个HTML错误页。
通过在项目根目录中添加一个error.vue，你可以定制化这个出错页。在这个页面中只有一个error属性。其中包含了你要处理的错误。
当你准备移除这个错误页时，你可以调用clearError函数，这个函数带有一个可选的path参数，表示你重定向的目录。
::: alertwarning
在你使用任何依赖于插件的功能(比如:$route或者useRouter)之前，确保检查下。因为当一个插件抛出错误时，如何你不调用clearError那此插件将不会再执行。
:::
示例:
<!-- error.vue -->
<template>
<button @click="handleError">Clear errors</button>
</template>
<script setup>
const props = defineProps({
error: Object
})
const handleError = () => clearError({ redirect: '/' })
</script>
错误相关的帮助函数
useError
function useError (): Ref<Error | { url, statusCode, statusMessage, message, description, data }>
这个函数将返回一个正在处理的全局nuxt 错误。
createError
function createError (err: { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error
你可以使用这个方法来创建一个包含附加元信息的错误对象，此对象可以在vue和部分nitro中使用。
如果你使用createError抛出了一个错误:
- 如果在服务端,这将会触发一个全屏的错误页，你可以调用
clearError来清除此错误。 - 如果在客户端,这将会抛出一个不太严重的错误来给你处理。如果你需要触发一个全屏的错误页，你可以设置
fatal:true。
示例:
<!-- pages/movies/[slug].vue -->
<script setup>
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}
</script>
showError
function showError (err: string | Error | { statusCode, statusMessage }): Error
你可以在客户端的任何地方调用此函数。或者在中间件插件或者setup()函数中也可以调用。这将会触发一个全屏页。
推荐使用此方法，而不是使用throw createError
clearError
function clearError (options?: { redirect?: string }): Promise<void>
此函数会清除当前处理了的nuxt 错误。
在你的应用中渲染错误。
Nuxt3也提供了一个<NuxtErrorBondary>组件。这个组件允许你处理客户端的错误，而不是进入一个错误页面。
这个组件主要负责处理在它所包含的逻辑中出现的错误。在客户端，此组件会阻止错误传递到最上层，取而代之的是渲染#error插槽。
#error插槽会将接收到的错误放在prop中，(如果你设置了error = null,这将会触发默认插槽的重新渲染， 您需要确保首先完全解决错误，否则错误槽将再次呈现。)。
::: alertinfo
如果你跳转到其它路由，那这个错误将会被自动清除。
:::
示例:
<!-- page/index.vue -->
<template>
<!-- some content -->
<NuxtErrorBoundary @error="someErrorLogger">
<!-- You use the default slot to render your content -->
<template #error="{ error }">
You can display the error locally here.
<button @click="error = null">
This will clear the error.
</button>
</template>
</NuxtErrorBoundary>
</template>
版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3中出错时的常用处理方式
