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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
takanorip
June 19, 2018
Technology
0
110
エラーハンドリングの話
takanorip
June 19, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
Design System Documentation Tooling 2025
takanorip
3
2.3k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
1
900
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
650
Bulletproof Design System with TypeScript
takanorip
7
4.7k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
250
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.7k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.2k
早わかり W3C Community Group
takanorip
0
550
Other Decks in Technology
See All in Technology
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
470
Digitization部 紹介資料
sansan33
PRO
1
6.8k
SREのプラクティスを用いた3領域同時 マネジメントへの挑戦 〜SRE・情シス・セキュリティを統合した チーム運営術〜
coconala_engineer
2
670
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
590
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
17k
CDKで始めるTypeScript開発のススメ
tsukuboshi
1
500
ファインディの横断SREがTakumi byGMOと取り組む、セキュリティと開発スピードの両立
rvirus0817
1
1.5k
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
170
会社紹介資料 / Sansan Company Profile
sansan33
PRO
15
400k
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
180
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
620
仕様書駆動AI開発の実践: Issue→Skill→PRテンプレで 再現性を作る
knishioka
2
680
Featured
See All Featured
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
170
Producing Creativity
orderedlist
PRO
348
40k
Music & Morning Musume
bryan
47
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
SEO Brein meetup: CTRL+C is not how to scale international SEO
lindahogenes
0
2.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
330
How to build a perfect <img>
jonoalderson
1
4.9k
New Earth Scene 8
popppiees
1
1.5k
Code Review Best Practice
trishagee
74
20k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
120
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)