Save 37% off PRO during our Black Friday Sale! »

エラーハンドリングの話

 エラーハンドリングの話

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

June 19, 2018
Tweet

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)