Slide 1

Slide 1 text

Traces of Errors @toddhgardner Getting Better JavaScript Stacktraces

Slide 2

Slide 2 text

TypeError: e is undefined scripts.js line 1

Slide 3

Slide 3 text

Tracekit.js

Slide 4

Slide 4 text

{Track:js} Todd H Gardner @toddhgardner

Slide 5

Slide 5 text

Traces of Errors 1. {Error} 2. Bubbles 3. Callbacks

Slide 6

Slide 6 text

new Error([message[, file,[ line]]]) message fileName lineNumber name stack JavaScript Error

Slide 7

Slide 7 text

1. fileName is non standard 2. lineNumber is nonstandard 3. Internet Explorer Sucks 4. Some browser put properties on instances of errors, others on the prototype. 5. The format of the stacktrace is not standard across any browser. 6. Description is only available in IE (but who cares) 7. Number is also there, but who puts error numbers anymore? 8. Chrome uses line, FireFox uses lineNumber, because why wouldn’t they? 9. FireFox has a toSource() method, which sounds cool, but isn’t 10. Old versions of browsers didn’t support errors at all. Because nothing ever goes wrong 11. Using a debugger, not all properties will be visible on error objects, because some browsers don’t treat them as objects, but as host objects—so they can do whatever they want. 12. Firebug puts its own properties on error objects when debugging, but they aren’t there and things die if you reference them. 13. So many more, but no one cares at this point. 14. Seriously, debugging this shit will make you very sad. 15. The Internet is broken and nobody cares JavaScript Error Footnotes

Slide 8

Slide 8 text

Traces of Errors Demo JS Error

Slide 9

Slide 9 text

Demo Traces of Errors Global OnError

Slide 10

Slide 10 text

The future looks amazing! …today we still deal with

Slide 11

Slide 11 text

Traces of Errors 1. {Error} 2. Bubbles 3. Callbacks

Slide 12

Slide 12 text

Bubbles?

Slide 13

Slide 13 text

Demo Traces of Errors How Errors Bubble

Slide 14

Slide 14 text

How Errors Bubble function bar() function foo() function baz() [native] window.onerror() ! ! ! ?

Slide 15

Slide 15 text

Traces of Errors Demo How Errors Bubble

Slide 16

Slide 16 text

How Errors Bubble function bar() function foo() [native] addEventListener ! window.onerror() ? function foo() Event

Slide 17

Slide 17 text

Traces of Errors 1. {Error} 2. Bubbles 3. Callbacks

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Demo Traces of Errors Callbacks Wrapping

Slide 20

Slide 20 text

1. {Error} 2. Bubbles 3. Callbacks Traces of Errors

Slide 21

Slide 21 text

Stacktraces aren’t everything TypeError: e is undefined @jQuery.extend.param jQuery.js:7792 @jQuery.extend.ajax jQuery.js:7797 @jQuery.each.jQuery.(anonymous) jQuery.js:7245 @(anonymous function) jQuery.js:7245 @jQuery.event.dispatch jQuery.js:3332 @jQuery.event.add.elemData.handle.eventHandle jQuery.js:2941

Slide 22

Slide 22 text

Stacktraces aren’t everything Error [$interpolate:interr] Can’t interpolate: {{ contact | format }} @minError angular.js:78 @(anonymous function) angular.js: 78 @$interpolate angular.js:8140 @Scope.prototype.$digest angular.js:11528 @Scope.prototype.$apply angular.js:11774 @done angular.js:7739 @completeRequest angular.js:7912 @createHttpBackend angular.js:7871

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

{Track:js} Todd H Gardner @toddhgardner [email protected] http://trackjs.com/