JavaScript Stack Traces: The good, the bad, and the ugly

Error monitoring in the browser is a thorny problem. On the one hand window.onerror will at least notify you when something goes wrong, on the other, it won't give you enough information to actually debug the problem! Notably absent in many cases is the stack trace. In this talk, I’ll explain how with a little bit of work, it's possible to get stack traces that are reasonably complete in all browsers, even IE.

First presented at the Forward3 Web Technology Summit on July 29th 2015.

Transcript

1. JAVASCRIPT STACK TRACES THE GOOD, THE BAD, AND THE UGLY JAMES SMITH (@LOOPJ) - CO-FOUNDER @ BUGSNAG
2. WE’RE HIRING! JOBS@BUGSNAG.COM
3. WHY DO JS ERRORS HAPPEN? EvalError InternalError RangeError ReferenceError SyntaxError TypeError URIError MyCustomError
4. FINDING ERRORS IN DEVELOPMENT USE YOUR BROWSER’S DEVELOPER CONSOLE EASY! :)
5. FINDING ERRORS IN PRODUCTION LISTEN FOR ERROR EVENTS AND PHONE HOME HARDER :(
6. WHAT DOES AN ERROR LOOK LIKE ERROR CLASS ERROR MESSAGE STACK TRACE
7. WTF IS A STACK TRACE? AKA “What code caused this crash?” “The sequence of functions called so far in a program”
8. WHY DO I NEED A STACK TRACE? "Generally, if you can’t reproduce a bug, it’s almost impossible to fix" - Michael Scott
9. CAN WE ALWAYS GET A STACK TRACE? YES!* *But browser differences make things difficult
10. THE GOOD STACK TRACES IN WINDOW.ONERROR :)
11. THE BAD NO STACK TRACES IN WINDOW.ONERROR, BUT… 9+
12. FIXING THE BAD WE CAN WRAP FUNCTIONS TO ADD ERROR HANDLING!
13. FIXING THE BAD WE CAN AUTOMATICALLY WRAP ALL CALLBACKS!
14. THE UGLY < 9 NO STACK TRACES IN TRY/CATCH, BUT…
15. FIXING THE UGLY WE CAN GENERATE AN APPROXIMATE STACK TRACE!
16. PHEW WE NOW HAVE STACK TRACES EVERYWHERE!
17. https://github.com/bugsnag/bugsnag-js YOU CAN STEAL OUR CODE! THAT SOUNDS LIKE A LOT OF WORK
18. THAT SOUNDS LIKE A LOT OF WORK YOU CAN LET US HANDLE EVERYTHING FOR YOU! https://bugsnag.com
19. THANKS! @LOOPJ