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

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

Transcript

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

   View Slide

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

   View Slide

3. はじめに
   

   View Slide

4. Suspenseとは
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. Suspenseを使ってみる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. Reactの
    Suspenseの仕組み
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. じゃあどうするか？
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. さいごに
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

48. まとめ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide