【Vue.js】APIエラーハンドリングの設計例｜コード別にコンポーネントを切り替える実践

Vue.jsで外部APIと連携する際、避けて通れないのがエラーハンドリングです。APIからのレスポンスにエラーが含まれる場合でも、ユーザーにとってわかりやすく、かつUIとして破綻しないように設計する必要があります。本記事では、ステータスコード別にコンポーネントを切り替える実践的なエラーハンドリングの実装方法を紹介します。

想定するユースケース

以下のようなAPIレスポンスを想定します。

• 200 OK：正常にデータ取得
• 401 Unauthorized：認証エラー
• 403 Forbidden：アクセス権限なし
• 404 Not Found：データ未存在
• 500 Internal Server Error：サーバーエラー

これらに対して、専用のエラー表示コンポーネントを切り替えることで、ユーザー体験を損なわずに明確なフィードバックを提供できます。

ディレクトリ構成の一例

src/
├─ components/
│  ├─ Error401.vue
│  ├─ Error403.vue
│  ├─ Error404.vue
│  ├─ Error500.vue
│  └─ DataView.vue
└─ views/
   └─ MainView.vue

メインビューの設計（MainView.vue）

<template>
  <component :is="currentComponent" />
</template>

<script>
import axios from 'axios';
import DataView from '@/components/DataView.vue';
import Error401 from '@/components/Error401.vue';
import Error403 from '@/components/Error403.vue';
import Error404 from '@/components/Error404.vue';
import Error500 from '@/components/Error500.vue';

export default {
  components: {
    DataView,
    Error401,
    Error403,
    Error404,
    Error500
  },
  data() {
    return {
      currentComponent: null
    };
  },
  async mounted() {
    try {
      const response = await axios.get('/api/data');
      if (response.status === 200) {
        this.currentComponent = 'DataView';
      }
    } catch (error) {
      const status = error.response?.status;
      switch (status) {
        case 401:
          this.currentComponent = 'Error401';
          break;
        case 403:
          this.currentComponent = 'Error403';
          break;
        case 404:
          this.currentComponent = 'Error404';
          break;
        case 500:
        default:
          this.currentComponent = 'Error500';
          break;
      }
    }
  }
};
</script>

エラーコンポーネントの例（Error404.vue）

<template>
  <div class="error-message">
    <h2>404 Not Found</h2>
    <p>お探しのデータは見つかりませんでした。</p>
  </div>
</template>

このように、各エラーコードに対応したメッセージや再試行ボタンを持たせることで、ユーザーへの配慮が行き届いたアプリケーションになります。

まとめ

Vue.jsでのAPI連携では、単にtry-catchでエラーを拾うだけでなく、コード別に表示を分岐させることで、UXの向上が期待できます。複数のコンポーネントを用意し、レスポンスに応じた切り替え処理を明確にする設計は、保守性や再利用性の面でも優れています。アプリケーションの品質を高めたい場合には、ぜひ取り入れてみてください。