Save 37% off PRO during our Black Friday Sale! »

コンポーネント指向時代のJSエラートラッキング

 コンポーネント指向時代のJSエラートラッキング

D32564792887e3fb5955021f9804c0a6?s=128

Edward Fox

May 18, 2017
Tweet

Transcript

  1. ίϯϙʔωϯτࢦ޲࣌୅ͷ JSΤϥʔτϥοΩϯά EDWARD FOX @Rails Developers Meetup 2017/05/18

  2. λΠτϧ͔͚ͬͭͯ͜·͕͢ RailsͰϑϩϯτΛ࡞͖ͬͯͨ தͰΤϥʔऩूʹ͍ͭͯ ߟ͑ͨ͜ͱΛ࿩͠·͢

  3. Edward Fox - Developer @ Repro Inc. - RoR, JavaScript,

    AWS - Vue.js, HTTP/2, Browsers
  4. Rails × ϑϩϯτΤϯυ Ͱ ०ͳ࿩୊

  5. webpacker

  6. None
  7. None
  8. React΍Vue.jsͳͲͷ ίϯϙʔωϯτࢦ޲ͳ ϥΠϒϥϦ͕͙͢ಈ͘

  9. ΫϥΠΞϯτͷ੹຿͕ େ͖͘ͳΔҰํɺ ΤϥʔτϥοΩϯά΍ σόοάपΓ͕εΩͩΒ͚

  10. ϑϩϯτͷΤϥʔΛ ૄ͔ʹͯ͠͸͍͚ͳ͍

  11. ࠓ೔ͷ݁࿦: Sentry ࢖͍·͠ΐ͏

  12. Sentry is Կ

  13. None
  14. 1. Τϥʔʹؾ෇͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ

  15. 1. Τϥʔʹؾ෇͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ

  16. RailsͰ༻ҙͨ͠ APIΤϯυϙΠϯτʹ JS͔Βඇಉظ௨৴ͯ͠ σʔλΛऔಘ

  17. RailsͰ͸૝ఆ௨Γͷ JSONΛฦ͍ͯͯ͠΋ɺ ࣮͸σʔλΛड͚औͬͨ ΫϥΠΞϯτ͸͏·͘ ॲཧͰ͖͍ͯͳ͍͔΋

  18. ΫϥΠΞϯτͰͷ Τϥʔൃੜ࣌ʹ͸ - ϦΫΤετύϥϝʔλ - ελοΫτϨʔε - Τϥʔͷߦɾྻ൪߸ ͱ͍ͬͨ৘ใ͕औಘՄೳ

  19. 1. Τϥʔʹؾ෇͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ

  20. ֊૚ߏ଄Λ࣋ͭ ίϯϙʔωϯτ͔Β Τϥʔ͕ൃੜ

  21. Τϥʔͷൃੜࣗମʹ ؾ෇͚ͯ΋ɺΤϥʔΛ ىͨ͜͠ίϯϙʔωϯτ͕ Ͳ͏͍͏ঢ়ଶ͔Θ͔Βͳ͍

  22. - component name - lifecycle hook - state, data, props

    - localStorage ͱ͍ͬͨ৘ใ͕औಘՄೳ
  23. Τϥʔ͕ൃੜͨ͠ͱ͖ͷ ίϯϙʔωϯτͷঢ়ଶΛ ೺Ѳ͠ɺΤϥʔͷৄࡉΛ ཧղͰ͖Δ

  24. 1. Τϥʔʹؾ෇͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ

  25. ΤϥʔࣗମΛཧղͰ͖ͯ΋ ͦͷΤϥʔʹࢸΔ·Ͱͷ ྲྀΕ͕෼͔Βͣ ࠶ݱͰ͖ͳ͍

  26. SentryͷBreadcrumbsΛݟΔ

  27. None
  28. Ϣʔβʔͷը໘ૢ࡞͕ ௥͑ΔͨΊ Τϥʔͷ࠶ݱ͕༰қ

  29. Ϧιʔεͷঢ়ଶ͕URLͰදݱ Ͱ͖ͳ͍SPAͰ͋ͬͯ΋ɺ SentryʹૹΔ৘ใΛ ؆୯ʹ௥ՃͰ͖Δ

  30. ·ͱΊ

  31. Sentry ࢖͍·͠ΐ͏

  32. 1. Τϥʔʹؾ෇͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ

  33. ϦονͳUIɺSPAΛ࡞ΔͳΒ ΫϥΠΞϯτͷΤϥʔΛ ͪΌΜͱऩू͠ ݎ࿚ͳRailsΞϓϦΛ࡞Ζ͏

  34. edwardkenfox.com