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
260
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
9
日付をもう少し真面目に勉強中
rakus_fe
0
13
React19 β をざっと見る
rakus_fe
0
190
Reactのパフォーマンス改善例
rakus_fe
0
290
Typescript5.4の新機能
rakus_fe
0
190
非破壊的な配列メソッド
rakus_fe
0
240
ココがすごいぜ!Playwright Component Test
rakus_fe
0
280
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
130
Other Decks in Technology
See All in Technology
ベイジアンABテストってありなの? / Is Bayesian AB Testing Truly Effective?
ak_iyama
1
490
BedrockUpdatesPost-GW Summary
hedgehog051
2
180
プロダクト拡大フェーズでプロダクト検証サイクル効率化を目指す過程で見えたもの / Streamlining Product Validation in Growth Phase
kakehashi
4
1.1k
feature flag と OpenTelemetry
biwashi
5
1.4k
PHPでデータベースを作ってみた/create-data-with-php
hanhan1978
6
970
Bring your app’s core features to users with App Intents とか App Intents 関連の要約
ryomm
1
170
テストコードの観点から見たSansanのアーキテクチャ変遷
sansantech
PRO
2
140
よりアジャイルに向かう道のりとして、中止していたスクラムイベントを復活したら100Lの汗を流した話 / Reviving Scrum Events
kakehashi
2
160
フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?
kaminashi
6
2.9k
Startale_Culture_Deck_2024.pdf
startale
0
140
GA technologiesの経営戦略から駆動するデータ基盤構築
pacocat
0
450
240622_WACATE2024夏_BPPセッション_虚実皮膜のWACATEハイ
mkwrd
PRO
1
270
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Code Reviewing Like a Champion
maltzj
516
39k
Faster Mobile Websites
deanohume
300
30k
Designing on Purpose - Digital PM Summit 2013
jponch
112
6.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
23
2k
Code Review Best Practice
trishagee
57
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
73
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
KATA
mclloyd
18
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
22
1.8k
For a Future-Friendly Web
brad_frost
173
9.1k
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を使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?