What Your JavaScript Does When You're Not Around

Slides from my talk at Monitorama 2016 & Abstractions 2016

Transcript

1. @eanakashima NOT AROUND WHAT YOUR JAVASCRIPT DOES WHEN YOU’RE
3. FRONTEND & JAVASCRIPT @BUGSNAG EMILY NAKASHIMA
8. @eanakashima THIS IS PERHAPS CONCERNING, NO?
9. DASHBOARD 2 PROJECT:
10. DASHBOARD 1
11. DASHBOARD 2
12. @eanakashima DEPLOY TIME!
13. PERFORMANCE EXCEPTIONS • Capture page load performance (Navigation Timing API) and ajax loading performance (User Timing API) • We used StatsD + Grafana, plus Google Analytics. • Capture uncaught javascript exceptions in the browser. • We use Bugsnag, but plenty of good options out there. OUR BROWSER MONITORING TOOLKIT
14. @eanakashima BASIC FRONTEND PERFORMANCE METRICS
15. @eanakashima JAVASCRIPT EXCEPTIONS
16. FRONTEND EXCEPTIONS: THE EASY ONES • Exception Class: • Message: • Stacktrace[0]: • Timing: • Trend: ReferenceError this.drawTimeline is undefined /dashboard/components/timeline.jsx:19 Within 2s of page load Constant low volume
17. FRONTEND EXCEPTIONS: THE LESS EASY ONES • Exception Class: • Message: • Stacktrace[0]: • Timing: • Trend: NS_ERROR_XPC_SECURITY_MANAGER_VETO NS_ERROR_XPC_SECURITY_MANAGER_VETO: JS frame :: <TOP_LEVEL> Within 2s of page load happened many times
 but to only 1 user
18. @eanakashima 1. IT’S IN A NOISY ROOM
19. 1. IT’S IN A NOISY ROOM • Exception Class: • Message: • Stacktrace[0]: • Release stage: • Timing: • Trend: Error cannot find module “bind-all" https://cdn.[some 3rd party].com/analytics.js/v1/QTk.../analytics.min.js:1 - o 100% Production Within 5s of page load 1 big spike
20. 1. IT’S IN A NOISY ROOM
21. 1. IT’S IN A NOISY ROOM: GHOSTERY DATA
22. 1. IT’S IN A NOISY ROOM
23. 2. IT’S WANDERED OFF SOMEPLACE
24. 2. IT’S WANDERED OFF SOMEPLACE
25. @eanakashima // Don’t believe in this var isProduction = window.location.hostname === 'bugsnag.com';
26. @eanakashima 3. IT’S NOT SHOWING UP
27. 3. IT’S NOT SHOWING UP CHILD COMPONENTS MAY REQUEST DATA
28. 3. IT’S NOT SHOWING UP • Exception Class: • Message: • Stacktrace[0]: • Timing: • Trend: ReferenceError Uncaught ReferenceError: jQuery is not defined /source/bugsnag/javascripts/dashboard.js:1 - anonymous Within 5s of page load Sporadic, many users
29. @eanakashima <!-- Synchronously load jquery --> <script
 src="https://bugsnagcdn.net/jquery.js"
 crossorigin="anonymous">
 </script> <script
 src="https://bugsnagcdn.net/dashboard.js"
 crossorigin="anonymous"
 async> </script> 3. IT’S NOT SHOWING UP
30. 3. IT’S NOT SHOWING UP • Exception Class: • Message: • Stacktrace[0]: • Timing: • Trend: Warning Warning: jQuery.js script failed to load /source/bugsnag/javascripts/dashboard.js:1 - anonymous Within 5s of page load Sporadic, many users
31. 3. IT’S NOT SHOWING UP SIMULATE THAT IN DEVELOPMENT
32. 4. IT’S FINDING NEW USE CASES
33. 4. IT’S FINDING NEW USE CASES • Exception Class: • Message: • Stacktrace[0]: • Trend: “waking up dev” <anonymous>:1 Just once
34. 4. IT’S FINDING NEW USE CASES DEVELOPERS ARE WEIRD
35. 4. IT’S FINDING NEW USE CASES DEVELOPERS ARE WEIRD, PART 2
36. CUSTOM METRICS
37. PERFORMANCE EXCEPTIONS • Capture page load performance (Navigation Timing API) and ajax loading performance (User Timing API) • We used StatsD + Grafana, plus Google Analytics. • Capture uncaught javascript exceptions in the browser. • We use Bugsnag, but plenty of good options out there. OUR BROWSER MONITORING TOOLKIT
38. @eanakashima // push perf stat to metrics monitoring
 Stats.push( 'push-state-timing', 'settings#billing', '768', ); 
 // push a custom event or error to event monitoring Bugsnag.notify( 'UIError', 'User abandoned invalid form' ); MONITORING TOOLS
39. PERFORMANCE == METRICS EXCEPTIONS == EVENTS • Send timings and counts • Send transactions or events with associated metadata OUR BROWSER MONITORING TOOLKIT
40. @eanakashima LOG EVENTS, NOT JUST ERRORS ERROR WARNING INFO
41. UX MONITORING: REFRESH TRACKING H/T CHRISTIAN SCHLENSKER
42. UX MONITORING
43. @eanakashima ACCESSIBILITY MONITORING
44. @eanakashima var images = document.querySelectorAll('img:not([alt])'); images.map(function(image) { Bugsnag.notify( 'A11yError', 'Rendered omg without alt attr:' + image.src ); }); ACCESSIBILITY MONITORING
45. @eanakashima MORE TYPES OF PERFORMANCE MONITORING
46. MEMORY LEAK MONITORING source: developer.chrome.com
47. @eanakashima const heapSizes = []; // after each pushState navigation: function afterPushState() { heapSizes.push(window.performance.memory.usedJSHeapSize); if (heapSizes.length == 4) { if ( heapSizes[4] > heapSizes[3] && heapSizes[3] > heapSizes[2] && heapSizes[2] > heapSizes[1] && heapSizes[1] > heapSizes[0] ) { MyExceptionMonitor.notify( 'PerformanceError', 'Possible memory leak from:' + document.referrer ); } } } MEMORY LEAK MONITORING
48. OTHER DATA IN THE BROWSER (NOW OR SOON) • Geographical location (most RUM products show this) • Installed fonts • Screen dimensions & color depth • Browser language • Online/offline status • Battery level & charging status • Emoji support • Page visibility (backgrounded?) • Connection type (future, or with vendor data) • Support for emerging browser APIs
49. WHAT NOW?
50. @eanakashima BROWSER MONITORING IS READY NOW
51. @eanakashima FRONTEND DEVS SHOULD GET PAGED
52. @eanakashima TESTING EVERYTHING EVERYWHERE IS DEAD
53. @eanakashima THE MONITORING TEAM DOESN’T KNOW WHAT THE JS DOES
54. THE BEST TOOL IS THE ONE YOUR TEAM WILL USE @eanakashima
55. @eanakashima FOR WEB APPS TO WIN, BROWSER MONITORING REQUIRED
56. @eanakashima THANK YOU