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
290
DynamoDBの"Replacement"時にデータが消されないようにCustom Resource Provider Frameworkでカスタムリソース作ってみた件
diggymo
1
790
過去のインプットとアウトプットを振り返る
diggymo
0
240
Amazon BedrockとPR-Agentでコードレビュー自動化に挑戦・実際に運用してみた
diggymo
0
2.2k
個人開発でLIFFとMessagingAPIを使ってわかった5つのこと
diggymo
0
960
Reactのuse()って何なん?
diggymo
1
2.2k
Figmaを通したエンジニアとデザイナーの連携について
diggymo
0
7.4k
社内ツールを Rustに書き換えてみた件
diggymo
0
9.5k
細かすぎて伝わらないVue3RFC選手権
diggymo
0
790
Other Decks in Technology
See All in Technology
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
200
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
770
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
350
フィンテック養成勉強会#54
finengine
0
180
Github Copilot エージェントモードで試してみた
ochtum
0
110
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
290
Prox Industries株式会社 会社紹介資料
proxindustries
0
330
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
1k
GitHub Copilot の概要
tomokusaba
1
140
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
210
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Speed Design
sergeychernyshev
32
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
800
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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/ ·ͱΊ