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

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/ ·ͱΊ