Nuxtはフルスタックフレームワークであるため、異なるコンテキストで発生する可能性のあるいくつかの予防不能なユーザーランタイムエラーの原因がいくつかあります：

• Vueレンダリングライフサイクル中に発生するエラー（SSR & CSR）
• サーバーおよびクライアントの起動エラー（SSR + CSR）
• Nitroサーバーライフサイクル中のエラー（server/ディレクトリ）
• JSチャンクのダウンロードエラー

Vueエラー

Vueのエラーに関しては、onErrorCapturedを使用してフックことができます。

加えて、Nuxtはトップレベルまでエラーが伝播した場合に呼ばれるvue:errorフックを提供しています。

エラー報告フレームワークを使用している場合は、vueApp.config.errorHandlerを通じてグローバルハンドラーを提供することができます。これは処理されたものを含むすべてのVueエラーを受け取ります。

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    // handle error, e.g. report to a service
  }

  // Also possible
  nuxtApp.hook('vue:error', (error, instance, info) => {
    // handle error, e.g. report to a service
  })
})

起動エラー

Nuxtアプリケーションの起動中にエラーが発生した場合、Nuxtはapp:errorフックを呼びます。

これには以下が含まれます:

• Nuxtプラグインの実行
• app:createdおよびapp:beforeMountフックの処理
• HTMLへのVueアプリのレンダリング（SSR中）
• アプリのマウント（クライアントサイド）、ただし、この場合はonErrorCapturedまたはvue:errorで処理する必要があります
• app:mountedフックの処理

Nitroサーバーエラー

現在、これらのエラーのサーバーサイドハンドラーを定義することはできませんが、エラーページをレンダリングすることができます。詳細についてはエラーページをレンダリングするセクションをご覧ください。

JSチャンクのエラー

ネットワーク接続の障害や新しいデプロイメント（古いハッシュ化されたJSチャンクURLを無効にする）により、チャンク読み込みのエラーが発生することがあります。Nuxtはルートナビゲーション中にチャンクの読み込みに失敗した場合、ハードリロードを実行することにより、チャンク読み込みエラーを処理するための組込みサポートを提供しています。

この挙動を変更するには、experimental.emitRouteChunkErrorをfalseに設定する（これらのエラーをまったくフックしないようにするため）か、それらを自分で処理したい場合はmanualに設定します。チャンクの読み込みエラーを手動で処理したい場合は、自動実装例を参考にすることができます。

エラーページ

サーバーライフサイクル中にエラーが発生する場合があります:

• Nuxtプラグインの処理中
• HTMLへのVueアプリのレンダリング中
• サーバーAPIルートがエラーをスローする場合

クライアントサイドでは、以下の場合に発生することがあります:

• Nuxtプラグインの処理中
• アプリケーションのマウント前（app:beforeMountフック）
• onErrorCapturedまたはvue:errorフックで処理されなかった場合のアプリのマウント時
• ブラウザでVueアプリが初期化され、マウントされたとき（app:mounted）。

アプリケーションのソースディレクトリに~/error.vueを追加することで、デフォルトのエラーページをカスタマイズすることができます。これはapp.vueと並行して配置します。

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps({
  error: Object as () => NuxtError
})

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

<template>
  <div>
    <h2>{{ error?.statusCode }}</h2>
    <button @click="handleError">エラーをクリア</button>
  </div>
</template>

最後に

ページやコンポーネントのセットアップ関数で呼び出せるonErrorCapturedコンポーザブル, またはNuxtプラグインで設定できるvue:errorランタイムフックを使用することを強く推奨します。

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.hook('vue:error', (err) => {
    //
  })
})

エラーページを削除準備ができたら、オプションでリダイレクト先を指定する（例えば、'安全'なページにナビゲートしたい場合）clearErrorヘルパー関数を呼び出すことができます。

エラーユーティリティ

useError

function useError (): Ref<Error | { url, statusCode, statusMessage, message, description, data }>

この関数は処理中のグローバルNuxtエラーを返します。

createError

function createError (err: string | { cause, data, message, name, stack, statusCode, statusMessage, fatal }): Error

追加のメタデータを持つエラーオブジェクトを作成します。エラーmessageとして設定される文字列を渡すことも、エラープロパティを含むオブジェクトを渡すこともできます。この関数はアプリのVueおよびサーバー部分で使用でき、投げられることを意図しています。

createErrorで作成したエラーを投げると：

• サーバーサイドでは、clearErrorでクリアできる全画面エラーページをトリガーします。
• クライアントサイドでは、処理すべき非致命的なエラーを投げます。全画面エラーページをトリガーする必要がある場合は、fatal: trueを設定することができます。

const route = useRoute()
const { data } = await useFetch(`/api/movies/${route.params.slug}`)

if (!data.value) {
  throw createError({
    statusCode: 404,
    statusMessage: 'Page Not Found'
  })
}

showError

function showError (err: string | Error | { statusCode, statusMessage }): Error

この関数はクライアントサイドで、または（サーバーサイドで）ミドルウェア、プラグインまたはsetup()関数内で直接呼び出すことができます。これにより、clearErrorでクリアできる全画面エラーページがトリガーされます。

代わりにthrow createError()を使用することを推奨します。

clearError

function clearError (options?: { redirect?: string }): Promise<void>

この関数は現在処理中のNuxtエラーをクリアします。また、オプションでリダイレクト先を指定することもできます（例えば、'安全'なページにナビゲートしたい場合）。

コンポーネント内でエラーをレンダリング

Nuxtは<NuxtErrorBoundary>コンポーネントも提供しており、アプリ内のクライアントサイドエラーを取り扱うことができます。これにより、サイト全体をエラーページに置き換えることなくエラーを処理することが可能です。

このコンポーネントは、そのデフォルトスロット内で発生するエラーを処理する責任を持ちます。クライアントサイドでは、エラーがトップレベルにバブルアップするのを防ぎ、代わりに#errorスロットをレンダリングします。

#errorスロットはerrorをプロパティとして受け取ります。（error = nullに設定すると、デフォルトスロットの再レンダリングがトリガーされますが、エラーが完全に解決されていない場合、エラースロットが再度レンダリングされることになります。）

<template>
  <!-- some content -->
  <NuxtErrorBoundary @error="someErrorLogger">
    <!-- You use the default slot to render your content -->
    <template #error="{ error, clearError }">
      エラーをここにローカルで表示: {{ error }}
      <button @click="clearError">
        これによりエラーがクリアされます。
      </button>
    </template>
  </NuxtErrorBoundary>
</template>