Javascript: What parameters exist for the onerror event with image objects? How to get additional information about the error associated with the image?

Question

I am writing a JavaScript application that should create a new image. Sometimes it fails. I was able to determine the time when this happens by adding an image.onerror event image.onerror . Question: how can I find out what happened with the error - what parameters does the error object create for the images? So far I have learned that

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

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

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

Answer 1

The AFAIK handler image.onerror will receive one Event parameter that does not contain any information about the cause of the error.

Answer 2

If you want to catch errors in a regular HTML img element (rather than dynamically create one via the DOM), this looks good:

  <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 this and event objects in the error handler.

You can then define an image error handler as shown below. (Make sure it is defined before the img element to avoid race conditions.) Assuming you have jQuery enabled:

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

Tested in Chrome. Did not try other browsers.

Answer 3

Image.onerror comes with a handler, not an error message, url, ...

So, the first item in the argument list is an event.

If you try your code with

 image.onerror(errorMsg, url, lineNumber, column, errorObj) { console.log(errorMsg); console.log(url) } 

you should get an event for the first log and undefined for the second.

I was unable to find any legitimate link regarding what comes with the burdensome handler for the Image object. But it seems that it is mainly used to flag errors for the user, not for the developer.

Answer 4

The exact results may depend slightly on the browser you are using, but you will get only one parameter - the event. I assume the source you found is out of date. I hacked this little JSFiddle http://jsfiddle.net/Lsag7pt6/ so you can try it yourself. Just comment and delete the correct and “wrong” URLs at the bottom of the script, open the JavaScript console (F12), and you will see a printout of the event with all attributes and values.

For reference, for the correct URL, I get:

 Event {isTrusted: true, type: "load", target: img, currentTarget: img, eventPhase: 2…} bubbles:false cancelBubble:false cancelable:false composed:false currentTarget:null defaultPrevented:false eventPhase:0 isTrusted:true path:Array(6) returnValue:true srcElement:null target:null timeStamp:2109.725 type:"load" 

Otherwise

 Event {isTrusted: true, type: "error", target: img, currentTarget: img, eventPhase: 2…} bubbles:false cancelBubble:false cancelable:false composed:false currentTarget:null defaultPrevented:false eventPhase:0 isTrusted:true path:Array(7) returnValue:true srcElement:img target:img timeStamp:1189.805 type:"error"