Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
Design System Documentation Tooling 2025
takanorip
2
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
810
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
590
Bulletproof Design System with TypeScript
takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
220
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2.1k
早わかり W3C Community Group
takanorip
0
540
Other Decks in Technology
See All in Technology
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
maaaato
0
280
MLflowで始めるプロンプト管理、評価、最適化
databricksjapan
1
210
AIプラットフォームにおけるMLflowの利用について
lycorptech_jp
PRO
1
140
グレートファイアウォールを自宅に建てよう
ctes091x
0
150
生成AI活用の型ハンズオン〜顧客課題起点で設計する7つのステップ
yushin_n
0
150
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
sansantech
PRO
1
130
regrowth_tokyo_2025_securityagent
hiashisan
0
240
意外とあった SQL Server 関連アップデート + Database Savings Plans
stknohg
PRO
0
310
AI駆動開発における設計思想 認知負荷を下げるフロントエンドアーキテクチャ/ 20251211 Teppei Hanai
shift_evolve
PRO
2
380
eBPFとwaruiBPF
sat
PRO
4
2.6k
今年のデータ・ML系アップデートと気になるアプデのご紹介
nayuts
1
330
ガバメントクラウド利用システムのライフサイクルについて
techniczna
0
190
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
8.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
The Invisible Side of Design
smashingmag
302
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Designing for Performance
lara
610
69k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.3k
A designer walks into a library…
pauljervisheath
210
24k
Code Reviewing Like a Champion
maltzj
527
40k
Fireside Chat
paigeccino
41
3.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Side Projects
sachag
455
43k
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)