Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

Bde09eb5aa93e53c91a88fc1573cd99f?s=128

morimorikochan

July 26, 2019
Tweet

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