エラーハンドラーの設定⚓︎

フロントエンドの例外処理方針に記載の通り、業務フロー上は想定されないシステムのエラーを表すシステム例外と、業務フロー上想定されるエラーを表す業務例外をそれぞれ捕捉し、適切にハンドリングする必要があります。

グローバルエラーハンドラーの設定⚓︎

業務フロー上発生が想定されないエラーを捕捉し、ハンドリングするためのグローバルエラーハンドラーを設定します。エラーハンドラーはアプリケーションの共通部品なので、新しくsharedフォルダーを作成し、下図の階層に、global-error-handler.tsを作成します。

フォルダー構造

<workspace-name>
└─ src/
  └─ shared/ ---------------------- アプリケーションの共通部品が配置されるフォルダー
     └─ error-handler/
        └─ global-error-handler.ts

グローバルエラーハンドラーは、 Vue.js のプラグインとして実装します。プラグインは、アプリケーション全体で利用したい機能やコンポーネントがある場合に有用です。

グローバルエラーハンドラーの実装例

Vue.js アプリケーションで発生したエラーに対するハンドリングは、 Vue.js で用意されている app.config.errorHandler に実装します。 JavaScript の構文エラーや、 Vue アプリケーション外の例外に対しては、addEventListener() メソッドを用いてイベントリスナーを追加することでハンドリングします。同期処理については error イベントを検知することでハンドリングし、 API 通信や I/O 処理のような非同期処理については unhandledrejection イベントを検知することで、ハンドリングします。

global-error-handler.ts
import type { App, ComponentPublicInstance } from 'vue';
import { router } from '../../router';

export const globalErrorHandler = {
  install(app: App) {
    app.config.errorHandler = (
      err: unknown,
      instance: ComponentPublicInstance | null,
      info: string,
    ) => {
      // Vue.js アプリケーションでのエラー発生時に実行したい処理
      console.log(err, instance, info);
      router.replace({ name: 'error' });
    };

    window.addEventListener('error', (event) => {
      // 同期処理でのエラー発生時に実行したい処理
      console.log(event);
    });

    window.addEventListener('unhandledrejection', (event) => {
      // 非同期処理でのエラー発生時に実行したい処理
      console.log(event);
    });
  },
};

実装したグローバルエラーハンドラーを、アプリケーションのエントリーポイントでインストールします。

エントリーポイントの実装例

main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { globalErrorHandler } from '@/shared/error-handler/global-error-handler';
import App from './App.vue';
import { router } from './router';

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.use(globalErrorHandler);

app.mount('#app');