$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ErrorBoundaryとSuspenseの導入検討
Search
rakus frontend
May 23, 2024
Technology
0
450
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
30
日付をもう少し真面目に勉強中
rakus_fe
0
25
React19 β をざっと見る
rakus_fe
0
250
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
170
Other Decks in Technology
See All in Technology
2024/11/29_失敗談から学ぶ! エンジニア向けre:Invent攻略アンチパターン集
hiashisan
0
430
データ基盤の負債解消のためのリプレイス
livesense
PRO
0
160
Kubernetesを知る
logica0419
17
4.7k
Raspberry Pi 秋の新製品をチェックしてみよう / 20231202-rpi-jam-tokyo
akkiesoft
0
370
LangChainとSupabaseを活用して、RAGを実装してみた
atsushii
0
140
GAS × Discord bot × Gemini で作ったさいきょーの情報収集ツール
ysknsid25
1
710
プロセス改善とE2E自動テストによる、プロダクトの品質向上事例
tomasagi
1
3.3k
お悩みハンドブック紹介資料
grafferhandbook
0
940
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
15k
日本全国・都市3D化プロジェクト「PLATEAU」とデータ変換OSS「PLATEAU GIS Converter」の公開
nokonoko1203
4
350
Engineer Recruting Deck
siva_official
PRO
1
3.3k
Empowering Customer Decisions with Elasticsearch: From Search to Answer Generation
hinatades
PRO
0
290
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
410
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Code Reviewing Like a Champion
maltzj
520
39k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
2
240
The World Runs on Bad Software
bkeepers
PRO
65
11k
Rails Girls Zürich Keynote
gr2m
94
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Producing Creativity
orderedlist
PRO
341
39k
Building Adaptive Systems
keathley
38
2.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.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を使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?