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
91
エラーハンドリングの話
takanorip
June 19, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
社内管理画面のデザインもプロダクトデザイン
takanorip
3
680
早わかり W3C Community Group
takanorip
0
250
Ubieとアクセシビリティのこれからを考える
takanorip
0
200
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
2.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
2.8k
デザインシステム運用とOKRの良い関係
takanorip
0
1.6k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
160
メンタルヘルスチューニング
takanorip
0
240
Other Decks in Technology
See All in Technology
ビジネスとコード品質の接合点 そしてコード品質がそこに及ぼす影響 / The Intersections of Business and Engineering, and The Impact of Code Quality There
mtx2s
10
1k
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
Getting started with controlling LEGO using Swift
hcrane
0
130
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
今さら聞けない!? AWSの生成AIサービス Amazon Bedrock入門!
minorun365
PRO
11
2.5k
社内共通ルールを値オブジェクトにして社内ライブラリとして運用してみた話
leveragestech
2
1.1k
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.7k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
オブジェクト指向宗教史
tanakahisateru
14
12k
Featured
See All Featured
Scaling GitHub
holman
456
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
In The Pink: A Labor of Love
frogandcode
137
21k
RailsConf 2023
tenderlove
0
510
Into the Great Unknown - MozCon
thekraken
10
830
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Thoughts on Productivity
jonyablonski
57
3.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
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)