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
vueのエラーハンドリングについて調べた件
Search
morimorikochan
July 26, 2019
Technology
2
1.3k
vueのエラーハンドリングについて調べた件
VuejsOsaka#2でLTした内容です。
こっちにも書く予定です→
https://morimori-kochan.hatenablog.com/
morimorikochan
July 26, 2019
Tweet
Share
More Decks by morimorikochan
See All by morimorikochan
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
470
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
370
TypeScriptでモジュラーモノリスやってみた
diggymo
0
380
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
910
過去のインプットとアウトプットを振り返る
diggymo
0
280
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2.5k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
1.1k
Reactのuse()って何なん?
diggymo
1
2.5k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.7k
Other Decks in Technology
See All in Technology
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
150
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
100
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
190
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
170
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
1
840
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
290
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
470
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
150
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
500
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
120
Featured
See All Featured
Building Applications with DynamoDB
mza
96
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Done Done
chrislema
185
16k
Become a Pro
speakerdeck
PRO
29
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Speed Design
sergeychernyshev
32
1.2k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Embracing the Ebb and Flow
colly
88
4.8k
Automating Front-end Workflow
addyosmani
1371
200k
Transcript
vueͷ ΤϥʔϋϯυϦϯάʹ͍ͭͯௐͨ݅ morifuji kodai @marooon88
ྲྀΕ • ୭ʁ • ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ • Ͳ͜Ͱݕ͢Δͷʁʁ • Ͳ͜ʹू͢Δͷʁʁ •
·ͱΊ
• ໊લ ◦ morifuji ◦ twitter : @marooon88 ! ࣄ
◦ atmaגࣜձࣾ ◦ PHP/Nodejs αʔόʔαΠυΤϯδχΞ • झຯ ◦ kotlin ◦ switchͷΠϯσΟʔήʔϜ ▪ katana zero ▪ The friends of Ringo Ishikawa ୭ʁ
αʔόʔαΠυΤϯδχΞɾϑϩϯτΤϯυΤϯδχΞ ઈࢍ࠾༻த ϦϞʔτϫʔΫ੍ʢݱࡏि̎·ͰʣϑϨοΫελΠϜ, ॻ੶ิॿ, ϑϦʔΞυϨε,ʑ... ୭ʁ
͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͱ͋ΔϑϩϯτΤϯυͷҊ݅
͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΫϥΠΞϯτ
͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΉΉɻίϯιʔϧͷϩ άݟͤͯΒ͑·ͤΜ ͔ʁ ΫϥΠΞϯτ
͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΉΉɻίϯιʔϧͷϩ άݟͤͯΒ͑·ͤΜ ͔ʁ ɻɻɻʢūŬŘŕũƃŦƄŠŘŨʣ ΫϥΠΞϯτ
͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΉΉɻίϯιʔϧͷϩ άݟͤͯΒ͑·ͤΜ ͔ʁ φχϮΠοςϧΧ ϫΧϥφΠ ΫϥΠΞϯτ
͕࣌ؒແବʹফ͑Δ
ͦͦ αʔόʔͷΤϥʔΛݕ͢ΔͳΒ ϑϩϯτͷΤϥʔݕ͖͢Ͱʁ
ͦͦ αʔόʔͷΤϥʔΛݕ͢ΔͳΒ ϑϩϯτͷΤϥʔݕ͖͢Ͱʁ ͬͯΈͨ
Ͳ͜Ͱݕ͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू͢Δͷʁʁ • googleAnalyticsͰΠϕϯτऩू
• τϥοΩϯάઐ༻αʔϏε
Ͳ͜Ͱݕ͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू͢Δͷʁʁ • googleAnalyticsͰΠϕϯτऩू
• τϥοΩϯάઐ༻αʔϏε
javascriptͷΤϥʔΛvueʹݶΒͣશͯΩϟον͢ΔϦεφʔ window.onerror https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ onerror#window.onerror
֤componentͷதͰerrorΛ catch͢ΔΈ errorCaptured https://vuejs.org/v2/api/#errorCaptured
VueͷάϩʔόϧͰerrorΛcatchͰ͖ΔΈ Vue.config.errorHandler https://vuejs.org/v2/api/#errorHandler
VueͷάϩʔόϧͰerrorΛcatchͰ͖ΔΈ config.errorHandler https://vuejs.org/v2/api/#errorHandler errorCaptured ͱ Vue.config.errorHandler Ұॹ͡ΌͶʁ
component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() errorCaptured VS Vue.config.errorHandler
component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() errorCaptured VS Vue.config.errorHandler
ࢠcomponent̍ͰΤϥʔൃੜ
component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() • ࣗ(ࢠcomponent̍)ͷerrorCaptured()ൃՐ͠ͳ͍ •
componentnͷerrorCaptured()͕ൃՐ͢Δ • ࠷ऴతʹVue.config.errorHandler()͕ൃՐ͢Δ errorCaptured VS Vue.config.errorHandler ࢠcomponent̍ͰΤϥʔൃੜ
errorCaptured VS Vue.config.errorHandler component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler()
ࢠcomponent̍ͰΤϥʔൃੜ • ࣗ(ࢠcomponent̍)ͷerrorCaptured()ൃՐ͠ͳ͍ • componentnͷerrorCaptured()͕ൃՐ͢Δ • ࠷ऴతʹVue.config.errorHandler()͕ൃՐ͢Δ falseΛฦ͢͜ͱͰ ͷΛࢭΊΔ͜ͱՄೳ
https://wizardly-curran-897be7.netlify.com/
ൺֱ ίϯϙʔωϯτʹΑͬͯΤϥʔऩूॲཧΛ͚͍ͨ ຊ࣭తʹΤϥʔͰͳ͍ͷͰѲΓͭͿ͍ͨ͠ →errorCaptured ΤϥʔऩूॲཧΛ̍ՕॴͰ͍ͨ͠ →Vue.config.errorHandler
Ͳ͜Ͱݕ͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू͢Δͷʁʁ • googleAnalytics
• ϩάऩूαʔϏε ◦ Sentry←https://sentry.io/for/vue/ ◦ Rollbar←https://rollbar.com/blog/error-tracking-vue-js/
Ͳ͜Ͱݕ͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू͢Δͷʁʁ • googleAnalytics
• ϩάऩूαʔϏε ◦ Sentry←https://sentry.io/for/vue/ ◦ Rollbar←https://rollbar.com/blog/error-tracking-vue-js/
googleAnalytics
googleAnalytics ݴΘͣͱΕͨΞΫηεղੳπʔϧɻ ͢ͰʹgoogleAnalyticsΛಋೖ͍ͯ͠Δঢ়ଶͩͱҎԼͷίʔυͰΤϥʔΛऩूͰ͖ Δ
googleAnalytics ݴΘͣͱΕͨΞΫηεղੳπʔϧɻ ͢ͰʹgoogleAnalyticsΛಋೖ͍ͯ͠Δঢ়ଶͩͱҎԼͷίʔυͰΤϥʔΛऩूͰ͖ Δ
googleAnalytics Vue.config.errorHandlerͰ༻͢Δ߹↓
ऩूͨ݁͠Ռ
googleAnalytics • Ұߦͷจࣈྻ͔͠ૹ৴Ͱ͖ͳ͍͠ɺ࠷େ150όΠτ·Ͱ ◦ ελοΫτϨʔεͱ͔lineNoͱ͔จࣈྻʹؚΊͯࣗͰύʔε͠ͳ͚ΕͳΒͳ͍ • UserAgentઃఆ࣍ୈͰӾཡͰ͖Δ
Sentry
ݴΘͣͱΕͨϩάऩूπʔϧɻҎԼͷίʔυΛΤϯτϦʔϑΝΠϧʹॻ͚ͩ͘ ͰOK Sentry
ΤϥʔΛࣗલͰѲΓͭͿ͍͚ͯ͠ͳ͍ Sentry
ऩूͨ݁͠Ռ
Sentry σϞ→https://sentry.io/organizations/morimorikochanco/issues/?project=1514164
Sentry σϞ→https://sentry.io/organizations/morimorikochanco/issues/?project=1514164 IP↓ ϒϥβ↓ OS↓ ελοΫτϨʔε↓ Ϣʔβʔͷૢ࡞↓
Sentry σϞ→https://sentry.io/organizations/morimorikochanco/issues/?project=1514164 IP↓ ϒϥβ↓ OS↓ ελοΫτϨʔε↓ Ϣʔβʔͷૢ࡞↓ Ůਃ
ൺֱ googleAnalyticsͷଞͷࢦඪͱ࿈ܞ͍ͨ͠ →googleAnalytics ໘ͳΤϥʔϋϯυϥʔͷઃఆল͖͍ͨ ΤϥʔΛλεΫԽͯ͠ཧ͍ͨ͠ IPɾUserAgentɾελοΫτϨʔεɾϔομʔશͯݟ͍ͨ →Sentry
·ͱΊ ݕ • ແʹΤϥʔΛݕ͢ΔͳΒVue.config.errorHandler • ඞཁ͕͋ΔͳΒerrorCaptured ू • Sentry࠷ڧͰʁ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ࢀߟࢿྉ • vueͷerrorHandlerʹ͍ͭͯ→https://vuejs.org/v2/api/#errorHandler • vueͷerrorCapturedʹ͍ͭͯ→https://vuejs.org/v2/api/#errorCaptured • gaͷྫ֎ॲཧʹ͍ͭͯ→https://developers.google.com/analytics/devguides/collection/analyticsjs/exceptions • sentryͱvueʹ͍ͭͯ→https://sentry.io/for/vue/
ςετɾݕূ • ݕূ༻vuejsαΠτ→https://wizardly-curran-897be7.netlify.com/ ·ͱΊ