JavaScript Forensics

Something terrible happened here. Traces of errors litter the floor; memory leaking from cracks in the ceiling. Someone lost their object context in the corner. Everything reeks of jank. In this session, a JavaScript error tracking expert breaks down a series of common and complex crimes against web applications. You’ll leave the session armed with techniques and tools to detect, diagnose, and fix your JavaScript web applications. Bring your bugs and let’s fix up our web.

Code examples:
https://github.com/toddhgardner/soliloquy

Checkout TrackJS Error Monitoring:
https://trackjs.com/javascript?utm_source=slides&utm_medium=speakerdeck&utm_term=forensics

Transcript

1. WANTED
   JavaScript Forensics
   Todd H Gardner
   @toddhgardner
   

   View Slide

2. Wild Wild Web
   

   View Slide

3. WANTED
   @toddhgardner
   JavaScript Outlaws
   

   View Slide

4. Soliloquy
   

   View Slide

5. {Track:js}
   https://trackjs.com
   JavaScript Error Monitoring
   

   View Slide

6. Scripty Joe
   WANTED
   Characteristics:
   Script Error
   Impact:
   Unknown
   Reward $5,00
   

   View Slide

7. View Slide

8. Soliloquy
   

   View Slide

9. Scripty “Line 1” Joe
   Place of Origin:
   Characteristics:
   Associates:
   Browser Obfuscation
   Noisy
   3rd party domains
   Apprehend with
   CORS and crossorigin
   attributes
   Remarks:
   

   View Slide

10. Jane Adsy
    WANTED
    Characteristics:
    getRandomAds is
    not defined
    Impact:
    global
    Reward $5,00
    

    View Slide

11. View Slide

12. Soliloquy
    

    View Slide

13. Jane “3rd Party” Adsy
    Place of Origin:
    Characteristics:
    Associates:
    Unplanned Changes
    Sudden bursts of violence
    SaaS, Analytics, CDN
    Weigh risk vs
    value of 3rd party
    dependencies
    Remarks:
    

    View Slide

14. Clara Context
    WANTED
    Characteristics:
    Cannot read propert
    of undefined
    Impact:
    major
    Reward $5,00
    

    View Slide

15. Error
    Cannot read property ‘destroy’ of
    undefined
    User Click
    
    

    View Slide

16. Soliloquy
    

    View Slide

17. Clara “This&That” Context
    Place of Origin:
    Characteristics:
    Associates:
    Functional Args
    Not Defined
    Callbacks, Promises
    Can usually be
    discovered through test
    Remarks:
    

    View Slide

18. Dolly Data
    WANTED
    Characteristics:
    Substr is not a
    function
    Impact:
    isolated
    Reward $5,00
    

    View Slide

19. a.text.substr is not a function
    

    View Slide

20. Soliloquy
    

    View Slide

21. Dolly “Bad Shape” Data
    Place of Origin:
    Characteristics:
    Associates:
    Contract Changes
    Production Faults
    Separated Dev Teams
    Difficult to
    prevent with test
    Remarks:
    

    View Slide

22. Logan Noloaden
    WANTED
    Characteristics:
    INLINE_ADS is not a
    function
    Impact:
    major
    Reward $5,00
    

    View Slide

23. View Slide

24. Soliloquy
    

    View Slide

25. Logan “404” Noloaden
    Place of Origin:
    Characteristics:
    Associates:
    Flaky Infrastructre
    404, is undefined
    The Internet
    Verify load
    before invoking external
    functions.
    Remarks:
    

    View Slide

26. Mabrowser Crashin
    WANTED
    Characteristics:
    Slow perf, browser
    crash
    Impact:
    catastrophic
    Reward $5,00
    

    View Slide

27. View Slide

28. Soliloquy
    

    View Slide

29. Mabrowser Crashin
    Place of Origin:
    Characteristics:
    Associates:
    Detached Elements
    Slow Perf, Crashing
    Clientside Rendering
    Periodic scanning
    for memory leaks.
    Remarks:
    

    View Slide

30. CAPTURED
    @toddhgardner
    JavaScript Outlaws
    Scripty Joe
    Jane Adsy
    Clara Context
    Dolly Data
    Logan Noloaden
    Mabrowser Crashi
    

    View Slide

31. {Track:js}
    https://trackjs.com
    JavaScript Error Monitoring
    

    View Slide

32. User Activity
    AJAX History
    Console Logs
    Browser Info
    Inline Source
    Async Traces
    

    View Slide

33. WANTED
    JavaScript Forensics
    Todd H Gardner
    @toddhgardner
    todd@trackjs.com
    

    View Slide