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

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

Vueのエラー

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

さらに、Nuxtはvue:errorフックを提供しており、エラーがトップレベルまで伝播した場合に呼び出されます。

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

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    // エラーを処理、例：サービスに報告
  }

  // これも可能
  nuxtApp.hook('vue:error', (error, instance, info) => {
    // エラーを処理、例：サービスに報告
  })
})

起動エラー

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

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

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

Nitroサーバーエラー

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

JSチャンクのエラー

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

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

エラーページ

サーバーライフサイクル中にエラーが発生する可能性があります：

• Nuxtプラグインの処理中
• VueアプリのHTMLへのレンダリング中
• サーバー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ランタイムNuxtフックを使用することを強くお勧めします。

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

追加のメタデータを持つエラーオブジェクトを作成します。エラーメッセージとして設定する文字列またはエラーのプロパティを含むオブジェクトを渡すことができます。これは、アプリの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: 'ページが見つかりません'
  })
}

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>
  <!-- 一部のコンテンツ -->
  <NuxtErrorBoundary @error="someErrorLogger">
    <!-- デフォルトスロットを使用してコンテンツをレンダリングします -->
    <template #error="{ error, clearError }">
      ここでエラーをローカルに表示できます: {{ error }}
      <button @click="clearError">
        これでエラーがクリアされます。
      </button>
    </template>
  </NuxtErrorBoundary>
</template>