vueのエラーハンドリングについて調べた件

VuejsOsaka#2でLTした内容です。

こっちにも書く予定です→ https://morimori-kochan.hatenablog.com/

Transcript

1. vueͷ ΤϥʔϋϯυϦϯάʹ͍ͭͯௐ΂ͨ݅ morifuji kodai @marooon88
2. ྲྀΕ • ୭ʁ • ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ • Ͳ͜Ͱݕ஌͢Δͷʁʁ • Ͳ͜ʹू໿͢Δͷʁʁ • ·ͱΊ
3. • ໊લ ◦ morifuji ◦ twitter : @marooon88 ! ࢓ࣄ ◦ atmaגࣜձࣾ ◦ PHP/Nodejs αʔόʔαΠυΤϯδχΞ • झຯ ◦ kotlin ◦ switchͷΠϯσΟʔήʔϜ ▪ katana zero ▪ The friends of Ringo Ishikawa ୭ʁ
4. αʔόʔαΠυΤϯδχΞɾϑϩϯτΤϯυΤϯδχΞ ઈࢍ࠾༻த ϦϞʔτϫʔΫ੍౓ʢݱࡏि̎·ͰʣϑϨοΫελΠϜ, ॻ੶ิॿ, ϑϦʔΞυϨε,౳ʑ... ୭ʁ
5. ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͱ͋ΔϑϩϯτΤϯυͷҊ݅
6. ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΫϥΠΞϯτ
7. ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΉΉɻίϯιʔϧͷϩ άݟͤͯ΋Β͑·ͤΜ ͔ʁ ΫϥΠΞϯτ ๻
8. ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΉΉɻίϯιʔϧͷϩ άݟͤͯ΋Β͑·ͤΜ ͔ʁ ɻɻɻʢūŬŘŕũƃŦƄŠŘŨʣ ΫϥΠΞϯτ ๻
9. ͜͏͍͏ͷͳ͍Ͱ͔͢ʁ ͳΜ͔τοϓϖʔδͰ ϩʔσΟϯά͕ࢭ·Μ ͳ͍Α ΉΉɻίϯιʔϧͷϩ άݟͤͯ΋Β͑·ͤΜ ͔ʁ φχϮΠοςϧΧ ϫΧϥφΠ ΫϥΠΞϯτ ๻ ͕࣌ؒແବʹফ͑Δ
10. ͦ΋ͦ΋ αʔόʔͷΤϥʔΛݕ஌͢ΔͳΒ ϑϩϯτͷΤϥʔ΋ݕ஌͢΂͖Ͱ͸ʁ
11. ͦ΋ͦ΋ αʔόʔͷΤϥʔΛݕ஌͢ΔͳΒ ϑϩϯτͷΤϥʔ΋ݕ஌͢΂͖Ͱ͸ʁ ΍ͬͯΈͨ
12. Ͳ͜Ͱݕ஌͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू໿͢Δͷʁʁ • googleAnalyticsͰΠϕϯτऩू • τϥοΩϯάઐ༻αʔϏε
13. Ͳ͜Ͱݕ஌͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू໿͢Δͷʁʁ • googleAnalyticsͰΠϕϯτऩू • τϥοΩϯάઐ༻αʔϏε
14. javascriptͷΤϥʔΛvueʹݶΒͣશͯΩϟον͢ΔϦεφʔ window.onerror https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ onerror#window.onerror
15. ֤componentͷதͰerrorΛ catch͢Δ࢓૊Έ errorCaptured https://vuejs.org/v2/api/#errorCaptured
16. VueͷάϩʔόϧͰerrorΛcatchͰ͖Δ࢓૊Έ Vue.config.errorHandler https://vuejs.org/v2/api/#errorHandler
17. VueͷάϩʔόϧͰerrorΛcatchͰ͖Δ࢓૊Έ config.errorHandler https://vuejs.org/v2/api/#errorHandler errorCaptured ͱ Vue.config.errorHandler Ұॹ͡ΌͶʁ
18. ਌component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() errorCaptured VS Vue.config.errorHandler
19. ਌component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() errorCaptured VS Vue.config.errorHandler ࢠcomponent̍ͰΤϥʔൃੜ
20. ਌component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() • ࣗ਎(ࢠcomponent̍)ͷerrorCaptured()͸ൃՐ͠ͳ͍ • ਌componentnͷerrorCaptured()͕ൃՐ͢Δ • ࠷ऴతʹ͸Vue.config.errorHandler()͕ൃՐ͢Δ errorCaptured VS Vue.config.errorHandler ࢠcomponent̍ͰΤϥʔൃੜ
21. errorCaptured VS Vue.config.errorHandler ਌component ࢠcomponent̍ errorCaptured() errorCaptured() ࢠcomponent̎ errorCaptured() Vue.config.errorHandler() ࢠcomponent̍ͰΤϥʔൃੜ • ࣗ਎(ࢠcomponent̍)ͷerrorCaptured()͸ൃՐ͠ͳ͍ • ਌componentnͷerrorCaptured()͕ൃՐ͢Δ • ࠷ऴతʹ͸Vue.config.errorHandler()͕ൃՐ͢Δ falseΛฦ͢͜ͱͰ ਌΁ͷ఻೻ΛࢭΊΔ͜ͱ΋Մೳ
22. https://wizardly-curran-897be7.netlify.com/
23. ൺֱ ίϯϙʔωϯτʹΑͬͯΤϥʔऩूॲཧΛ෼͚͍ͨ ຊ࣭తʹ͸ΤϥʔͰ͸ͳ͍ͷͰѲΓͭͿ͍ͨ͠ →errorCaptured ΤϥʔऩूॲཧΛ̍ՕॴͰ͍ͨ͠ →Vue.config.errorHandler
24. Ͳ͜Ͱݕ஌͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू໿͢Δͷʁʁ • googleAnalytics • ϩάऩूαʔϏε ◦ Sentry←https://sentry.io/for/vue/ ◦ Rollbar←https://rollbar.com/blog/error-tracking-vue-js/
25. Ͳ͜Ͱݕ஌͢Δͷʁʁ • window.onerror • errorCaptured • Vue.config.errorHandler Ͳ͜ʹू໿͢Δͷʁʁ • googleAnalytics • ϩάऩूαʔϏε ◦ Sentry←https://sentry.io/for/vue/ ◦ Rollbar←https://rollbar.com/blog/error-tracking-vue-js/
26. googleAnalytics
27. googleAnalytics ݴΘͣͱ஌ΕͨΞΫηεղੳπʔϧɻ ͢ͰʹgoogleAnalyticsΛಋೖ͍ͯ͠Δঢ়ଶͩͱҎԼͷίʔυͰΤϥʔΛऩूͰ͖ Δ
28. googleAnalytics ݴΘͣͱ஌ΕͨΞΫηεղੳπʔϧɻ ͢ͰʹgoogleAnalyticsΛಋೖ͍ͯ͠Δঢ়ଶͩͱҎԼͷίʔυͰΤϥʔΛऩूͰ͖ Δ
29. googleAnalytics Vue.config.errorHandlerͰ࢖༻͢Δ৔߹↓
30. ऩूͨ݁͠Ռ
31. googleAnalytics • Ұߦͷจࣈྻ͔͠ૹ৴Ͱ͖ͳ͍͠ɺ࠷େ150όΠτ·Ͱ ◦ ελοΫτϨʔεͱ͔lineNoͱ͔͸จࣈྻʹؚΊͯࣗ෼Ͱύʔε͠ͳ͚Ε͹ͳΒͳ͍ • UserAgent͸ઃఆ࣍ୈͰӾཡͰ͖Δ
32. Sentry
33. ݴΘͣͱ஌ΕͨϩάऩूπʔϧɻҎԼͷίʔυΛΤϯτϦʔϑΝΠϧʹॻ͚ͩ͘ ͰOK Sentry
34. ΤϥʔΛࣗલͰѲΓͭͿͯ͠͸͍͚ͳ͍ Sentry
35. ऩूͨ݁͠Ռ
36. Sentry σϞ→https://sentry.io/organizations/morimorikochanco/issues/?project=1514164
37. Sentry σϞ→https://sentry.io/organizations/morimorikochanco/issues/?project=1514164 IP↓ ϒϥ΢β↓ OS↓ ελοΫτϨʔε↓ Ϣʔβʔͷૢ࡞↓
38. Sentry σϞ→https://sentry.io/organizations/morimorikochanco/issues/?project=1514164 IP↓ ϒϥ΢β↓ OS↓ ελοΫτϨʔε↓ Ϣʔβʔͷૢ࡞↓ Ůਃ
39. ൺֱ googleAnalyticsͷଞͷࢦඪͱ࿈ܞ͍ͨ͠ →googleAnalytics ໘౗ͳΤϥʔϋϯυϥʔͷઃఆ͸ল͖͍ͨ ΤϥʔΛλεΫԽͯ͠؅ཧ͍ͨ͠ IPɾUserAgentɾελοΫτϨʔεɾϔομʔશͯݟ͍ͨ →Sentry
40. ·ͱΊ ݕ஌ • ແ೉ʹΤϥʔΛݕ஌͢ΔͳΒVue.config.errorHandler • ඞཁ͕͋ΔͳΒerrorCaptured ू໿ • Sentry࠷ڧͰ͸ʁ
41. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ࢀߟࢿྉ • 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/ ·ͱΊ