アプリケーションでは、さまざまなエラーが発生する可能性があります。これらのエラーを適切に捕捉・処理することで、ユーザーに快適な体験を提供し、開発者側ではエラーのロギングやデバッグを容易にすることができます。

本記事では、Vue コンポーネント内でのエラー捕捉方法と、プラグインを用いたグローバルエラーハンドリングの設定方法について詳しく解説します。

## Vueエラーの捕捉方法

### onErrorCaptured() の仕組みと使い方

Vue には `onErrorCaptured()` というコンポーザブルが用意されており、子コンポーネントから発生したエラーを捕捉するために利用できます。

`onErrorCaptured()`では、**エラーの発生源**を正確にキャッチできます。コンポーネントのレンダリング、イベントハンドラー、ライフサイクルフック、`setup()` 関数、ウォッチャーなど、さまざまな箇所で発生するエラーをキャッチ可能です。

**コールバックの引数**

```typescript
function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
  err: unknown,
  instance: ComponentPublicInstance | null,
  info: string
) => boolean | void
```

`onErrorCaptured()` に渡すコールバック関数は、以下の3つの引数を受け取ります。

* **err**: 発生したエラー（unknown 型）
* **instance**: エラーを発生させたコンポーネントインスタンス（存在しない場合は null）
* **info**: エラーが発生した箇所を示す情報文字列 ※プロダクション環境では、この情報は短縮されたコードになる点に注意。

### サンプル：コンポーネント内でのエラー捕捉例

以下は、親コンポーネントで子コンポーネント内のエラーを捕捉するサンプルコードになります。実際に子コンポーネント内でエラーが発生するように実装し、親コンポーネントの`onErrorCaptured()`によってエラーがキャッチされる様子を確認できます。

2つのファイルを作成します。

■ 親コンポーネント (pages/error-handling/index.vue)

```html
<script setup lang="ts">
// 子コンポーネントで発生したエラーを捕捉する
onErrorCaptured((err, instance, info) => {
  console.error("親コンポーネントでエラーを捕捉:", err);
  console.info("発生箇所:", info);
  // エラーを既に処理済みとするために false を返し、伝播を停止する
  return false;
});
</script>

<template>
  <div>
    <h1>親コンポーネント</h1>
    
    <ErrorHandlingChild />
  </div>
</template>
```

`onErrorCaptured()` を用いて、子コンポーネントから伝播されるエラーを捕捉しています。捕捉したエラーはコンソールに出力し、`return false` を行うことでエラーのさらなる伝播を防いでいます。

■ 子コンポーネント (components/error-handling/Child.vue)

```html
<script setup lang="ts">
import { onMounted } from "vue";

// コンポーネントがマウントされた後に意図的にエラーを発生させる
onMounted(() => {
  throw new Error("子コンポーネントでのエラー発生!");
});
</script>

<template>
  <div>
    <p>子コンポーネントの通常のコンテンツ</p>
  </div>
</template>
 
```

`onMounted()` 内で、コンポーネントがマウントされたタイミングで `throw new Error(...)` により意図的にエラーを発生させています。これにより、子コンポーネント内でエラーが発生すると、そのエラーは親コンポーネントの `onErrorCaptured()` によって捕捉され、コンソールに以下のような出力が確認できるはずです。

```
親コンポーネントでエラーを捕捉: Error: 子コンポーネントでのエラー発生!
発生箇所: mounted hook

```

## グローバルエラーハンドリングの設定方法

Nuxt.js では、Vue アプリケーション全体に対してエラーハンドリングを行うための仕組みとして、`vue:error` フックや `app.config.errorHandler` の設定が提供されています。

### vue:error フックと app.config.errorHandler

* **app.config.errorHandler:** Vue インスタンス内で発生したエラーが、各コンポーネントで個別に捕捉（`onErrorCaptured()` など）されなかった場合、最終的にこのグローバルエラーハンドラーに流れます。すべての Vue エラーをここで捕捉するため、エラーのロギングや外部のエラー報告サービスへの通知など、共通処理を行うのに適しています。
* **vue:error フック:** Nuxt 固有のフックで、Vue のエラーがルートレベルまで伝播した場合に呼び出されます。グローバルエラーハンドラーと同様に、エラー報告サービスへ一元的にエラー情報を送信するなど、エラーの統一管理が可能です。

### エラー伝播のフロー

!\[画像]\(<https://tech-education-nav-files.s3.ap-northeast-1.amazonaws.com/post/educational_materials/error-handling-in-nuxt/error-handling-in-nuxt.webp>)

1. コンポーネント内でエラーが発生し、もし個別のエラーハンドリング（`onErrorCaptured()` 等）がなければ、エラーは上位へ伝播します。
2. 伝播されたエラーは、最終的に `app.config.errorHandler` および `vue:error` フックによってキャッチされます。
3. ここで、例えばエラーメッセージをコンソールに出力したり、外部サービスへレポートを送信するなどの共通処理を実行できます。

### グローバルエラーハンドリングの実装と検証

Nuxt.js では、アプリ全体で発生するエラーを一元的に処理するために、グローバルエラーハンドラーを設定することが可能です。これを実現するために利用するのが `defineNuxtPlugin` です。

以下のサンプルコードでは、まずグローバルエラーハンドラーを設定するプラグインを作成し、その後、エラーを発生させるコンポーネントを用意して、実際にエラーがグローバルに捕捉される様子を確認します。プラグインファイル: `plugins/error-handler.ts` を作成します。

```typescript
// plugins/error-handler.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Vue のグローバルエラーハンドラーを設定
  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    console.error('Global errorHandler caught error:', error)
    console.info('Error info:', info)
    // 例: ここで外部のエラー報告サービスに送信する処理を実装可能
  }

  // Nuxt 固有の vue:error フックを利用
  nuxtApp.hook('vue:error', (error, instance, info) => {
    console.error('vue:error hook caught error:', error)
    console.info('Error info:', info)
    // 例: エラー報告サービスにエラー情報を送信する処理
  })
}) 
```

#### defineNuxtPlugin の役割

`defineNuxtPlugin` は、Nuxt のプラグインとして機能するためのヘルパー関数です。これを利用することで、Nuxt アプリケーションの初期化時に実行したい処理や、グローバルな設定（エラーハンドリング、プラグイン登録、フックの設定など）を一元管理できます。プラグインはアプリ全体で利用可能な機能を拡張するための重要な仕組みとなっています。

#### nuxtApp.vueApp.config.errorHandler

プラグイン内で `nuxtApp.vueApp.config.errorHandler` にエラーハンドラー関数を設定することで、Vue のグローバルなエラーハンドリング機能を利用できます。この設定で、Vue コンポーネント内で発生したエラーをキャッチできます。

#### nuxtApp.hook

さらに、`nuxtApp.hook` を利用すると、Nuxt 固有のフック（ここでは `vue:error` フック）を通じて、Vue コンポーネント内で発生したエラーをキャッチできます。`vue:error` フックは、Vue 内でエラーが発生したタイミングで呼び出され、上記のグローバルエラーハンドラーと同様にエラー情報を処理できます。これにより、Nuxt 特有の処理（たとえば、特定の条件下で追加のエラー処理を行うなど）が実装可能です。 &#x20;

`pages/error-handling/index.vue` のonErrorCapturedの処理を削除します。

```html
 <script setup lang="ts"></script>

<template>
  <div>
    <h1>親コンポーネント</h1>
    
    <ErrorHandlingChild />
  </div>
</template>

```

`http://localhost:3000/error-handling`にアクセスすると、プラグインで設定したグローバルエラーハンドラー (`app.config.errorHandler`) と `vue:error` フックの両方で捕捉され、コンソールにエラーメッセージと情報が出力されるはずです。

```plaintext
Global errorHandler caught error: Error: 子コンポーネントでのエラー発生!
Error info: mounted hook

vue:error hook caught error: Error: 子コンポーネントでのエラー発生!
Error info: mounted hook
```

このように、グローバルエラーハンドリングを設定することで、個々のコンポーネントでキャッチできなかったエラーも一元的に管理でき、エラーのロギングやレポートが容易になります。実際の運用環境では、ここで取得したエラー情報を外部サービス（例: Sentry など）に送信するなどして、より効率的なエラー監視が可能です。



## まとめ

Nuxt.js におけるエラーハンドリングは、以下の2つのレベルで構成されています。

* **コンポーネントレベルのエラー捕捉:** `onErrorCaptured()` を利用して、子コンポーネントからのエラーを局所的にキャッチし、必要な対処（例：エラーメッセージの表示や状態の更新）を実装できます。
* **グローバルレベルのエラーハンドリング:** `app.config.errorHandler` や `vue:error` フックを用いて、全体的なエラー処理を一元管理し、エラーのロギングや外部サービスへの通知を行うことができます。

これらの機能を組み合わせることで、Nuxt.js アプリケーションはエラー発生時にもユーザーに優しい挙動を提供し、開発者にとっても効率的なデバッグが可能となります。エラーハンドリングの実装は初めは難しく感じるかもしれませんが、この記事で紹介したサンプルコードを参考に、ぜひご自身のプロジェクトに取り入れてみてください。

<https://nuxt.com/docs/getting-started/error-handling>

エラーハンドリング①Vueエラー捕捉とグローバルなエラー処理

Nuxt.js アプリケーションで発生するエラーを、Vue の onErrorCaptured からグローバルエラーハンドリングまで詳細に解説。ユーザー体験の向上や効率的なデバッグを実現するためのサンプルコードと実践的な手法を紹介します。

Nuxt.jsエラーハンドリング①Vueエラー捕捉とグローバルなエラー処理

動画チュートリアルのこだわりと、なぜ私の講座が有益なものを提供できるか。その理由を書きました。

最新のNuxt.js講座をリリースしました！初心者から経験者まで、現場で即活用できる実践ノウハウを動画で学べます。

Vue.jsの動画チュートリアルを公開しました！Vue.js の基礎だけでなく、実践的な使い方を学びたい方は、是非チェックしてみてください。