Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ErrorBoundaryとSuspenseの導入検討
Search
rakus frontend
May 23, 2024
Technology
0
480
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
31
日付をもう少し真面目に勉強中
rakus_fe
0
26
React19 β をざっと見る
rakus_fe
0
260
Reactのパフォーマンス改善例
rakus_fe
0
380
Typescript5.4の新機能
rakus_fe
0
240
非破壊的な配列メソッド
rakus_fe
0
300
ココがすごいぜ!Playwright Component Test
rakus_fe
0
390
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
180
Other Decks in Technology
See All in Technology
podman_update_2024-12
orimanabu
1
290
Amazon Kendra GenAI Index 登場でどう変わる? 評価から学ぶ最適なRAG構成
naoki_0531
0
130
生成AIのガバナンスの全体像と現実解
fnifni
1
210
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
500
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
550
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
460
終了の危機にあった15年続くWebサービスを全力で存続させる - phpcon2024
yositosi
27
23k
.NET 9 のパフォーマンス改善
nenonaninu
0
1.3k
型情報を用いたLintでコード品質を向上させる
sansantech
PRO
2
140
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.9k
UI State設計とテスト方針
rmakiyama
3
790
新機能VPCリソースエンドポイント機能検証から得られた考察
duelist2020jp
0
230
Featured
See All Featured
A better future with KSS
kneath
238
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
4 Signs Your Business is Dying
shpigford
182
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Reflections from 52 weeks, 52 projects
jeffersonlam
347
20k
Navigating Team Friction
lara
183
15k
Building Applications with DynamoDB
mza
91
6.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
17
2.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Statistics for Hackers
jakevdp
796
220k
Optimizing for Happiness
mojombo
376
70k
Transcript
ErrorBoundaryとSuspense 導入検討 2024/05/21 FE情報共有会 北嶋初音
ErrorBoundaryと コンポーネントツリー内で発生するJavaScriptランタイムエラーをキャッチし、ア プリケーション 一部がクラッシュする を防ぐため も 。最終防衛線的なイ メージ。 function
App() { return ( // Hoge内でエラーが発生したら ErrorBoundaryで定義したフォールバック UIが表示される <ErrorBoundary> <Hoge /> </ErrorBoundary> ); }
Suspenseと 非同期データ 読み込み中にフォールバックUIを表示するため コンポーネン ト。例え 、データが読み込まれるまで 間にローディングUIを表示するために 使用される。 function
App() { return ( // Hoge内で非同期処理が発生したら Loadingが表示される <Suspense fallback={<div>Loading...</div>}> <Hoge /> </Suspense> ); }
やりたかったこと • 想定外エラー → すべてErrorBoundaryに任せる • loading処理 → すべてSuspenseに任せる
function App() { return ( <ErrorBoundary> <Suspense fallback={<div>Loading...</div>}> <Hoge /> </Suspense> </ErrorBoundary> ); }
これでハッピー!
これでハッピー! になれる ずだった。。
ErrorBoundaryで エラーハンドリング • API通信(axios)側でも「こ パターン 場合 ErrorBoundary相当 も を 表示させたいよ
」的な話が出てきてしまった ◦ そこでErrorBoundaryを使うために 、わざわざthrow errorする必要があったりと実装が複 雑になってしまう • そもそもErrorBoundary 共通エラーハンドリングなど ために利用すべき で ない、最終防衛線として使う が正しい で使い方がズレてきてしまう • それであれ 、利用するべきでないという結論に至った
Suspenseで ローディング表示 • エラーハンドリングと同様にこちらも個別管理 方が向いているなという結 論 • 例え 、複数 APIを同時に叩く画面で「部分的に取得済み
時 一部 み先に表示したいよ 」といった要求に 答えられなくなる • 柔軟な対応ができなくなる未来が見えてしまった
導入見送り
まとめ • シンプルに設計できる場合に ErrorBoundaryとSuspenseを使っても良さそ う • ただし機能要求が複雑になりそうな場合、柔軟性を考えると個別対応する が無難 • ErrorBoundaryを使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?