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

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

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

業務フロー上発生が想定されないエラーを捕捉し、ハンドリングするためのグローバルエラーハンドラーを設定します。エラーハンドラーはアプリケーションの共通部品なので、新しく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.error(err, instance, info)
      router.replace({ name: 'error' })
    }

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

    window.addEventListener('unhandledrejection', (event) => {
      // 非同期処理でのエラー発生時に実行したい処理
      console.error(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')

カスタムエラーハンドラーの設定⚓︎

業務フロー上想定されるエラーを把握するためには、バックエンドアプリケーションとの連携が必要です。そのため、業務例外に対するハンドリングは、OpenAPI 仕様書からのクライアントコード生成にてバックエンドアプリケーションとの連携を設定したあと、カスタムエラーの設定で行います。