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
460
LIFF CLIとngrokを使ったLIFF/LINEミニアプリのお手軽実機確認
diggymo
0
360
TypeScriptでモジュラーモノリスやってみた
diggymo
0
370
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
910
過去のインプットとアウトプットを振り返る
diggymo
0
270
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
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
200
Trust as Infrastructure
bcantrill
1
380
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
160
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
120
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
8
4.1k
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
290
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
180
自動テストのコストと向き合ってみた
qa
0
220
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
250
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.4k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How to train your dragon (web standard)
notwaldorf
96
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Rails Girls Zürich Keynote
gr2m
95
14k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Speed Design
sergeychernyshev
32
1.2k
Why Our Code Smells
bkeepers
PRO
339
57k
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/ ·ͱΊ