1. 複習 `error.vue`

讓我們再次回顧這個特殊檔案的核心重點：

位置

這個檔案必須放在專案的根目錄（或 srcDir），和 app.vue 當鄰居。千萬不要把它放在 pages/ 裡面，因為它不是一個普通的頁面或路由。

用途

當 Nuxt 遇到一個無法挽回的致命錯誤時（例如 404 Not Found、500 Server Error，或是您手動用 throw createError({ fatal: true }) 拋出的錯誤），就會自動顯示這個元件的內容。

2. 錯誤訊息的快遞包裹：`error` Prop

error.vue 會自動收到一個名為 error 的 prop，這個 prop 就像一個快遞包裹，裡面裝著這次錯誤的所有詳細資訊。其中最重要的幾個欄位是：

404

statusCode

錯誤代碼
最常見的數字代碼，例如 404 (找不到頁面) 或 500 (伺服器內部錯誤)。

statusMessage

狀態訊息
對 statusCode 的簡短文字描述，例如 'Not Found' 或 'Internal Server Error'。

message

詳細錯誤訊息
更詳細的錯誤描述，方便開發者除錯。

data

自訂資料
一個可以讓我們夾帶任何自訂資訊的欄位。

3. 打造一個資訊更豐富的錯誤頁面

了解了 error prop 的結構後，我們就可以打造一個更棒的錯誤頁面。

首先，假設我們在某個頁面中，手動拋出一個帶有自訂資料的錯誤：

頁面中的錯誤拋出

// 在某個頁面中...
throw createError({
  statusCode: 401,
  statusMessage: '權限不足',
  fatal: true,
  data: {
    customMessage: '您沒有權限訪問此頁面，請先登入。'
  }
});

接著，我們可以在 error.vue 中接收並顯示這些資訊：

error.vue

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

const message = props.error.statusMessage || '發生了一些錯誤';
// 從 data 欄位讀取我們的自訂訊息
const description = props.error.data?.customMessage || '請稍後再試或返回首頁。';

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

<template>
  <div class="error-container">
    <h1>{{ error.statusCode }}</h1>
    <h2>{{ message }}</h2>
    <p>{{ description }}</p>
    <button @click="handleError">返回首頁</button>
  </div>
</template>

今日總結

今天我們深入了解了 error.vue 的結構與使用方式。

透過客製化這個檔案，並善用 error prop 傳遞的資訊，您可以提供一個符合您網站風格、且對使用者更友善的錯誤頁面，大幅提升使用者在遇到問題時的體驗。

重要提醒

一個好的錯誤頁面，是專業網站不可或缺的一環。它在意外發生時，依然能穩定地引導使用者，展現了您對細節的重視。