ErrorBoundaryとSuspenseの導入検討

Transcript

1. ErrorBoundaryとSuspense 導入検討 2024/05/21 FE情報共有会 北嶋初音
2. ErrorBoundaryと 
 コンポーネントツリー内で発生するJavaScriptランタイムエラーをキャッチし、ア プリケーション 一部がクラッシュする を防ぐため も 。最終防衛線的なイ メージ。
 function App() { return ( // Hoge内でエラーが発生したら ErrorBoundaryで定義したフォールバック UIが表示される <ErrorBoundary> <Hoge /> </ErrorBoundary> ); }
3. Suspenseと 
 非同期データ 読み込み中にフォールバックUIを表示するため コンポーネン ト。例え 、データが読み込まれるまで 間にローディングUIを表示するために 使用される。
 function App() { return ( // Hoge内で非同期処理が発生したら Loadingが表示される <Suspense fallback={<div>Loading...</div>}> <Hoge /> </Suspense> ); }
4. やりたかったこと
 • 想定外エラー → すべてErrorBoundaryに任せる 
 • loading処理 → すべてSuspenseに任せる
 function App() { return ( <ErrorBoundary> <Suspense fallback={<div>Loading...</div>}> <Hoge /> </Suspense> </ErrorBoundary> ); }
5. これでハッピー！
6. これでハッピー！ になれる ずだった。。
7. ErrorBoundaryで エラーハンドリング
 • API通信（axios）側でも「こ パターン 場合 ErrorBoundary相当 も を 表示させたいよ 」的な話が出てきてしまった
 ◦ そこでErrorBoundaryを使うために 、わざわざthrow errorする必要があったりと実装が複 雑になってしまう
 • そもそもErrorBoundary 共通エラーハンドリングなど ために利用すべき で ない、最終防衛線として使う が正しい で使い方がズレてきてしまう
 • それであれ 、利用するべきでないという結論に至った

8. Suspenseで ローディング表示
 • エラーハンドリングと同様にこちらも個別管理 方が向いているなという結 論
 • 例え 、複数 APIを同時に叩く画面で「部分的に取得済み 時 一部 み先に表示したいよ 」といった要求に 答えられなくなる
 • 柔軟な対応ができなくなる未来が見えてしまった

9. 導入見送り
10. まとめ
 • シンプルに設計できる場合に ErrorBoundaryとSuspenseを使っても良さそ う
 • ただし機能要求が複雑になりそうな場合、柔軟性を考えると個別対応する が無難
 • ErrorBoundaryを使うために、、 ように手段と目的が逆転してしまった 少し反省

11. 皆さん 商材で 使ってますか？