Tweet
Tweet

Slide 1

Slide 1 text

ReactのSuspenseを使った 非同期処理の エラーハンドリング フロントエンドLT会 - vol.8 2022.09.08(木)

Slide 2

Slide 2 text

自己紹介 ● taro( @taroro_tarotaro) ● Shelfyで建設SaaSを作ってるエンジニア（あと少しで2年） ● React, Spring, Django, AWS, k8s

Slide 3

Slide 3 text

はじめに

Slide 4

Slide 4 text

Suspenseとは

Slide 5

Slide 5 text

Suspenseとは ComponentをLoading状態にできる機能

Slide 6

Slide 6 text

Suspenseとは ComponentをLoading状態にできる機能 これまで

Slide 7

Slide 7 text

Suspenseとは ComponentをLoading状態にできる機能 これまで Suspenseを使うと

Slide 8

Slide 8 text

Suspenseとは ComponentをLoading状態にできる機能 これまで Suspenseを使うと 取得されている前提で 宣言的に書ける！

Slide 9

Slide 9 text

Suspenseとは 宣言的UIフレームワーク・ライブラリのSuspenseの提供状況 ● React→提供済 ● Vue→実験的機能として提供 ● Solid→提供済 ● Svelte→未提供

Slide 10

Slide 10 text

Suspenseとは 宣言的UIフレームワーク・ライブラリのSuspenseの提供状況 ● React→提供済 ● Vue→実験的機能として提供 ● Solid→提供済 ● Svelte→未提供 →Suspenseは宣言的UIの標準になっていくと考えられる機能 →React以外の使い手の方にも、参考になれば嬉しいです🙂

Slide 11

Slide 11 text

今までの非同期処理の エラーハンドリング

Slide 12

Slide 12 text

Promiseチェーンでのエラーハンドリング Fetch API axios

Slide 13

Slide 13 text

データ取得ライブラリ(swr)でエラーハンドリング In Hooks or Component

Slide 14

Slide 14 text

データ取得ライブラリ(swr)でエラーハンドリング In Hooks or Component swr内ではtry-catchしている https://github.com/vercel/swr/blob/main/core/use-swr.ts#L307

Slide 15

Slide 15 text

Suspenseを使ってみる

Slide 16

Slide 16 text

Suspenseを使ってみる Suspense導入前

Slide 17

Slide 17 text

Suspenseを使ってみる Suspense導入前 Suspense導入後

Slide 18

Slide 18 text

Suspenseを使ってみる エラーが発生（ホワイトアウト） Suspense導入後

Slide 19

Slide 19 text

Suspenseを使ってみる エラーが発生（ホワイトアウト） →swrがエラーをcatchしていない Suspense導入後

Slide 20

Slide 20 text

Suspenseを使ってみる エラーが発生（ホワイトアウト） →swrがエラーをcatchしていない →なぜか？ Suspense導入後

Slide 21

Slide 21 text

Reactの Suspenseの仕組み

Slide 22

Slide 22 text

ReactのSuspenseの仕組み Suspense内のComponentをrender

Slide 23

Slide 23 text

ReactのSuspenseの仕組み render中にpromiseがthrowされたら、直近のSuspenseがcatch

Slide 24

Slide 24 text

ReactのSuspenseの仕組み promiseがpendingの時は、Suspense内にfallbackをrender

Slide 25

Slide 25 text

ReactのSuspenseの仕組み settled(fulfilled or rejected)されたら再度render

Slide 26

Slide 26 text

ReactのSuspenseの仕組み renderに成功したら描画される！（再度 promiseがthrowされたらループ）

Slide 27

Slide 27 text

ReactのSuspenseの仕組み swrも内部でpromiseをthrow https://github.com/vercel/swr/blob/main/core/use-swr.ts#L597

Slide 28

Slide 28 text

ReactのSuspenseの仕組み swrも内部でpromiseをthrow promiseを扱うのはsuspenseなので、 swrはエラーをcatchしていない

Slide 29

Slide 29 text

じゃあどうするか？

Slide 30

Slide 30 text

じゃあどうするか？ SWRの公式ドキュメント https://swr.vercel.app/docs/suspense

Slide 31

Slide 31 text

Error Boundary エラーハンドリング用ライフサイクルメソッドを使っ たComponent (V16~) ● getDerivedStateFromError ● ComponentDidCatch 子Componentツリーで発生した JavaScriptのエラーをcatch ● fallbackを表示 ● エラーを記録 https://reactjs.org/docs/error-boundaries.html

Slide 32

Slide 32 text

Error Boundary https://reactjs.org/docs/error-boundaries.html Error Boundaryって、非同期処理に使 えなかった気がする。。。

Slide 33

Slide 33 text

Error Boundaryって、非同期処理に使 えなかった気がする。。。 Error Boundary https://reactjs.org/docs/error-boundaries.html

Slide 34

Slide 34 text

Error Boundaryって、非同期処理に使 えなかった気がする。。。 Error Boundary →React内部で発生するエラーしか catchできない https://reactjs.org/docs/error-boundaries.html

Slide 35

Slide 35 text

Error Boundary https://reactjs.org/docs/error-boundaries.html Error Boundaryって、非同期処理に使 えなかった気がする。。。 →React内部で発生するエラーしか catchできない →Suspenseだと非同期処理もReact内 部で制御されるからcatchできる

Slide 36

Slide 36 text

より宣言的に書けるようになった！ ● ローディング→Suspense ● エラー→ErrorBoundary Error Boundary使う

Slide 37

Slide 37 text

エラーハンドリングを 分岐したい

Slide 38

Slide 38 text

catchしたエラーの中身を見て、 分岐してあげればOK！ エラーハンドリングを分岐したい

Slide 39

Slide 39 text

Error Boundaryを分けたい時は、 errorをre-throwすればOK！ エラーハンドリングを分岐したい

Slide 40

Slide 40 text

Error Boundaryを分けたい時は、 errorをre-throwすればOK！ re-throwしないError Boundaryが、 エントリーポイントにあると安心 🙂 ErrorBoundary自体、low-levelのAPIで構築されて いるので柔軟性は高い エラーハンドリングを分岐したい

Slide 41

Slide 41 text

さいごに

Slide 42

Slide 42 text

さいごに Error BoundaryとSuspenseめっちゃ似てる

Slide 43

Slide 43 text

Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312

Slide 44

Slide 44 text

Error BoundaryとSuspenseめっちゃ似てる Suspense=PromiseのみをcatchするBoundary さいごに https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberThrow.new.js#L312

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

まとめ

Slide 49

Slide 49 text

まとめ ● Suspenseを使うと非同期処理が宣言的に書ける ● Suspenseだと非同期処理のエラーもError Boundaryで宣言 的にエラーハンドリングできる ● SuspenseはPromiseのみをcatchするBoundary

Slide 50

Slide 50 text

まとめ ● Suspenseを使うと非同期処理が宣言的に書ける ● Suspenseだと非同期処理のエラーもError Boundaryで宣言 的にエラーハンドリングできる ● SuspenseはPromiseのみをcatchするBoundary SuspenseとError Boundaryでより宣言的なUI開発を！

Slide 51

Slide 51 text

ありがとうございました！