Tweet
Tweet

Slide 1

Slide 1 text

JAVASCRIPT STACK TRACES THE GOOD, THE BAD, AND THE UGLY JAMES SMITH (@LOOPJ) - CO-FOUNDER @ BUGSNAG

Slide 2

Slide 2 text

WE’RE HIRING! [email protected]

Slide 3

Slide 3 text

WHY DO JS ERRORS HAPPEN? EvalError InternalError RangeError ReferenceError SyntaxError TypeError URIError MyCustomError

Slide 4

Slide 4 text

FINDING ERRORS IN DEVELOPMENT USE YOUR BROWSER’S DEVELOPER CONSOLE EASY! :)

Slide 5

Slide 5 text

FINDING ERRORS IN PRODUCTION LISTEN FOR ERROR EVENTS AND PHONE HOME HARDER :(

Slide 6

Slide 6 text

WHAT DOES AN ERROR LOOK LIKE ERROR CLASS ERROR MESSAGE STACK TRACE

Slide 7

Slide 7 text

WTF IS A STACK TRACE? AKA “What code caused this crash?” “The sequence of functions called so far in a program”

Slide 8

Slide 8 text

WHY DO I NEED A STACK TRACE? "Generally, if you can’t reproduce a bug, it’s almost impossible to fix" - Michael Scott

Slide 9

Slide 9 text

CAN WE ALWAYS GET A STACK TRACE? YES!* *But browser differences make things difficult

Slide 10

Slide 10 text

THE GOOD STACK TRACES IN WINDOW.ONERROR :)

Slide 11

Slide 11 text

THE BAD NO STACK TRACES IN WINDOW.ONERROR, BUT… 9+

Slide 12

Slide 12 text

FIXING THE BAD WE CAN WRAP FUNCTIONS TO ADD ERROR HANDLING!

Slide 13

Slide 13 text

FIXING THE BAD WE CAN AUTOMATICALLY WRAP ALL CALLBACKS!

Slide 14

Slide 14 text

THE UGLY < 9 NO STACK TRACES IN TRY/CATCH, BUT…

Slide 15

Slide 15 text

FIXING THE UGLY WE CAN GENERATE AN APPROXIMATE STACK TRACE!

Slide 16

Slide 16 text

PHEW WE NOW HAVE STACK TRACES EVERYWHERE!

Slide 17

Slide 17 text

https://github.com/bugsnag/bugsnag-js YOU CAN STEAL OUR CODE! THAT SOUNDS LIKE A LOT OF WORK

Slide 18

Slide 18 text

THAT SOUNDS LIKE A LOT OF WORK YOU CAN LET US HANDLE EVERYTHING FOR YOU! https://bugsnag.com

Slide 19

Slide 19 text

THANKS! @LOOPJ