Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ErrorBoundaryとSuspenseの導入検討

 ErrorBoundaryとSuspenseの導入検討

rakus frontend

May 23, 2024
Tweet

More Decks by rakus frontend

Other Decks in Technology

Transcript

  1. ErrorBoundaryと 
 コンポーネントツリー内で発生するJavaScriptランタイムエラーをキャッチし、ア プリケーション 一部がクラッシュする を防ぐため も 。最終防衛線的なイ メージ。
 function

    App() { return ( // Hoge内でエラーが発生したら ErrorBoundaryで定義したフォールバック UIが表示される <ErrorBoundary> <Hoge /> </ErrorBoundary> ); }
  2. やりたかったこと
 • 想定外エラー → すべてErrorBoundaryに任せる 
 • loading処理 → すべてSuspenseに任せる


    function App() { return ( <ErrorBoundary> <Suspense fallback={<div>Loading...</div>}> <Hoge /> </Suspense> </ErrorBoundary> ); }
  3. ErrorBoundaryで エラーハンドリング
 • API通信(axios)側でも「こ パターン 場合 ErrorBoundary相当 も を 表示させたいよ

    」的な話が出てきてしまった
 ◦ そこでErrorBoundaryを使うために 、わざわざthrow errorする必要があったりと実装が複 雑になってしまう
 • そもそもErrorBoundary 共通エラーハンドリングなど ために利用すべき で ない、最終防衛線として使う が正しい で使い方がズレてきてしまう
 • それであれ 、利用するべきでないという結論に至った

  4. Suspenseで ローディング表示
 • エラーハンドリングと同様にこちらも個別管理 方が向いているなという結 論
 • 例え 、複数 APIを同時に叩く画面で「部分的に取得済み

    時 一部 み先に表示したいよ 」といった要求に 答えられなくなる
 • 柔軟な対応ができなくなる未来が見えてしまった