Question

了解如何捕获不同生命周期中的错误。

处理错误

Nuxt 3 是一个全栈框架，这意味着在不同的上下文中可能会发生无法预防的用户运行时错误的多种来源：

1. Vue渲染生命周期错误（SSR+SPA）
2. API 或 Nitro 服务器生命周期中的错误
3. 服务器和客户端启动错误（SSR + SPA）
4. 下载JS chunks出错

Vue渲染生命周期中的错误（SSR+SPA）

当 Nuxt 遇到致命错误时，无论是在服务器生命周期期间，还是在呈现 Vue 应用程序（SSR 和 SPA）时，它都会呈现 JSON 响应（如果使用 Accept: application/json 标头请求）或 HTML 错误 页。

您可以通过在应用程序的源目录中添加 ~/error.vue 以及 app.vue 来自定义此错误页面。 这个页面只有一个 prop - error，它包含一个错误供你处理。

当您准备好删除错误页面时，您可以调用 clearError 辅助函数，该函数采用可选路径重定向到（例如，如果您想导航到“安全”页面）。

确保在使用依赖于 Nuxt 插件的任何东西之前进行检查，例如 $route 或 useRouter，如果插件抛出了错误，那么在您清除错误之前它不会重新运行。

示例

useError

Nuxt 还提供了一个<NuxtErrorBoundary>组件，允许您在应用程序中处理客户端错误，而无需用错误页面替换整个站点。

该组件负责处理在其默认插槽中发生的错误。 在客户端，它会阻止错误冒泡到顶层，并会渲染 #error 插槽。

#error 插槽将接收 error 作为道具。 （如果您设置 error = null，它将触发重新渲染默认插槽；您需要确保首先完全解决错误，否则将再次渲染错误插槽。）

如果您导航到另一条路线，错误将自动清除。

示例

pages/index.vue

<template>
  <!-- 一些内容 -->
  <NuxtErrorBoundary @error="someErrorLogger">
    <!-- 您使用默认插槽来呈现您的内容 -->
    <template #error="{ error }">
      您可以在此处本地显示错误。
      <button @click="error = null">
        这将清除错误。
      </button>
    </template>
  </NuxtErrorBoundary>
</template>