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

Rails Developers Meetup #1

https://rails-developers-meetup.connpass.com/event/55363/

Transcript

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

   View Slide

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

   View Slide

3. Edward Fox
   - Developer @ Repro Inc.
   - RoR, JavaScript, AWS
   - Vue.js, HTTP/2, Browsers
   

   View Slide

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

   View Slide

5. webpacker
   

   View Slide

6. View Slide

7. View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Sentry is Կ
    

    View Slide

13. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. - component name
    - lifecycle hook
    - state, data, props
    - localStorage
    ͱ͍ͬͨ৘ใ͕औಘՄೳ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. SentryͷBreadcrumbsΛݟΔ
    

    View Slide

27. View Slide

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

    View Slide

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

    View Slide

30. ·ͱΊ
    

    View Slide

31. Sentry ࢖͍·͠ΐ͏
    

    View Slide

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

    View Slide

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

    View Slide

34. edwardkenfox.com
    

    View Slide