エラーハンドリング
ErrorBoundary の配置
React Router と TanStack Query を使う画面で、ErrorBoundary をいくつ、どこに置くかを決める基準をインストール済みのソースで確かめる。ルート、画面、領域ごとに受けるエラーと戻し方、fallback をひとつにそろえる方法、再試行の条件まで扱う。
再試行ボタンが効かない理由
react-error-boundary の再試行ボタンを押しても同じ fallback がまた出る三つの場合をソースで確かめる。クエリのエラーは QueryErrorResetBoundary、レンダーエラーは queryFn の検査、React.lazy のチャンク失敗は再読み込みで解く。
エラーの伝播
同じエラーを七か所から投げてみると、ErrorBoundary に届くのは四つだけだ。コンパイル時、レンダーとライフサイクル、サーバーデータ、ページ遷移、外部ライブラリ、イベントと非同期がそれぞれどこへ伝播するのかを、公式ドキュメントとインストール済みのソースで確認する。