nuxt logo

ドキュメント翻訳(非公式)

createError

追加のメタデータを持つエラーオブジェクトを作成します。

この関数を使用して、追加のメタデータを持つエラーオブジェクトを作成できます。これはアプリの Vue 部分と Nitro 部分の両方で使用可能で、スローすることを目的としています。

パラメータ

  • err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }

createError 関数には文字列またはオブジェクトを渡すことができます。文字列を渡すと、それがエラーの message として使用され、statusCode はデフォルトで 500 になります。オブジェクトを渡すと、statusCodemessage、その他のエラーのプロパティを設定できます。

Vue アプリで

createError で作成したエラーをスローすると:

  • サーバーサイドでは、clearError でクリアできるフルスクリーンのエラーページが表示されます。
  • クライアントサイドでは、処理するための非致命的なエラーがスローされます。フルスクリーンのエラーページを表示する必要がある場合は、fatal: true を設定することで実現できます。

pages/movies/[slug\
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}

API ルートで

サーバー API ルートでエラーハンドリングをトリガーするために createError を使用します。

server/api/error.ts
export default eventHandler(() => {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page Not Found'
  })
})

API ルートでは、クライアントサイドでアクセスできるように短い statusMessage を持つオブジェクトを渡して createError を使用することが推奨されます。そうでない場合、API ルートで createError に渡された message はクライアントに伝播しません。代わりに、data プロパティを使用してクライアントにデータを返すことができます。いずれの場合も、潜在的なセキュリティ問題を避けるために、動的なユーザー入力をメッセージに含めないように常に考慮してください。

こちらも参照 getting-started > error-handling