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

Does this help you:

<script type="text/javascript">window.onerror = function() {    alert("Error caught");};xxx();</script>

I'm not sure how it handles Flash errors though...

Update: it doesn't work in Opera, but I'm hacking Dragonfly right now to see what it gets. Suggestion about hacking Dragonfly came from this question:

Mimic Window. onerror in Opera using javascript

sophisticated error handling

If your error handling is very sophisticated and therefore might throw an error itself, it is useful to add a flag indicating if you are already in "errorHandling-Mode". Like so:

var appIsHandlingError = false;window.onerror = function() {    if (!appIsHandlingError) {        appIsHandlingError = true;        handleError();    }};function handleError() {    // graceful error handling    // if successful: appIsHandlingError = false;}

Otherwise you could find yourself in an infinite loop.