Nuxt 是一个全栈框架，这意味着存在多种不可避免的用户运行时错误来源，这些错误可能发生在不同的上下文中
server/ 目录）您可以使用以下方式挂钩 Vue 错误onErrorCaptured.
此外，Nuxt 提供了一个 vue:error 钩子，如果任何错误传播到顶层，它将被调用。
如果您正在使用错误报告框架，您可以通过以下方式提供全局处理程序vueApp.config.errorHandler。它将接收所有 Vue 错误，即使它们已被处理。
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
// handle error, e.g. report to a service
}
// Also possible
nuxtApp.hook('vue:error', (error, instance, info) => {
// handle error, e.g. report to a service
})
})
vue:error 钩子基于onErrorCaptured生命周期钩子。如果启动 Nuxt 应用程序时出现任何错误，Nuxt 将调用 app:error 钩子。
这包括
app:created 和 app:beforeMount 钩子onErrorCaptured 或 vue:error 处理这种情况app:mounted 钩子目前您无法为这些错误定义服务器端处理程序，但可以渲染错误页面，请参阅渲染错误页面部分。
您可能会遇到由于网络连接失败或新部署（使旧的、哈希过的 JS 块 URL 失效）导致的块加载错误。Nuxt 提供内置支持，可在路由导航期间加载块失败时执行硬重新加载，从而处理块加载错误。
您可以将此行为更改为 experimental.emitRouteChunkError 设置为 false（完全禁用这些错误的挂钩）或 manual，如果您想自己处理它们。如果您想手动处理块加载错误，您可以查看自动实现获取灵感。
fatal: true 创建的错误）时，它将渲染 JSON 响应（如果请求带有 Accept: application/json 标头）或触发全屏错误页面。服务器生命周期中可能会发生错误，当
在客户端也可能发生，当
app:beforeMount 钩子）onErrorCaptured 或 vue:error 钩子处理，则在挂载应用程序时app:mounted）。通过在应用程序的源目录中添加 ~/error.vue 来定制默认错误页面，与 app.vue 并列。
<script setup lang="ts">
import type { NuxtError } from '#app'
const props = defineProps({
error: Object as () => NuxtError,
})
const handleError = () => clearError({ redirect: '/' })
</script>
<template>
<div>
<h2>{{ error?.statusCode }}</h2>
<button @click="handleError">
Clear errors
</button>
</div>
</template>
对于自定义错误，我们强烈建议使用 onErrorCaptured 可组合项，它可以在页面/组件设置函数中调用，或者使用 vue:error 运行时 nuxt 钩子，它可以在 nuxt 插件中配置。
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.hook('vue:error', (err) => {
//
})
})
当您准备删除错误页面时，您可以调用 clearError 辅助函数，该函数接受一个可选的重定向路径（例如，如果您想导航到“安全”页面）。
$route 或 useRouter）之前，请务必检查，因为如果插件抛出错误，那么它将不会重新运行，直到您清除错误。useError 来检查是否正在处理错误。useErrorfunction useError (): Ref<Error | { url, statusCode, statusMessage, message, description, data }>
此函数将返回正在处理的全局 Nuxt 错误。
createErrorfunction createError (err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error
创建带有附加元数据的错误对象。您可以传递一个字符串作为错误 message，或一个包含错误属性的对象。它可在应用程序的 Vue 和服务器部分使用，旨在被抛出。
如果您抛出使用 createError 创建的错误
clearError 清除它。fatal: true 来实现。<script setup lang="ts">
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
throw createError({
statusCode: 404,
statusMessage: 'Page Not Found',
})
}
</script>
showErrorfunction showError (err: string | Error | { statusCode, statusMessage }): Error
您可以在客户端的任何时候调用此函数，或者（在服务器端）直接在中间件、插件或 setup() 函数中调用。它将触发一个全屏错误页面，您可以使用 clearError 清除它。
建议改用 throw createError()。
clearErrorfunction clearError (options?: { redirect?: string }): Promise<void>
此函数将清除当前处理的 Nuxt 错误。它还接受一个可选的重定向路径（例如，如果您想导航到“安全”页面）。
Nuxt 还提供了一个 <NuxtErrorBoundary> 组件，允许您在应用程序中处理客户端错误，而无需用错误页面替换整个站点。
此组件负责处理其默认插槽中发生的错误。在客户端，它将阻止错误冒泡到顶层，并改为渲染 #error 插槽。
#error 插槽将接收 error 作为 prop。（如果您设置 error = null，它将触发重新渲染默认插槽；您需要确保错误已完全解决，否则错误插槽将再次渲染。）
<template>
<!-- some content -->
<NuxtErrorBoundary @error="someErrorLogger">
<!-- You use the default slot to render your content -->
<template #error="{ error, clearError }">
You can display the error locally here: {{ error }}
<button @click="clearError">
This will clear the error.
</button>
</template>
</NuxtErrorBoundary>
</template>