【React】axiosエラーハンドリング共通化

はじめに

今回はHTTP Clientライブラリであるaxiosのエラーハンドリング共通化方法について書いていこうと思います。

エラーハンドリングとは

エラーハンドリングとは、プログラムの処理中に処理が妨げられる事象が発生した際、その処理をエラーとして対処する処理のことです。
フロントエンドでAPI通信を行なった際、レスポンスがエラーだった場合に何か処理を行うということはよくあると思います。
※例えば、404が帰ってきたらNotFoundページへ遷移させるなど
下記のようにAPI通信を行う箇所全てでエラーハンドリングの処理を書いていたら記述量も多くなり面倒です。

const fetchData = async () => {
  try {
    const response = await axios.get("http://localhost:3000/");

  } catch(err) {
    // エラー時の処理
  }
}

axios エラーハンドリングの共通化

axiosのInterceptorsを活用する。

Interceptorsについてはこちら参照：Interceptors

Interceptorsを使って、axiosのエラーハンドリングを共通化することでAPI通信を行う箇所全てでエラーハンドリングを行う必要がなくなり、ページごとの独自のエラー処理のみ記述すればよくなります！

axiosErrorHandler.js

axios.interceptors.response.use(
  (response) => response, // 成功時の処理 今回の例ではresponseを返すだけ
  (error) => {            // エラー時の処理
    switch (error.response?.status) {
      case 422:
　　　　　　　　　　　　　　　　　// ステータスコード別の処理

        // Promise reject オブジェクトを必ずリターンする
        return Promise.reject(error.response?.data);
      case 404:
        // ステータスコード別の処理

        return Promise.reject(error.response?.data);
      case 500:
　　　　　　　　　　　　　　　　　// ステータスコード別の処理

        return Promise.reject(error.response?.data);
      default:
　　　　　　　　　　　　　　　　　// デフォルトの処理

        return Promise.reject(error.response?.data);
    }
  }
);

※Tips ： Interceptorsはaxiosのrequest前処理も共通化することができる

Tips ： axios エラーハンドリング内で React Hooks を使う

エラーハンドリング共通化処理内でHooksを使用したいことがあると思います。
例 : 404でNotFoundページへ遷移させる為にuseNavigateを使用するなど
通常React Hooksはコンポーネント内のトップレベルでしか呼び出せません。
参考 : https://qiita.com/tatsumin0206/items/4e1076e2deedf20a9485
その為エラーハンドリング共通化処理内で使用するには少し工夫が必要です。
具体的には、エラーハンドリング用のコンポーネントを作成し、コンポーネント内のuseEffectで共通化処理を記述します

export const AxiosErrorHandleProvider = ({ children }) => {
    const navigate = useNavigate(); // Hooksが使用できる！！

    useEffect(() => {
      // axiosの共通エラーハンドリング記述
      apiClient.interceptors.response.use(
        (response) => response,
        (error) => {
          switch (error.response?.status) {
            case 404:
              navigate('/404'); // navigateを使用してリダイレクト
              return Promise.reject(error.response?.data);
          }
        }
      );
    }, []);

    return <>{children}</>;
  }
);

あとは下記のような形でAppコンポーネントを囲います。

ReactDOM.render(
  <React.StrictMode>
    <AxiosErrorHandleProvider> # 作成したコンポーネントでAppを囲う
      <App />
    </AxiosErrorHandleProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

以上でaxiosエラーハンドリング内でReact Hooksを使用できるようになります！

少しでも参考になれば幸いです。