The State of Client side JavaScript Error Reporting
airbrake.io
airbrake.io
It seems to me Airbrake is just requiring that you wrap all of your JS in calls to Airbrake.try(). Wouldn't this end up littering your whole app with Airbrake calls in every event handler?
window.onerror = function(msg,url,line,col,err) {
console.log(err.stack)
}
If that doesn't work for you, you can get it like: window.onerror = function() {
console.log(window.event.error.stack)
}
I wouldn't want litter my code with Airbrake.try(); onerror is good enough since you get stack traces from Chrome. When there is a pesky error, I tend to do something like: throw JSON.stringify(some_var_to_watch);Another option could be to disable all inline scripts via CSP, which will hit the older generation of Chrome extensions (and I think the newer ones doesn't trigger onerror).
Here is a sample of a few we regularly get:
* Out of stack space
* TypeError: Unable to delete property.
* [object Event]
* Error loading script
* Syntax error
window.onerror = function( error, url, lineno ){
if ( url && url.match( //https?:\/\/.*?assets/ ) ){
# error management
}
}
This ensure only relevant errors are included, discarding errors from extensions, trackers, gmaps, etc.Of course if you inline js for performance on production code, that's a problem.
EDIT : an other important thing to avoid flooding is to handle amount of error. Javascript errors rarely come alone. An error within an event callback may be triggered several times before user surrenders. And let not even start with error within setInterval. To avoid this, I usually use a `error_got` counter and simply silence error reporting for the current page / context when I've got more than 5 errors.
And about user surrendering. Reporting errors is nice. Preventing user to get stuck is better. I always automatically disable all callbacks in onerror and let default html actions on links and form being process. This ensure user intent will be fulfilled and page context will be reloaded as a bonus. I've written more extensively on this here : https://gist.github.com/oelmekki/6420982
I'm using this on a site with 1.5M pageviews a month, so even a very small number of errors results in quite a number of items in Rollbar. It is also effectively impossible to reproduce the issues since they are client-specific.
My current solution is to work on expanding my list of "invalid" errors that should be ignored. Based on sandstrom's comment, I'm also going to look at the Content Security Policy functionality.
- setTimeout/setInterval
- event handlers
- ajax response handlers
Wrap those entry points (along with a single top-level wrapper which can be done as a build step) and you're almost entirely covered. If you use jQuery along with TraceKit, this plugin does it for you: https://github.com/getsentry/raven-js/blob/master/plugins/jq...Also very excited about the proposals about having the error object passed to window.onerror... well, I used to be. I've had a little bit of involvement in the W3C mailing lists over the last few years, but it seems like nothing ever gets done.
And source maps support would be awesome! Just as soon as we can get source maps from sprockets, which seems like it's on the way [1].