Axiosのinterseptorからreact-error-boundaryにエラーを通知・処理をする仕組みを作成しています。データフェッチライブラリとしてSWRを採用した場合の問題点について解決する方法について紹介します。前回記事の補足です。
初めに
どもども！こんにちは最近SWRに入門した新米フロントエンドエンジニア龍ちゃんです。今回は前回記事（エラーハンドリング：axios＋react-error-boundary）のデータフェッチ部分をSWRに変えた場合の構成について追記をしていきたいと思います。
内容としては完全に補足となっているので、前回記事を参照したうえでこちらの記事を読んでもらえると助かります。基本コンセプトは変わっておらず、【react-error-boundary】でエラー画面を処理します。
僕自身も悩んでいる内容なので、心意気のあるフロントエンド担当者の方は**DM**待ってます。
それでは構成と実装について触れていきたいと思います。
構成
構成するにあたっての基本知識は以下になります。それぞれブログで紹介しています。
加えて【SWR】公式リファレンスで紹介されているエラーハンドリングを使用します。
基本コンセプトとしては、「Axios Interseptorを用いてresponseを監視して、エラーが発生した場合は【react-error-boundary】のuseErrorHandlerを使用して通知」になります。コンセプトを図にした内容を以下に示します。
バージョンが4に上がってから、react-error-boundary伝搬の書き方が変わりました！！ここはバージョン3までの書き方です！。バージョンアップによってhooksが追加されました。説明部分を以下に変更してください。
const { showBoundary } = useErrorBoundary();
showBoundary(error);実際のデータ取得部分を【SWR】を使用して取得して、データのアクセスには【Axios】を使用します。
コンポーネント設計は以下になります。
コーディング
内容としては、【SWR】のセットアップとエラーハンドリングを行うための構成について説明していきます。
あくまで補足ということで、基本コンセプトである「Axios Interseptorを用いてresponseを監視して、エラーが発生した場合は【react-error-boundary】のuseErrorHandlerを使用して通知」については理解しているものとして話を進めていきます。上記の構成を実現するために作成したコンポーネントは以下になります。
- react-error-boundary：エラーを表示するためのコンポーネント
- Axios Interseptor：エラーをキャッチして伝搬させるためのコンポーネント
上記に加えて
- SWR Config：SWRから発生するエラーをキャッチするためのコンポーネント
- 実際の使用方法用サンプル
を構成していきます。
SWRセットアップ
インストール自体は簡単です。
yarn add swrこれでセットアップは終了です。
SWR Config
こちらでは【SWR】を介してデータフェッチを行った場合のエラーを【react-error-boundary】に通知する仕組みを作成します。適当なファイルを作成してコピー＆ペーストをしてください。
import { useErrorHandler } from 'react-error-boundary';
import { AxiosError } from 'axios';
import { SWRConfig } from 'swr';
type Props = {
children: React.ReactNode;
};
export const SWRConfigComponent = (props: Props) => {
const { children } = props;
const errorHandler = useErrorHandler();
return (
<SWRConfig
value={{
onError(err) {
if (err instanceof AxiosError) errorHandler(err);
},
}}
>
{children}
</SWRConfig>
);
};
ここでは、SWRConfigを使用して共通設定を行っています。onErrorを作成することで、【SWR】でのエラーをキャッチすることができます。エラーを【axios】だった場合は【react-error-boundary】のuseErrorHandlerを使用してエラーを通知します。
【Axios Interseptor】を用いてエラー通知を行っていますが、初回マウントタイミングではエラーをキャッチすることができません。これはReactのレンダリングが関係していると思います。そのため、【SWR】と【axios】の両方でエラーハンドリングを行う必要があります。
実際の使用方法サンプル
こちらでは、先ほど作成したファイルを使用してコンポーネント設計に合わせて構築していきます。コンポーネント名としては以下になります。
- 【react-error-boundary】：
ReactErrorBoundaryComponent - 【Axios Interseptor】：
AxiosErrorHandlingComponent - 【SWR Config】：
SWRConfigComponent
import './App.css';
import { AxiosGetCompoennt } from './components/pages/AxiosTestComponent';
import { AxiosErrorHandlingComponent } from './utilities/AxiosClientComponent';
import { ReactErrorBoundaryComponent } from './utilities/ReactErrorBoundaryComponent';
import { SWRConfigComponent } from './utilities/SWRConfigComponent';
function App() {
return (
<>
<ReactErrorBoundaryComponent>
<AxiosErrorHandlingComponent>
<SWRConfigComponent>
<main className="flex h-full w-full flex-col items-center justify-center">
<AxiosGetCompoennt />
</main>
</SWRConfigComponent>
</AxiosErrorHandlingComponent>
</ReactErrorBoundaryComponent>
</>
);
}
export default App;
コンポーネントの構成の順番としては、一番上の層にReactErrorBoundaryComponentを次にAxiosErrorHandlingComponentを構築します。最後の層にSWRConfigComponentを構築します。三つの要素の中でエラーが発生した場合、ReactErrorBoundaryComponentでエラー画面が表示されます。
AxiosGetComponentは以下の内容です。
import useSWR from 'swr';
import { axiosClient } from '@/utilities/AxiosClientComponent';
import { LoadingComponent } from '@/utilities/LoadingComponent';
export const AxiosGetCompoennt = () => {
const { data, isLoading, isValidating } = useSWR('test', dataFetch);
if (isLoading || isValidating) return <LoadingComponent />;
return <>{data}</>;
};
const dataFetch = async () => {
await axiosClient.get('500');
return 'data get';
};基本的な使用方法としては、【SWR】で【axios】を利用したデータフェッチを利用しています。基本的なサンプルはこちらになります。
終わりに
お疲れ様です。前回記事（エラーハンドリング：axios＋react-error-boundary）の補足という形で、データフェッチ部分をSWRに変えた場合の構成について紹介しました。実務の裏話として、Recoilを使用したSuspense構成を作成しようと考えていたのですが、強つよエンジニアである『神』からストップが入ったので急遽設計を変える作業が入ったという訳です。機能選定に関しては知見が薄かったので、良い経験だと思ってブログにまとめていこうと思います。やっぱりいろんな観点が必要だと学びがありましたね。
それでは～技術検証を進めていきます。ではまた～
