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

Rails Developers Meetup #1

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

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
8. React΍Vue.jsͳͲͷ ίϯϙʔωϯτࢦ޲ͳ ϥΠϒϥϦ͕͙͢ಈ͘
9. ΫϥΠΞϯτͷ੹຿͕ େ͖͘ͳΔҰํɺ ΤϥʔτϥοΩϯά΍ σόοάपΓ͕εΩͩΒ͚
10. ϑϩϯτͷΤϥʔΛ ૄ͔ʹͯ͠͸͍͚ͳ͍
11. ࠓ೔ͷ݁࿦: Sentry ࢖͍·͠ΐ͏
12. Sentry is Կ
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ΛݟΔ
28. Ϣʔβʔͷը໘ૢ࡞͕ ௥͑ΔͨΊ Τϥʔͷ࠶ݱ͕༰қ
29. Ϧιʔεͷঢ়ଶ͕URLͰදݱ Ͱ͖ͳ͍SPAͰ͋ͬͯ΋ɺ SentryʹૹΔ৘ใΛ ؆୯ʹ௥ՃͰ͖Δ
30. ·ͱΊ
31. Sentry ࢖͍·͠ΐ͏
32. 1. Τϥʔʹؾ෇͘ 2. ΤϥʔΛཧղ͢Δ 3. ΤϥʔΛ࠶ݱ͢Δ
33. ϦονͳUIɺSPAΛ࡞ΔͳΒ ΫϥΠΞϯτͷΤϥʔΛ ͪΌΜͱऩू͠ ݎ࿚ͳRailsΞϓϦΛ࡞Ζ͏
34. edwardkenfox.com