Best practice for reporting client errors with window.onerror?

Question

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?

Answer 1

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

Answer 2

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).