使用 createError 建立錯誤物件的詳細指南

Amd794發表於2024-08-08
Error物件

title: 使用 createError 建立錯誤物件的詳細指南
date: 2024/8/8
updated: 2024/8/8
author: cmdragon

excerpt:
摘要：本文介紹了createError函式在Nuxt應用開發中的使用方法，用於建立帶有附加後設資料的錯誤物件，以提升錯誤處理的靈活性和使用者體驗。內容包括函式引數說明、在Vue元件和API路由中的應用例項、自定義錯誤頁面的建立、錯誤的捕獲與處理技巧，以及如何觸發致命錯誤展示全屏錯誤提示。

categories:

  • 前端開發

tags:

  • 錯誤處理
  • Nuxt應用
  • Vue元件
  • API路由
  • 自定義錯誤
  • 後設資料
  • 使用者體驗

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

在開發 nuxt 應用時，處理錯誤是確保使用者體驗不受影響的重要環節。我們可以使用 createError 函式來建立帶有附加後設資料的錯誤物件。

什麼是 createError？

createError 是一個用於建立錯誤物件的函式，支援附加後設資料，例如狀態碼、狀態訊息等。這些錯誤物件可以在Vue和Nitro部分的應用程式中使用，並且可以被丟擲，從而在處理錯誤時提供更多上下文。

函式引數

createError 函式接收一個物件作為引數，這個物件可以包含以下屬性：

  • cause: 錯誤的根本原因（可選）
  • data: 附加資料（可選）
  • message: 錯誤訊息（可選）
  • name: 錯誤名（可選）
  • stack: 錯誤堆疊（可選）
  • statusCode: HTTP 狀態碼（可選）
  • statusMessage: 狀態訊息（可選）
  • fatal: 是否致命的標誌（可選）

在以下示例中，我們將闡明如何在客戶端和伺服器端進行錯誤處理。

例項一：在 Vue 元件中使用 createError

在 Vue 元件中，我們可以使用 createError 丟擲錯誤，以便在使用者介面中處理。以下是一個示例，在這個示例中，我們嘗試獲取電影的詳細資訊，如果沒有找到相關資料，則丟擲一個帶有 404 狀態碼的錯誤。

<template>
  <div>
    <h1>電影詳情</h1>
    <p v-if="!data">載入中...</p>
    <p v-else>{{ data.title }}</p>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()

// 使用 useFetch 獲取電影資料
const { data } = await useFetch(`/api/movies/${route.params.slug}`)

// 如果沒有找到資料，則丟擲錯誤
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: '頁面未找到' })
}
</script>

在這個例子中，如果電影資料沒有找到，則使用者將看到一個全屏的錯誤頁面。

例項二：在 API 路由中使用 createError

除了在 Vue 元件中使用，我們也可以在 API 路由中使用 createError 來丟擲錯誤。以下是一個示例，演示如何在 API 路由中處理不存在的資源。

export default eventHandler(() => {
  // 假設這裡沒有找到請求的電影
  throw createError({
    statusCode: 404,
    statusMessage: '頁面未找到'
  })
})

在這個示例中，當使用者請求不存在的電影時，伺服器將返回一個 404 錯誤，表示頁面未找到。

處理錯誤

自定義錯誤頁面

你可以透過在應用程式源目錄中新增 ~/error.vue 檔案來自定義預設錯誤頁面。此檔案應包含處理錯誤的邏輯和顯示錯誤資訊的模板。

以下是一個簡單的自定義錯誤頁面示例：

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

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

<template>
  <div>
    <h2>{{ error.statusCode }}</h2>
    <button @click="handleError">清除錯誤</button>
  </div>
</template>

錯誤物件

error 物件包含以下欄位：

  • url: 發生錯誤的 URL
  • statusCode: HTTP 狀態碼
  • statusMessage: 狀態訊息
  • message: 錯誤詳細資訊
  • description: 錯誤描述
  • data: 附加的錯誤資料

如果你丟擲一個自定義錯誤，確保使用 data 欄位來儲存自定義內容。

捕獲和處理錯誤

建議使用 onErrorCaptured 或 vue:error 鉤子來處理錯誤。你可以在 Nuxt 外掛中配置這個鉤子以捕獲和處理錯誤：

// plugins/error-handler.ts
export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook('vue:error', (err) => {
    // 處理錯誤
  })
})

清除錯誤

當你準備移除錯誤頁面時，你可以使用clearError 函式來清除之前丟擲的錯誤。在需要的時候，例如使用者重新訪問頁面時，你可以使用它來恢復正常狀態。

觸發致命錯誤

如果你希望在客戶端觸發一個全屏的錯誤頁面，可以透過設定 fatal: true 來實現。例如：

throw createError({ statusCode: 500, message: '內部伺服器錯誤', fatal: true })

這樣一來，使用者將看到一個更為明顯的錯誤提示。

總結

使用 createError 函式可以更靈活地管理錯誤，提高使用者體驗。透過新增適當的錯誤訊息和後設資料，開發者可以幫助使用者更好地理解發生了什麼錯誤，並在需要時採取必要的措施。

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：使用 createError 建立錯誤物件的詳細指南 | cmdragon's Blog

往期文章歸檔：

  • 清除 Nuxt 狀態快取：clearNuxtState | cmdragon's Blog
  • 清除 Nuxt 資料快取：clearNuxtData | cmdragon's Blog
  • 使用 clearError 清除已處理的錯誤 | cmdragon's Blog
  • 使用 addRouteMiddleware 動態新增中間 | cmdragon's Blog
  • 使用 abortNavigation 阻止導航 | cmdragon's Blog
  • 使用 $fetch 進行 HTTP 請求 | cmdragon's Blog
  • 使用 useState 管理響應式狀態 | cmdragon's Blog
  • 使用 useServerSeoMeta 最佳化您的網站 SEO | cmdragon's Blog
  • 使用 useSeoMeta 進行 SEO 配置 | cmdragon's Blog
  • Nuxt.js必讀：輕鬆掌握執行時配置與 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法與路由中介軟體應用 | cmdragon's Blog
  • useRoute 函式的詳細介紹與使用示例 | cmdragon's Blog
  • 使用 useRequestURL 組合函式訪問請求URL | cmdragon's Blog
  • Nuxt.js 環境變數配置與使用 | cmdragon's Blog
  • 服務端渲染中的資料獲取：結合 useRequestHeaders 與 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 訪問請求事件 | cmdragon's Blog
  • 使用 useNuxtData 進行高效的資料獲取與管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和執行時上下文 | cmdragon's Blog

相關文章