LoginSignup
34

More than 1 year has passed since last update.

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

Posted at

はじめに

今回は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を使用できるようになります!

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34