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

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

taro
September 08, 2022

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

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

taro

September 08, 2022
Tweet

More Decks by taro

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. はじめに

    View full-size slide

  4. Suspenseとは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Suspenseを使ってみる

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Reactの
    Suspenseの仕組み

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. じゃあどうするか?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  41. さいごに

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  50. ありがとうございました!

    View full-size slide