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