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
660
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
41
日付をもう少し真面目に勉強中
rakus_fe
0
31
React19 β をざっと見る
rakus_fe
0
290
Reactのパフォーマンス改善例
rakus_fe
0
450
Typescript5.4の新機能
rakus_fe
0
270
非破壊的な配列メソッド
rakus_fe
0
330
ココがすごいぜ!Playwright Component Test
rakus_fe
0
450
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
210
Other Decks in Technology
See All in Technology
Running JavaScript within Ruby
hmsk
3
430
Goの組織でバックエンドTypeScriptを採用してどうだったか / How was adopting backend TypeScript in a Golang company
kaminashi
12
9.1k
LT Slide 2025-04-22
takesection
0
110
社会人力と研究力ー博士号をキャリアの武器にするー
kentaro
2
100
Perl歴約10年のエンジニアがフルスタックTypeScriptに出会ってみた
papix
1
260
Pythonデータ分析実践試験 出題傾向や学習のポイントとテクニカルハイライト
terapyon
1
110
Mastraに入門してみた ~AWS CDKを添えて~
tsukuboshi
0
380
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
16
5k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
7
63k
AIとSREで「今」できること
honmarkhunt
3
690
【Λ(らむだ)】最近のアプデ情報 / RPALT20250422
lambda
0
340
OPENLOGI Company Profile
hr01
0
63k
Featured
See All Featured
It's Worth the Effort
3n
184
28k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
KATA
mclloyd
29
14k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
690
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Facilitating Awesome Meetings
lara
54
6.3k
Done Done
chrislema
184
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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を使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?