Javascript: Which parameters are there for the onerror event with image objects? How to get additional details on an error related to an image?

Question

I'm writing an application in JavaScript that should create a new image. Sometimes it fails. I was able to detect the times when it does by attaching an image.onerror event listener. Question is: How may I learn what error occured - what parameters does the error object for images bring? So far I only found out that

image.onerror = function (errorMsg, url, lineNumber, column, errorObj) {
  console.log('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber
  + ' Column: ' + column + ' StackTrace: ' +  errorObj);
}

which I got from: javascript: how to display script errors in a popup alert?

returns Error: [object Event] Script: undefined Line: undefined Column: undefined StackTrace: undefined and in the error object I couldn't find anything related to message or error code.

Answer 1

AFAIK the image.onerror handler will receive a single Event parameter that doesn't contain any info on the cause of the error.

Answer 2

If you want to trap errors on a normal HTML img element (rather than dynamically creating one via the DOM), this seems to work well:

 <img src="http://yourdomain/site/badimage.png" 
      onerror="javascript:imageErrorHandler.call(this, event);"/>

Note that the .call(this, event) syntax is important so you have access to the this and event objects in your error handler.

Then you can define an image error handler like the following. (Make sure it is defined before the img element to avoid race conditions.) Assuming you have jQuery wired up:

 function imageErrorHandler(evt) {
    var $e = $(this);
    var src = $e.attr("src");
    console.log("Image URL '" + src + "' is invalid.");
 };

Tested this in Chrome. Have not tried other browsers.