エラーハンドリングの話

Transcript

1. Vue.jsの
 エラーハンドリング Takanori Oki @wejs #21

2. 自己紹介 • Takanori Oki (@takanorip) • 株式会社スマートドライブ
 フロントエンドエンジニア • Nuxt.js

   / Vue.js / React / Polymer …

3. エラーハンドリング難しい

4. エラーハンドリング難しい • 一口に「エラー」といっても様々な状態、
 種類がある • どういう挙動にする？
 （モーダル？ページ遷移？通知？ etc…） • エラーの情報はどこで管理する？


   （GlobalなState？ページ単位？ etc…）

5. どこで管理する？

6. Store ( Vuex )? Component?

7. 基本はコンポーネント内 • コンポーネントの中で閉じているエラーは
 コンポーネントの中でハンドリングする • グローバルで扱うときはStore格納 • Storeに格納するエラーはアプリケーション
 全体に影響があるもの
 →Storeが肥大化すると混乱を招く

8. 適切なUI？

9. エラー時のUI • 「ユーザーの操作を邪魔しない」かつ
 「ユーザーにわかりやすく伝える」 • 代表例：モーダル
 → わかりやすいけど、そこまで邪魔されない • 本当にそれ、モーダルでいいの？

10. モーダル使いすぎ問題 • モーダルは考えることが意外と多い
 →閉じるときの挙動や背面スクロールなど • スマホの見た目とかも難しい • ユーザーに閉じる動作を強要する • ポップアップなどのUIも検討する

11. エラーの監視 • Sentry使おう！
 →エラー追跡ツール
 →Slack連携とかあるよ！ • フロントエンドのエラーはUIの崩れに直結
 →エラーを検知してすばやく対応できる
 仕組みづくり大事

12. まとめ • エラー情報を適切に持つことが大事 • エラー時にユーザーが困らないような挙動を することも大事 • フロントエンドも監視ツールをうまく使って エラーをすばやく解決する仕組みを作ろう

13. おわり （源柔ゴシックL）