catchしたerrorがAxiosErrorか判定する

始めに

axiosを使ってtry-catchでAPIリクエストしてエラーを受け取る際、リクエストエラーだけ返ってくる想定で書いていることが多いですが、実際は他のエラーもあり得ます。
err.responseとか見たらなんとなくaxiosのエラーオブジェクトか分かりますが、型チェックをしながら上手く判定する方法がありますので記事にしました。

async function fetch() {
  try {
    // 存在しないデータにアクセスしてエラーになる
    const arr = [1, 2, 3]
    arr[4].toString()
    
    const res = await axios.get('http://xxxxx')
  } catch (err) {
    // errはレスポンスエラー以外のエラーである可能性がある
  }
}

AxiosErrorの判定方法

結論としては、以下のようなtype guardな判定メソッドを用意すれば解決します。

axiosエラーかの判定メソッド

import { AxiosError } from 'axios';

/**
 * axiosのエラーなのかチェック
 * @param error - エラーオブジェクト
 * @returns axiosエラーか
 */
function isAxiosError(error: any): error is AxiosError {
  return !!error.isAxiosError;
}

後はメソッドを呼んでチェックしたら、その中はAxiosErrorとして認識されます。

async function fetch() {
  try {
  } catch (err) {
    if (isAxiosError(err)) {
      // この中のerrはAxiosErrorとして認識される
    }
  }
}

エディタ上ではこんな感じに表示されます。

補足

2021/05/22追記
v0.21.1からaxiosに組み込まれるようになったので、それを呼び出すだけで良さそうです。それ以前のものを使っている方は上記の通り自前で用意する必要があります。

if (axios.isAxiosError(err)) {
  // この中のerrはAxiosErrorとして認識される
}

終わりに

以上がcatchされたエラーがAxiosErrorかを判定する方法でした。async/awaitは便利ですが、エラーハンドリングはその他のエラーも拾っていることを忘れがちなのでキチンと判定していきたいなと思いました。

参考
https://www.reddit.com/r/typescript/comments/f91zlt/how_do_i_check_that_a_caught_error_matches_a/