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
690
ErrorBoundaryとSuspenseの導入検討
rakus frontend
May 23, 2024
Tweet
Share
More Decks by rakus frontend
See All by rakus frontend
新卒FEが1年目に取り組んだこと・学んだこと
rakus_fe
0
44
日付をもう少し真面目に勉強中
rakus_fe
0
34
React19 β をざっと見る
rakus_fe
0
300
Reactのパフォーマンス改善例
rakus_fe
0
470
Typescript5.4の新機能
rakus_fe
0
270
非破壊的な配列メソッド
rakus_fe
0
330
ココがすごいぜ!Playwright Component Test
rakus_fe
0
470
スプレッドシートのセル結合がつらいので足掻いてみた話
rakus_fe
0
220
Other Decks in Technology
See All in Technology
ai bot got sick (abc 2025s version)
kojira
0
150
Cursor Meetup Tokyo
iamshunta
5
1.5k
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
270
AI Engineering Summit Pre Event LT #10
okaru
2
500
CSSDay, Amsterdam
brucel
0
290
ゆるSRE #11 LT
okaru
1
460
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
6
1k
Text-to-SQLの評価データセットを作って最新LLMモデルの性能評価をしてみた
gotalab555
3
680
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
1
1.2k
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
580
AIコーディング新時代を生き残るための試行錯誤 / AI Coding Survival Guide
tomohisa
8
9.4k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Optimizing for Happiness
mojombo
379
70k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
670
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Gamification - CAS2011
davidbonilla
81
5.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
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を使うために、、
ように手段と目的が逆転してしまった 少し反省
皆さん 商材で 使ってますか?