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
1
750
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
48
日付をもう少し真面目に勉強中
rakus_fe
0
43
React19 β をざっと見る
rakus_fe
0
320
Reactのパフォーマンス改善例
rakus_fe
0
510
Typescript5.4の新機能
rakus_fe
0
300
非破壊的な配列メソッド
rakus_fe
0
350
ココがすごいぜ!Playwright Component Test
rakus_fe
0
540
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
250
Other Decks in Technology
See All in Technology
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
490
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
140
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
320
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
270
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.6k
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
150
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
120
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
150
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
190
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
300
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
950
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Context Engineering - Making Every Token Count
addyosmani
7
260
RailsConf 2023
tenderlove
30
1.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
980
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Producing Creativity
orderedlist
PRO
347
40k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
For a Future-Friendly Web
brad_frost
180
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
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を使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?