How to Catch Unhandled Javascript Errors
Assign the window.onerror event to an event handler like:
<script type="text/javascript">window.onerror = function(msg, url, line, col, error) { // Note that col & error are new to the HTML 5 spec and may not be // supported in every browser. It worked for me in Chrome. var extra = !col ? '' : '\ncolumn: '+ col; extra += !error ? '' : '\nerror: '+ error; // You can view the information in an alert to see things working like this: alert("Error: "+ msg +"\nurl: "+ url +"\nline: "+ line + extra); // TODO: Report this error via ajax so you can keep track // of what pages have JS issues var suppressErrorAlert = true; // If you return true, then error alerts (like in older versions of // Internet Explorer) will be suppressed. return suppressErrorAlert;};</script>As commented in the code, if the return value of window.onerror is true then the browser should suppress showing an alert dialog.
When does the window.onerror Event Fire?
In a nutshell, the event is raised when either 1.) there is an uncaught exception or 2.) a compile time error occurs.
uncaught exceptions
- throw "some messages"
- call_something_undefined();
- cross_origin_iframe.contentWindow.document;, a security exception
compile error
<script>{</script><script>for(;)</script><script>"oops</script>setTimeout("{", 10);, it will attempt to compile the first argument as a script
Browsers supporting window.onerror
- Chrome 13+
- Firefox 6.0+
- Internet Explorer 5.5+
- Opera 11.60+
- Safari 5.1+
Screenshot:
Example of the onerror code above in action after adding this to a test page:
<script type="text/javascript">call_something_undefined();</script>
Example for AJAX error reporting
var error_data = { url: document.location.href,};if(error != null) { error_data['name'] = error.name; // e.g. ReferenceError error_data['message'] = error.line; error_data['stack'] = error.stack;} else { error_data['msg'] = msg; error_data['filename'] = filename; error_data['line'] = line; error_data['col'] = col;}var xhr = new XMLHttpRequest();xhr.open('POST', '/ajax/log_javascript_error');xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');xhr.setRequestHeader('Content-Type', 'application/json');xhr.onload = function() { if (xhr.status === 200) { console.log('JS error logged'); } else if (xhr.status !== 200) { console.error('Failed to log JS error.'); console.error(xhr); console.error(xhr.status); console.error(xhr.responseText); }};xhr.send(JSON.stringify(error_data));JSFiddle:
https://jsfiddle.net/nzfvm44d/
References:
- Mozilla Developer Network :: window.onerror
- MSDN :: Handling and Avoiding Web Page Errors Part 2: Run-Time Errors
- Back to Basics – JavaScript onerror Event
- DEV.OPERA :: Better error handling with window.onerror
- Window onError Event
- Using the onerror event to suppress JavaScript errors
- SO :: window.onerror not firing in Firefox