Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ReactのSuspenseを使った非同期処理のエラーハンドリング

taro28
September 08, 2022

 ReactのSuspenseを使った非同期処理のエラーハンドリング

「フロントエンドLT会 - vol.8」で発表したスライドです。
https://rakus.connpass.com/event/255095/

taro28

September 08, 2022
Tweet

More Decks by taro28

Other Decks in Programming

Transcript

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

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

    AWS, k8s
  3. はじめに

  4. Suspenseとは

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

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

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

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

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

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

    →Suspenseは宣言的UIの標準になっていくと考えられる機能 →React以外の使い手の方にも、参考になれば嬉しいです🙂
  11. 今までの非同期処理の エラーハンドリング

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

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

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

  15. Suspenseを使ってみる

  16. Suspenseを使ってみる Suspense導入前

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

  18. Suspenseを使ってみる エラーが発生(ホワイトアウト) Suspense導入後

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

  20. Suspenseを使ってみる エラーが発生(ホワイトアウト) →swrがエラーをcatchしていない →なぜか? Suspense導入後

  21. Reactの Suspenseの仕組み

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

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

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

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

  26. ReactのSuspenseの仕組み renderに成功したら描画される!(再度 promiseがthrowされたらループ)

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

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

  29. じゃあどうするか?

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

  31. Error Boundary エラーハンドリング用ライフサイクルメソッドを使っ たComponent (V16~) • getDerivedStateFromError • ComponentDidCatch 子Componentツリーで発生した

    JavaScriptのエラーをcatch • fallbackを表示 • エラーを記録 https://reactjs.org/docs/error-boundaries.html
  32. Error Boundary https://reactjs.org/docs/error-boundaries.html Error Boundaryって、非同期処理に使 えなかった気がする。。。

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

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

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

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

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

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

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

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

  41. さいごに

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

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

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

  45. 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
  46. 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
  47. 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
  48. まとめ

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

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

    Boundaryでより宣言的なUI開発を!
  51. ありがとうございました!