ユーザーにとって優しいエラーハンドリングとは/登壇資料（宮田 卓哉）

株式会社Hacobu、株式会社ゆめみ主催
「うちのフロントエンドエンジニア、こんなことやってます！」

2024/01/25 (木) 19:00〜21:00
https://yumemi.connpass.com/event/304093/

Transcript

1. Confidential ユーザーにとって優しいエラーハンドリン グとは 宮田卓哉
2. Copyright Hacobu, Inc. 2 宮田 卓哉 大阪在住 趣味: 釣り、野球観戦(主にオリックス)
3. Copyright Hacobu, Inc. 3 400系、500系のエラーがあるとき みなさんどうやって実装していますか？🫠
4. Copyright Hacobu, Inc. 4 例えば /post/1234 にアクセスして NotFound を表 示する
5. Copyright Hacobu, Inc. 5 /404へのリダイレクト
6. Copyright Hacobu, Inc. 6 🤔 • リロードしても404が表示され続ける • ユーザーがブラウザバックしたときの挙動が意図 したものにならない可能性がある
7. Copyright Hacobu, Inc. 7 リダイレクトせずにMyComponentでNotFoundを 表示するだけ
8. Copyright Hacobu, Inc. 8 󰢏 • /post/1234のままなので、1234のリソースが表示できるようになったタイミングでリロードすると適切 なコンテンツが表示される。 🤔 • 少々手続き的な印象がある 将来的にifの数が多くなってMyComponentが肥大化するのが目に見える。コンテンツの表示の責 務に集中したい。
9. Copyright Hacobu, Inc. 9 error boundaryを使ったやりかた
10. Copyright Hacobu, Inc. 10 󰢏 • リロードしても404が表示され続ける • MyComponentはコンテンツの責務に集中できる。(宣言的チックにかける) • Error処理に集中した責務のコンポーネントをかける 💡 ErrorBoundaryでwrapするのを忘れる危険性はあるのでそこはテストでカバーする
11. Copyright Hacobu, Inc. 11 みなさんのおすすめエラーハンドリング教えてくだ さい