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

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

   AWS - Vue.js, HTTP/2, Browsers
4. 4.

   Rails × ϑϩϯτΤϯυ Ͱ ०ͳ࿩୊

5. 5.

   webpacker

6. 6.

   None
7. 7.

   None
8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

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

12. 12.

    Sentry is Կ

13. 13.

    None
14. 14.

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

15. 15.

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

16. 16.

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

17. 17.

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

18. 18.

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

19. 19.

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

20. 20.

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

21. 21.

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

22. 22.

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

    - localStorage ͱ͍ͬͨ৘ใ͕औಘՄೳ
23. 23.

    Τϥʔ͕ൃੜͨ͠ͱ͖ͷ ίϯϙʔωϯτͷঢ়ଶΛ ೺Ѳ͠ɺΤϥʔͷৄࡉΛ ཧղͰ͖Δ

24. 24.

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

25. 25.

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

26. 26.

    SentryͷBreadcrumbsΛݟΔ

27. 27.

    None
28. 28.

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

29. 29.

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

30. 30.

    ·ͱΊ

31. 31.

    Sentry ࢖͍·͠ΐ͏

32. 32.

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

33. 33.

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

34. 34.

    edwardkenfox.com