DAY18: 錯誤處理

處理錯誤

• Vue渲染生命周期中的錯誤（SSR + SPA）。
• API或Nitro服務器生命周期中的錯誤。
• 伺服器和客戶端啟動錯誤（SSR + SPA）。
• 下載JS塊時的錯誤。

在Vue渲染生命周期中的錯誤（SSR + SPA）

您可以使用onErrorCaptured來鉤取Vue錯誤。此外，Nuxt提供了vue:error鉤子，如果任何錯誤傳播到頂級，將調用此鉤子。

如果您使用錯誤報告框架，可以通過vueApp.config.errorHandler提供全局處理程序。它將接收所有Vue錯誤，即使它們被處理也是如此。

例如，使用全局錯誤報告框架的示例：

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

伺服器和客戶端啟動錯誤（SSR + SPA）
如果在啟動Nuxt應用程序時出現錯誤，Nuxt將調用app:error鉤子。
這包括：

• 執行Nuxt插件。
• 處理app:created和app:beforeMount鉤子。
• 在伺服器上將Vue應用程序渲染為HTML。
• 客戶端上的應用程式安裝，雖然您應該使用onErrorCaptured或vue:error來處理此情況。
• 處理app:mounted鉤子。

在API或Nitro服務器生命周期中的錯誤
目前，您無法為這些錯誤定義伺服器端處理程序，但可以渲染錯誤頁面（請參見下一節）。

下載JS塊時的錯誤
由於網絡連接失敗或新部署（使舊的哈希JS塊URL無效）可能會遇到塊加載錯誤。Nuxt提供了處理塊加載錯誤的內置支持，當在路由導航期間加載塊失敗時，它會執行硬重新加載。

您可以通過將experimental.emitRouteChunkError設置為false（以完全禁用鉤取這些錯誤）或manual（以手動處理它們）來更改此行為。如果要手動處理塊加載錯誤，可以查看自動實現以獲取想法。

渲染錯誤頁面
當Nuxt遇到致命錯誤時（在伺服器上的任何未處理錯誤，或在客戶端上使用fatal: true創建的錯誤），它將渲染JSON響應（如果使用Accept: application/json標頭請求），或觸發全屏