Nuxt Nation カンファレンスが開催されます。11月12日~13日にご参加ください。

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].vue
<script setup lang="ts">
const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)
if (!data.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
}
</script>

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 プロパティを使用してクライアントにデータを渡すことができます。いずれの場合も、潜在的なセキュリティ問題を回避するために、動的なユーザー入力をメッセージに入れないように常に考慮してください。

ドキュメント > はじめに > エラー処理 で詳細をご覧ください。