博客

nuxt3中出错时的常用处理方式

  • Post author:
  • Post category:其他

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中出错时的常用处理方式