Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
エラーハンドリングの話
Search
takanorip
June 19, 2018
Technology
0
110
エラーハンドリングの話
takanorip
June 19, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
450
Bulletproof Design System with TypeScript
takanorip
7
4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Technology
See All in Technology
DeNA での思い出 / Memories at DeNA
orgachem
PRO
6
1.9k
知られざるprops命名の慣習 アクション編
uhyo
11
2.8k
Grafana Meetup Japan Vol. 6
kaedemalu
1
150
KINTO FACTORYから学ぶ生成AI活用戦略
kintotechdev
0
130
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
290
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
180
TypeScript入門
recruitengineers
PRO
33
10k
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
310
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
モバイルアプリ研修
recruitengineers
PRO
5
1.5k
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
22
11k
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
7
760
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building Adaptive Systems
keathley
43
2.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Embracing the Ebb and Flow
colly
87
4.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Thoughts on Productivity
jonyablonski
69
4.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Faster Mobile Websites
deanohume
309
31k
The Invisible Side of Design
smashingmag
301
51k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Transcript
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)