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

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