錯誤管理是專案非常重要的一塊，在真正進入開發時都需要設想好各種狀況，避免上線後一個錯誤頁面就不動了。

Nuxt3 的文件中有針對 錯誤管理特別說明，馬上來看看有哪些方法可以運用。

發生錯誤的時機

Nuxt 包辦了前後端，需要關注的錯誤種類會比較多，根據官方文件描述，錯誤發生的種類分為三種：

1. Vue 渲染的生命週期期間發生錯誤（SSR + SPA）
2. Server 端和 Client 端啟動時發生錯誤（SSR + SPA）
3. API 或是 Nitro Server（運行 Nuxt3 的 Server）運行期間發生錯誤

Vue 渲染的生命週期期間發生錯誤（SSR + SPA）

既然是 Vue 的鍋就用 Vue 的方法解決，Vue 有 onErrorCaptured 可以捕捉錯誤。
除此之外，Nuxt 也有提供一個 vue:error 的 hook，當錯誤被傳遞到最頂層時會觸發（即時已經撰寫錯誤處理還是會捕捉到），使用方法如下（使用 plugins 的方式撰寫）：

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

Server 端和 Client 端啟動時發生錯誤（SSR + SPA）

如果是在這個狀況發生錯誤，Nuxt 會呼叫 app:error 這個 hook 來處理，但這一部分並沒有太多詳細說明，也沒有太多資訊。

API 或是 Nitro Server（運行 Nuxt3 的 Server）運行期間發生錯誤

如果有 Node.js 或其他後端相關經驗，就會知道通常後端掛掉在重啟之前都是停下來不動的，遇到這種類型錯誤自然無法再做什麼操作，但是可以設定一個 error page 讓錯誤發生時導向這個頁面。

製作 error page 的方式是撰寫一個檔名為 error.vue 的檔案，並且放在根目錄（注意，不是 pages 裡面，而是跟 app.vue 同一個層級）

這個頁面有兩個重要的東西可以提供我們使用：

• error：這是一個 props，可以取得錯誤資訊來做進一步的處理（例如顯示對應的錯誤訊息）。
• clearError：清除錯誤的方法，在裡面可以設置轉址，讓你導向一個安全的頁面。

官方範例如下：

<template>
  <button @click="handleError">Clear errors</button>
</template>

<script setup>
const props = defineProps({
  error: Object
})

const handleError = () => clearError({ redirect: '/' })
</script>

Error 相關 API

useError

基本操作，用來取得被捕捉的錯誤資訊。

createError

類似原生的 new Error()，就是用來建立一個 Error 物件，官方範例如下：

<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>

clearError

前面段落有介紹，用來清除錯誤，並且可以轉址到其他頁面。

Error 相關元件

當錯誤發生時除了跳轉到錯誤頁面，Nuxt 也提供另一個選擇，在相同頁面中使用 <NuxtErrorBoundary> 元件來渲染錯誤畫面，以下是官方範例：

<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>