I'd like to catch all client-side JavaScript errors on our site and log them. What are some best practices for doing this?

Thoughts:

• I can easily add a /log/ handler to our webapp, parse GET/POST parameters and use our existing logging system on the server-side. Is that too obvious?
• Does window.onerror work everywhere? What if an error occurs in the handler?
• Should I attach an <img> tag to the page or make an XmlHttpRequest? What if the XHR fails?
• What about broken images and jQuery Ajax failures — can I catch those too?

I'd like to catch all client-side JavaScript errors on our site and log them. What are some best practices for doing this?

Thoughts:

• I can easily add a /log/ handler to our webapp, parse GET/POST parameters and use our existing logging system on the server-side. Is that too obvious?
• Does window.onerror work everywhere? What if an error occurs in the handler?
• Should I attach an <img> tag to the page or make an XmlHttpRequest? What if the XHR fails?
• What about broken images and jQuery Ajax failures — can I catch those too?

• javascript
• logging
• error-handling

• Thank you all! Bounty goes to dgvid with the most information. Accepted answer goes to Zoran with the superset of information. – a paid nerd Commented Nov 7, 2011 at 20:45

4 Answers 4

All suggestions made by Jbecwar and dgvid are cool, I would add:

• note that Opera does not support error event see quirksmode error event
• gathering stacktraces with stacktrace.js could help troubleshoot errors
• if error handler is unable to send error report to server side, fallback to using cookies: set cookie for errors.yourdomain.com with base64 encoded error report (compressed?) and request empty 1x1 pixel image from that domain on every page
• or use HTML5 local storage and upload it when you can

As Jbecwar suggests, the log handler is a good idea, but you need to watch out for a condition in which you try to call the log handler to report an error contacting the log handler. If the browser loses its connection to the server, you aren't going to be able to log that back to the server.

You can catch an img load failure by attaching an error handler to the img element, then setting its src attribute. For example, using jQuery:

$("img#my-image").error(onImgError).prop("src", "images/my-image.jpg");

You won't get much information that way, just the fact that an error occurred while trying to load the specified element.

You can handle failures in jQuery.ajax requests by including an error callback function in the settings object passed to $.ajax. Be sure to wrap the code in both the success and error callback functions in try-catch.

Generally, you will want to protect your code with try-catch blocks so that you can catch and log errors. Handling window.onerror should be a last resort - for the things that slip through.

In your window.onerror handler, wrap everything in a try-catch block and ensure that you will not throw from the code in the catch block (using nested try-catches, if necessary).

The log handler sounds like a good idea, but I would limit the number of reports or tries that the report does. For example you don't want the reporter to have an error and then try to report it self over and over. Also if you have a bad client or a spike in traffic you dont' want to log too much.

Also, window.onerror won't work for iframes and I would do the xmlhttprequest, do you don't want to mess with the dom if you already having problems

TL;DR; Limit the client side requests and enforce limits at the server. window.onerror is no good for iframes, and use the xmlhttprequest.

We've recently started reporting unhandled errors as page-views to google-analytics. The basic idea is that a window.onerror handler would convert the error information (script file path, line number and error message) into a virtual error-page-url and report it as a page view. You can apply the logic to any page tracking mechanism.

The simple code we use is available on github at https://github.com/shyam-habarakada/js-watson

With all the analytical power of google analytics, and this simple technique, we've had great success in identifying the frequent and critical errors and been able to resolve them quickly. You can also use the power of GA to analyze trends in overall errors, specific errors in specific files, etc. etc. Highly recommended.