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

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

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

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

どこで管理する？

Store ( Vuex )? Component?

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

適切なUI？

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

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

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

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

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