Traces of Errors

The web is full of broken JavaScript: broken forms, browser fragmentation, interaction race conditions, and malfunctioning API's. The lack of quality is approaching crisis: we're losing users, losing customers, and losing credibility.

Let's write better JavaScript. Let's find and debug our errors. The first step is to understand them. We'll discuss the JavaScript Error object in detail: How to use errors, how to catch them, and how to understand them. The asynchronous capabilities of JavaScript pose challenges to error handling that confuse many developers, so let's talk about some techniques to deal with errors across asynchronous boundaries. I'll also share some tips to improve the maintenance of your JavaScript applications.

Let's fix our bugs!

Links:

Demo Source Files
https://github.com/toddhgardner/jserror

{Track:js}
http://trackjs.com/

Transcript

1. Traces of Errors @toddhgardner Getting Better JavaScript Stacktraces
2. TypeError: e is undefined scripts.js line 1
3. Tracekit.js
4. {Track:js} Todd H Gardner @toddhgardner
5. Traces of Errors 1. {Error} 2. Bubbles 3. Callbacks
6. new Error([message[, file,[ line]]]) message fileName lineNumber name stack JavaScript Error
7. 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
8. Traces of Errors Demo JS Error
9. Demo Traces of Errors Global OnError
10. The future looks amazing! …today we still deal with
11. Traces of Errors 1. {Error} 2. Bubbles 3. Callbacks
12. Bubbles?
13. Demo Traces of Errors How Errors Bubble
14. How Errors Bubble function bar() function foo() function baz() [native] window.onerror() ! ! ! ?
15. Traces of Errors Demo How Errors Bubble
16. How Errors Bubble function bar() function foo() [native] addEventListener ! window.onerror() ? function foo() Event
17. Traces of Errors 1. {Error} 2. Bubbles 3. Callbacks
19. Demo Traces of Errors Callbacks Wrapping
20. 1. {Error} 2. Bubbles 3. Callbacks Traces of Errors
21. 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
22. 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
25. {Track:js} Todd H Gardner @toddhgardner todd@trackjs.com http://trackjs.com/