Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Edward Fox

May 18, 2017
Tweet

More Decks by Edward Fox

Other Decks in Programming

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