👍

Axiosしているならエラーハンドリングはinterceptors一択

2022/10/07に公開

JavaScript

error

axios

tech

Axiosのinterceptorsを使うだけ

フロントエンドのエラーハンドリングで悩んでいた時期もありましたが、APIのエラーハンドリングに関してはこの記事で紹介する内容が最も良さそうだと思いました。

一応、フロントエンドがJavaScriptのプロジェクトでAPIの接続にAxiosを使っているという前提になります。

Axiosがなんなのかはふれません🫠

AxiosではRequestとResponseの前に処理を差し込めるinterceptorsというAPIが用意されています。

これをimportしたaxiosのclientに上書きしてあげるだけです。こんな感じ。

import axios from 'axios';

/* Axios の Response 時の Interceptor */
axios.interceptors.response.use(
  (response) => response, // 成功時のresponseはそのまま返す
  (error) => {
    /* ここにエラーハンドリングの処理を書く */
  }
);

Requestも同様です。

Reactなどを使っているとコンポーネント内にAPIを実行する処理を書いたりして、エラーハンドリングの処理が各コンポーネントに散乱して、処理方法の統一をすることが難しくなることがよくありますが、これを使用することで、APIに関するエラーハンドリングの処理は統一できます。

おまけ

おまけでReactのUIライブラリMantineを使ったエラーのトーストを表示する実装の例を載せます。（完全に私の好み）

import axios from 'axios';
import { showNotification } from '@mantine/notifications';

/* Axios の Response 時の Interceptor */
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    /* 401 Unauthorized */
    if (error.response?.status === 401) {
	    // Maintine関係ないけどここは認証していない場合にログイン画面に遷移する処理とか書くといい
    }

    /* AxiosError */
    if (error.isAxiosError && error.response?.data?.errors) {
      const errorMessage = error.response.data.errors.messages.join('\n');
      showNotification({
        title: 'エラーが発生しました',
        message: errorMessage || '予期せぬエラーが発生しました',
        color: 'red',
      });

      return;
    }

    /* 例外 */
    showNotification({
      title: 'エラーが発生しました',
      message:
        typeof error?.message === 'string'
          ? error.message
          : '予期せぬエラーが発生しました',
      color: 'red',
    });
  }
);

MaintineはshowNotificationという関数を呼ぶだけでトーストを呼ぶことができるので、なかなかシンプルなコードになっている部分が気に入っています。

補足

一応エラーがAxiosで検知したエラーかどうかによって処理を分けています。Network Errorなどは例外処理のほうになるかと思います。このへんは各自でお好みで。

Axiosのinterceptorsを使うだけ

おまけ

Discussion