5 ms·

Logging JS errors is quickly becoming easier than you think. :) On the spec side, we have access to the the column number and… <drumroll>… the stack trace! Th

Logging JS errors is quickly becoming easier than you think. :) On the spec side, we have access to the the column number and… <drumroll>… the stack trace! This took a long time, but it's in now. https://mikewest.org/2013/08/debugging-runtime-errors-with-window-onerror https://mikewest.org/2013/08/debugging-runtime-errors-with-w... Chrome already has support and.. if past release schedules are maintained, all users of Chrome should have this feature within the next week. Firefox already has support for the CORS behavior and is working on adding the stack to onerror. If you want cross-browser stack traces: https://github.com/occ/TraceKit https://github.com/occ/TraceKit. It's used reliably by many large projects. If you want to track these in a reasonable dashboard: https://getsentry.com/ https://getsentry.com/ Sentry even supports sourcemaps, so you can map an error of "e.a is not a function" back to the original unminified JavaScript. Also, open source. We're turning on CORS for the Google JS Library CDN, too.

william_hc 13y ago
"within the next week" -- Awesome! "We're turning on CORS for the Google JS Library CDN, too." -- Awesome! Things are looking up!
zeeg 13y ago
Super excited about CORS and sourcemaps on all of the CDNs. Once all vendors get onboard with reasonable native exception tracebacks life is going to be so much better. Still a long ways to go, but great to see people making progress.
graue 13y ago
Unfortunately, Firefox and Safari still don't provide column numbers in error stack traces, only line numbers, which are next to useless if your code is minified. Here's the Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=762556 https://bugzilla.mozilla.org/show_bug.cgi?id=762556 Not much discussion about fixing it :( This caused a lot of pain at my last job. When we got Chrome and IE10 stack traces, we had a script run them through our source maps and show us the exact, full stack trace through the unminified source. Firefox's and Safari's traces remained impenetrable, short of manually inspecting the minified line of code and guessing.
NKCSS 13y ago
Suggesting TraceKit is pretty much: "In order to get stack traces, you need to wrap your code in a try/catch block like above. Otherwise the error hits window.onerror handler and will only contain the error message, line number, and column number." TraceKit doesn't do this for you; you still need to wrap in try/catch, so you might as well just do that and have the error/stack trace there.
- robocat 13y ago
  If using jQuery, it is a few lines of code to add try/catch around the majority of your code entry points. Go to https://github.com/getsentry/raven-js/blob/master/dist/1.0.8/raven.js https://github.com/getsentry/raven-js/blob/master/dist/1.0.8... and you will see code that wraps $.event.add(), $.fn.ready(), $.ajax(), window.setTimeout() and window.setInterval() (search _helper).

william_hc 13y ago

"within the next week" -- Awesome! "We're turning on CORS for the Google JS Library CDN, too." -- Awesome! Things are looking up!

zeeg 13y ago

Super excited about CORS and sourcemaps on all of the CDNs. Once all vendors get onboard with reasonable native exception tracebacks life is going to be so much better. Still a long ways to go, but great to see people making progress.

graue 13y ago

Unfortunately, Firefox and Safari still don't provide column numbers in error stack traces, only line numbers, which are next to useless if your code is minified. Here's the Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=762556 https://bugzilla.mozilla.org/show_bug.cgi?id=762556 Not much discussion about fixing it :( This caused a lot of pain at my last job. When we got Chrome and IE10 stack traces, we had a script run them through our source maps and show us the exact, full stack trace through the unminified source. Firefox's and Safari's traces remained impenetrable, short of manually inspecting the minified line of code and guessing.

NKCSS 13y ago

Suggesting TraceKit is pretty much: "In order to get stack traces, you need to wrap your code in a try/catch block like above. Otherwise the error hits window.onerror handler and will only contain the error message, line number, and column number." TraceKit doesn't do this for you; you still need to wrap in try/catch, so you might as well just do that and have the error/stack trace there.

robocat 13y ago
If using jQuery, it is a few lines of code to add try/catch around the majority of your code entry points. Go to https://github.com/getsentry/raven-js/blob/master/dist/1.0.8/raven.js https://github.com/getsentry/raven-js/blob/master/dist/1.0.8... and you will see code that wraps $.event.add(), $.fn.ready(), $.ajax(), window.setTimeout() and window.setInterval() (search _helper).