【Vue.js/Nuxt.js】axiosインターセプターで「TypeError: Cannot read properties of undefined (reading ‘data’)」が発生する原因と解決策

axiosのエラーハンドリングでハマったので備忘録として残します。Vue.jsやNuxt.jsのプロジェクトで共通のエラー処理を実装するためにaxiosのインターセプターを利用することは多いですが、実装が不十分だと逆に原因不明のエラーを招くことがあります。

この記事でわかること
現象
環境
原因
解決策
- 修正前（Before）
- 修正後（After）
まとめ

この記事でわかること

TypeError: Cannot read properties of undefined (reading ‘data’) が発生する根本原因
axiosインターセプターにおける安全なエラーレスポンスの判定方法
サーバーエラー以外のネットワークエラーやタイムアウトへの対処法

現象

APIリクエストが失敗した際、コンソールに以下のエラーが表示され、本来実行したいエラーハンドリング（トースト通知や遷移処理など）が正常に動作しない現象が発生します。

TypeError: Cannot read properties of undefined (reading 'data')

環境

Vue.js / Nuxt.js
axios

原因

このエラーは、axiosのレスポンスインターセプター内で、エラーオブジェクトの response プロパティが未定義（undefined）の状態で、その配下にある data プロパティにアクセスしようとしたために発生しています。

axiosのエラーハンドリングでは、以下の3つのパターンを考慮する必要がありますが、修正前のコードでは「1. サーバーからの応答」しか考慮できていない場合がほとんどです。

エラーの種類	error.response の有無	発生する状況
サーバーエラー	あり (Object)	500 Internal Server Error など
ネットワークエラー	なし (undefined)	オフライン、DNS解決失敗
タイムアウト	なし (undefined)	timeout 設定時間を超過

サーバーに到達しなかった場合やタイムアウト時は response オブジェクト自体が作成されないため、参照エラーが発生します。

解決策

error.response、error.request の順に存在をチェックすることで、あらゆるエラーパターンを安全にハンドリングできます。

修正前（Before）

axios.interceptors.response.use(
  response => response,
  error => {
    // error.response が無い場合に TypeError が発生する
    console.error('API Error:', error.response.data);
    return Promise.reject(error);
  }
);

修正後（After）

axios.interceptors.response.use(
  response => response,
  error => {
    // 1. サーバーがステータスコードを返した場合 (4xx, 5xx)
    if (error.response && error.response.data) {
      console.error('API Error Response:', error.response.data);
      // 必要に応じてサーバーからのエラーメッセージを抽出
      // const msg = error.response.data.message || 'Error';
    }
    // 2. リクエストは送られたが、レスポンスが返ってこなかった場合 (ネットワークエラー, タイムアウト)
    else if (error.request) {
      console.error('Network Error: No response received', error.message);
    }
    // 3. リクエストの設定自体に問題があった場合
    else {
      console.error('Axios Setup Error:', error.message);
    }

    return Promise.reject(error);
  }
);