今天我們要學習如何處理局部錯誤，讓網站不會因為一個小問題而全盤崩潰。就像建築物中的防火隔間一樣。

1. 致命錯誤 vs. 局部錯誤

讓我們先釐清兩種錯誤的差別：

致命錯誤 (昨天學的)

找不到頁面 (404)、伺服器崩潰 (500)。這種錯誤讓整個頁面無法顯示，必須展示 error.vue 這個全螢幕的「維修告示牌」。

局部錯誤 (今天要學的)

頁面中的某個「天氣小工具」因為 API 暫時連不上而出錯，但旁邊的「新聞列表」和「廣告」都還是好的。我們希望只讓天氣小工具顯示錯誤，而不是讓整個頁面倒掉。

2. 錯誤隔離艙：<NuxtErrorBoundary>

為了解決局部錯誤，Nuxt 提供了一個非常有用的元件 <NuxtErrorBoundary>。

您可以把它想像成一個「防火的玻璃保險箱」。您把可能會出錯的元件放進去，萬一它「著火」了（發生錯誤），火勢會被完全限制在保險箱內，不會波及外面的其他元件。

如何使用這個保險箱？

它有兩個「插槽 (slot)」：

預設插槽：您把正常的元件放在 <NuxtErrorBoundary> 的中間，也就是它預設會顯示的內容。

#error 插槽：您準備一個「備用方案」，放在名為 #error 的插槽裡。當預設插槽裡的元件出錯時，Nuxt 會自動顯示這個備用方案。

範例：假設我們有一個 WeatherWidget 元件

<template>
  <div>
    <h1>我的儀表板</h1>
    <p>歡迎回來！</p>

    <NuxtErrorBoundary>
      <WeatherWidget />

      <template #error="{ error }">
        <div class="weather-error">
          <p>天氣資訊暫時無法載入，請稍後再試。</p>
          <code>{{ error }}</code>
        </div>
      </template>
    </NuxtErrorBoundary>

    <NewsList />
  </div>
</template>

3. 進階觀念：錯誤監控與回報

除了向使用者顯示錯誤提示，我們身為開發者，更希望能「知道」錯誤發生了，這樣才能去修復它。

Nuxt 允許我們透過建立一個 Plugin，來攔截應用程式中發生的所有錯誤，然後我們可以將這些錯誤資訊傳送到像是 Sentry、LogRocket 這類的錯誤追蹤服務。

進階概念：這屬於進階應用，我們只需要先有這個概念：「Nuxt 有能力集中監控所有錯誤」。

今日總結

今天我們學會了使用 <NuxtErrorBoundary> 來處理局部錯誤，讓我們的應用程式更強健、更有韌性，不會因為一個小問題就全盤崩潰。

致命錯誤處理：error.vue 全螢幕錯誤頁面

適用於 404、500 等嚴重錯誤

局部錯誤處理：<NuxtErrorBoundary> 錯誤隔離

將錯誤限制在特定元件內，不影響其他功能

至此，您已經掌握了從「致命錯誤 (error.vue)」到「局部錯誤 (<NuxtErrorBoundary>)」的完整處理方案，為您的《人類補完計劃》專案加上了堅實的防護網！