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
TypeScriptでモジュラーモノリスやってみた
diggymo
0
240
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
720
過去のインプットとアウトプットを振り返る
diggymo
0
200
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
860
Reactのuse()って何なん?
diggymo
1
2k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.1k
社内ツールを Rustに書き換えてみた件
diggymo
0
9.4k
細かすぎて伝わらないVue3RFC選手権
diggymo
0
770
Other Decks in Technology
See All in Technology
さくらの夕べ Debianナイト - さくらのVPS編
dictoss
0
310
Linuxのパッケージ管理とアップデート基礎知識
go_nishimoto
0
110
アセスメントで紐解く、10Xのデータマネジメントの軌跡
10xinc
1
420
LLM as プロダクト開発のパワードスーツ
layerx
PRO
1
240
より良い開発者体験を実現するために~開発初心者が感じた生成AIの可能性~
masakiokuda
0
150
更新系と状態
uhyo
5
940
[2025年4月版] Databricks Academy ラボ環境 利用開始手順 / Databricks Academy Labs Onboarding
databricksjapan
0
130
AI AgentOps LT大会(2025/04/16) Algomatic伊藤発表資料
kosukeito
0
140
アジャイル脅威モデリング#1(脅威モデリングナイト#8)
masakane55
3
190
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
120
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
200
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
590
Featured
See All Featured
Building an army of robots
kneath
304
45k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
Being A Developer After 40
akosma
91
590k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GraphQLの誤解/rethinking-graphql
sonatard
71
10k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Writing Fast Ruby
sferik
628
61k
BBQ
matthewcrist
88
9.6k
Why Our Code Smells
bkeepers
PRO
336
57k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
23
2.6k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
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/ ·ͱΊ