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
340
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
26
日付をもう少し真面目に勉強中
rakus_fe
0
20
React19 β をざっと見る
rakus_fe
0
240
Reactのパフォーマンス改善例
rakus_fe
0
350
Typescript5.4の新機能
rakus_fe
0
220
非破壊的な配列メソッド
rakus_fe
0
280
ココがすごいぜ!Playwright Component Test
rakus_fe
0
350
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
150
Other Decks in Technology
See All in Technology
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
100
Practical GenAI with Go - Elastic and Golang Sydney
adriancole
0
130
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
390
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
4
640
AWS IAM Identity Center議論会 〜 認証認可結合モデルと認証認可分離モデル / 20240827-jawsug-arch-iam_identity_center
opelab
3
320
SHIFTの課題と目指したい組織像 / 20240827 Rinto Ikenoue
shift_evolve
0
140
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
450
Eventual Detection Engineering
ken5scal
0
390
2024年版 運用者たちのLLM
nwiizo
3
290
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
株式会社M2X エンジニアチーム紹介資料
m2xsoftware
0
320
Our Journey from in-House CD System to Open Source
ffjlabo
0
100
Featured
See All Featured
Designing with Data
zakiwarfel
98
5k
Code Review Best Practice
trishagee
62
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Adopting Sorbet at Scale
ufuk
72
8.9k
Designing Experiences People Love
moore
138
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
47k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
22
580
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
The Language of Interfaces
destraynor
153
23k
Faster Mobile Websites
deanohume
304
30k
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を使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?