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
ReactのSuspenseを使った非同期処理のエラーハンドリング
Search
taro
September 08, 2022
Programming
9
6.9k
ReactのSuspenseを使った非同期処理のエラーハンドリング
「フロントエンドLT会 - vol.8」で発表したスライドです。
https://rakus.connpass.com/event/255095/
taro
September 08, 2022
Tweet
Share
More Decks by taro
See All by taro
VitestのIn-Source Testingが便利
taro28
4
730
ローコードサービスの進化のためのモノレポ移行
taro28
1
370
ローコードSaaSのUXを向上させるためのTypeScript
taro28
2
930
GraphQLをServer Componentsで使いたい
taro28
8
2.9k
Sequenceを理解する
taro28
1
250
propsのバケツリレー対策でGlobal_Stateを使うその前に
taro28
11
4.6k
状態ってなに?🙃
taro28
2
530
一口目から美味しいReactのスルメ本🦑
taro28
3
1.5k
T-falってすごい【社内LT】
taro28
1
290
Other Decks in Programming
See All in Programming
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.7k
RubyKaigi Dev Meeting 2025
tenderlove
1
130
SwiftUI API Design Lessons
niw
1
280
Strategic Design (DDD)for the Frontend @DDD Meetup Stuttgart
manfredsteyer
PRO
0
140
AI時代の開発者評価について
ayumuu
0
140
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
210
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
3
510
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
300
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
160
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
380
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
150
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
2
170
Featured
See All Featured
Visualization
eitanlees
146
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
RailsConf 2023
tenderlove
30
1.1k
BBQ
matthewcrist
88
9.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Transcript
ReactのSuspenseを使った 非同期処理の エラーハンドリング フロントエンドLT会 - vol.8 2022.09.08(木)
自己紹介 • taro( @taroro_tarotaro) • Shelfyで建設SaaSを作ってるエンジニア(あと少しで2年) • React, Spring, Django,
AWS, k8s
はじめに
Suspenseとは
Suspenseとは ComponentをLoading状態にできる機能
Suspenseとは ComponentをLoading状態にできる機能 これまで
Suspenseとは ComponentをLoading状態にできる機能 これまで Suspenseを使うと
Suspenseとは ComponentをLoading状態にできる機能 これまで Suspenseを使うと 取得されている前提で 宣言的に書ける!
Suspenseとは 宣言的UIフレームワーク・ライブラリのSuspenseの提供状況 • React→提供済 • Vue→実験的機能として提供 • Solid→提供済 • Svelte→未提供
Suspenseとは 宣言的UIフレームワーク・ライブラリのSuspenseの提供状況 • React→提供済 • Vue→実験的機能として提供 • Solid→提供済 • Svelte→未提供
→Suspenseは宣言的UIの標準になっていくと考えられる機能 →React以外の使い手の方にも、参考になれば嬉しいです🙂
今までの非同期処理の エラーハンドリング
Promiseチェーンでのエラーハンドリング Fetch API axios
データ取得ライブラリ(swr)でエラーハンドリング In Hooks or Component
データ取得ライブラリ(swr)でエラーハンドリング In Hooks or Component swr内ではtry-catchしている https://github.com/vercel/swr/blob/main/core/use-swr.ts#L307
Suspenseを使ってみる
Suspenseを使ってみる Suspense導入前
Suspenseを使ってみる Suspense導入前 Suspense導入後
Suspenseを使ってみる エラーが発生(ホワイトアウト) Suspense導入後
Suspenseを使ってみる エラーが発生(ホワイトアウト) →swrがエラーをcatchしていない Suspense導入後
Suspenseを使ってみる エラーが発生(ホワイトアウト) →swrがエラーをcatchしていない →なぜか? Suspense導入後
Reactの Suspenseの仕組み
ReactのSuspenseの仕組み Suspense内のComponentをrender
ReactのSuspenseの仕組み render中にpromiseがthrowされたら、直近のSuspenseがcatch
ReactのSuspenseの仕組み promiseがpendingの時は、Suspense内にfallbackをrender
ReactのSuspenseの仕組み settled(fulfilled or rejected)されたら再度render
ReactのSuspenseの仕組み renderに成功したら描画される!(再度 promiseがthrowされたらループ)
ReactのSuspenseの仕組み swrも内部でpromiseをthrow https://github.com/vercel/swr/blob/main/core/use-swr.ts#L597
ReactのSuspenseの仕組み swrも内部でpromiseをthrow promiseを扱うのはsuspenseなので、 swrはエラーをcatchしていない
じゃあどうするか?
じゃあどうするか? SWRの公式ドキュメント https://swr.vercel.app/docs/suspense
Error Boundary エラーハンドリング用ライフサイクルメソッドを使っ たComponent (V16~) • getDerivedStateFromError • ComponentDidCatch 子Componentツリーで発生した
JavaScriptのエラーをcatch • fallbackを表示 • エラーを記録 https://reactjs.org/docs/error-boundaries.html
Error Boundary https://reactjs.org/docs/error-boundaries.html Error Boundaryって、非同期処理に使 えなかった気がする。。。
Error Boundaryって、非同期処理に使 えなかった気がする。。。 Error Boundary https://reactjs.org/docs/error-boundaries.html
Error Boundaryって、非同期処理に使 えなかった気がする。。。 Error Boundary →React内部で発生するエラーしか catchできない https://reactjs.org/docs/error-boundaries.html
Error Boundary https://reactjs.org/docs/error-boundaries.html Error Boundaryって、非同期処理に使 えなかった気がする。。。 →React内部で発生するエラーしか catchできない →Suspenseだと非同期処理もReact内 部で制御されるからcatchできる
より宣言的に書けるようになった! • ローディング→Suspense • エラー→ErrorBoundary Error Boundary使う
エラーハンドリングを 分岐したい
catchしたエラーの中身を見て、 分岐してあげればOK! エラーハンドリングを分岐したい
Error Boundaryを分けたい時は、 errorをre-throwすればOK! エラーハンドリングを分岐したい
Error Boundaryを分けたい時は、 errorをre-throwすればOK! re-throwしないError Boundaryが、 エントリーポイントにあると安心 🙂 ErrorBoundary自体、low-levelのAPIで構築されて いるので柔軟性は高い エラーハンドリングを分岐したい
さいごに
さいごに Error BoundaryとSuspenseめっちゃ似てる
Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312
Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312
Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary 宣言的にUIを構築するには、その対象を Reactの管理下に置く必要がある • state: 宣言的に書ける • ref:
宣言的に書けない さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312
Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary 宣言的にUIを構築するには、その対象を Reactの管理下に置く必要がある • state: 宣言的に書ける • ref:
宣言的に書けない 宣言的に非同期処理扱うために、 PromiseをReactにthrowしている さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312
Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary 宣言的にUIを構築するには、その対象を Reactの管理下に置く必要がある • state: 宣言的に書ける • ref:
宣言的に書けない 宣言的に非同期処理扱うために、 PromiseをReactにthrowしている Promiseをthrowすることへの違和感が減る (?) さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312
まとめ
まとめ • Suspenseを使うと非同期処理が宣言的に書ける • Suspenseだと非同期処理のエラーもError Boundaryで宣言 的にエラーハンドリングできる • SuspenseはPromiseのみをcatchするBoundary
まとめ • Suspenseを使うと非同期処理が宣言的に書ける • Suspenseだと非同期処理のエラーもError Boundaryで宣言 的にエラーハンドリングできる • SuspenseはPromiseのみをcatchするBoundary SuspenseとError
Boundaryでより宣言的なUI開発を!
ありがとうございました!