エラーハンドリング：axios＋react-error-boundary

const { showBoundary } = useErrorBoundary();
showBoundary(error);

import { ErrorBoundary, FallbackProps } from 'react-error-boundary';

import { AxiosError } from 'axios';

type Props = {
  children: React.ReactNode;
};

export const ReactErrorBoundaryComponent = (props: Props) => {
  const { children } = props;
  return <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>;
};

const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
  // axios error
  if (error instanceof AxiosError)
    return (
      <>
        <pre>
          react-error-boundary axios error {error.message} | {error.code}
        </pre>
        <button type="button" onClick={resetErrorBoundary}>
          reset button
        </button>
      </>
    );

  //   normal error
  return (
    <>
      <pre>react-error-boundary {error.message}</pre>
      <button type="button" onClick={resetErrorBoundary}>
        reset button
      </button>
    </>
  );
};

import { useEffect } from 'react';
import { useErrorHandler } from 'react-error-boundary';

import axios, { AxiosError, AxiosResponse } from 'axios';

export const axiosClient = axios.create({
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json',
  },
  baseURL: 'http://localhost:4242/dummy/',
});

type Props = {
  children: React.ReactNode;
};

export const AxiosErrorHandlingComponent = (props: Props) => {
  const { children } = props;
  const errorHandler = useErrorHandler();

  useEffect(() => {
    const responseInterceptor = axiosClient.interceptors.response.use(
      (response: AxiosResponse) => {
        return response;
      },
      (error: AxiosError) => {
        errorHandler(error);
        return Promise.reject(error);
      }
    );

    // クリーンアップ
    return () => {
      axiosClient.interceptors.response.eject(responseInterceptor);
    };
  }, [errorHandler]);

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

import { Suspense } from 'react';

import { AxiosGetCompoennt } from './components/pages/AxiosTestComponent';
import { AxiosErrorHandlingComponent } from './utilities/AxiosClientComponent';
import { LoadingComponent } from './utilities/LoadingComponent';
import { ReactErrorBoundaryComponent } from './utilities/ReactErrorBoundaryComponent';

function App() {
  return (
    <>
      <ReactErrorBoundaryComponent>
        <AxiosErrorHandlingComponent>
          <Suspense fallback={<LoadingComponent />}>
            <main className="flex h-full w-full flex-col items-center justify-center">
              <AxiosGetCompoennt />
            </main>
          </Suspense>
        </AxiosErrorHandlingComponent>
      </ReactErrorBoundaryComponent>
    </>
  );
}

export default App;

コンポーネントの構成の順番としては、一番上の層にReactErrorBoundaryComponentを次にAxiosErrorHandlingComponentを構築します。次に好みによりますが、Suspense をデータアクセスするコンポーネントより上位の位置に設置します。今回であればAxiosGetComponentでデータアクセスします。

AxiosGetComponentは以下の内容です。

import { axiosClient } from '@/utilities/AxiosClientComponent';
const flag = { dataFetch: false };

export const AxiosGetCompoennt = () => {
  const data = dataFetch();
  return <>{data}</>;
};
const dataFetch = () => {
  if (!flag.dataFetch) throw axiosClient.get('400').then(() => (flag.dataFetch = true));
  return 'data get';
};
 

Suspenseを機能させるためには、Promiseをthrowする必要があります。Promiseが解決されるまで、fallbackに設定しているコンポーネントが表示されます。内容としては、400エラーが出る画面にアクセスしてエラーを表示しています。

終わりに

今回は、実務で採用しようと考えているエラーハンドリング方法について解説しました。データの取得部分に関して言えばサンプルのため簡易的な部分になりますが、エラーハンドリングの骨組みに関しては以下の方法で進めていこうと思います。

僕自身かなり悩んでいる内容になります。構築方法に関しては、ベストではないが無難な選択かなと思っています。一般的かどうかは先輩がいないので判断がつきません。なので、先輩フロントエンドエンジニアもしくは一緒に悩んでくれるエンジニアの皆さんはTwitterでお問い合わせお願いします。応援メッセージも待ってますねｗ。僕のアカウントはこちらです。

それではまた～