This one genuinely puzzles me.

I have code that listens for AJAX events, all of which is running as planned, but for one quirk that strikes me as bizarre. Namely, if I attach an error event listener to an AJAX XMLHttpRequest object, and the error event is fired on that object, the error event handler receives a ProgressEvent object, which does not contain any useful error information.

My intuition tells me that what should be sent to the error event handler, is an ErrorEvent object. But this doesn't happen.

Given this bizarre quirk, how do I detect actual AJAX errors when they occur? I am also tempted to ask, what is the point of an error event handler that is never supplied with error information?

If there is some sort of rationale for passing a ProgressEvent object to an AJAX error event handler, then I'd really like this one explaining as well.

This one genuinely puzzles me.

I have code that listens for AJAX events, all of which is running as planned, but for one quirk that strikes me as bizarre. Namely, if I attach an error event listener to an AJAX XMLHttpRequest object, and the error event is fired on that object, the error event handler receives a ProgressEvent object, which does not contain any useful error information.

My intuition tells me that what should be sent to the error event handler, is an ErrorEvent object. But this doesn't happen.

Given this bizarre quirk, how do I detect actual AJAX errors when they occur? I am also tempted to ask, what is the point of an error event handler that is never supplied with error information?

If there is some sort of rationale for passing a ProgressEvent object to an AJAX error event handler, then I'd really like this one explaining as well.

• javascript
• ajax

Share Improve this question Follow asked Jul 20, 2018 at 23:26 David EdwardsDavid Edwards 85411 gold badge1010 silver badges1313 bronze badges 2

• 1 I have code - we can't see it, so we can't see if you did something wrong - surely the event that is sent to the event handler has a type property that you can use to check what type of event you are receiving, therefore can ignore type's that you don't want to deal with :p – Jaromanda X Commented Jul 20, 2018 at 23:53
• Can you update your question and include the relevant source code please? Thank you. – NewToJS Commented Jul 21, 2018 at 0:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

An ErrorEvent is sent when an error occurred in a script or file.

E.g, it will be sent if an unhandled Error happened in a Worker script:

var throwing_script = new Blob(['###']);  // Syntax Error
var throwing_script_url = URL.createObjectURL(throwing_script);
var w = new Worker(throwing_script_url);
w.onerror =  e => console.log('Error in Worker, ErrorEvent ?', e instanceof ErrorEvent);

But it won't if the Error happened somewhere else than in script execution:

var throwing_url = 'foo'; // 404
var w = new Worker(throwing_url);
w.onerror =  e => console.log('Error in Worker, ErrorEvent ?', e instanceof ErrorEvent);

In this case, what is sent is an Error, initialized as Error, but it doesn't inherit from ErrorEvent because there is no message, lineno, colno, etc. to be reported.

---

So no, in your case that wouldn't make sense to receive an ErrorEvent.

So why is it a ProgressEvent and not an Event initialised as "error"? Well... actually it is, but for an AJAX request, a ProgressEvent still makes more sense.

Indeed, for what the AJAX part is concerned, the request has been handled correctly. Even though you don't have the requested data for whatever reason, the HTTP request has done its job without error. I.e, it succeeded to send the request and to receive a response, even if this response as that there was nothing to fetch there, or that you weren't allowed to fetch it.

So this is just a step of the whole request (probably the last one), and thus still a ProgressEvent.

But as I said, this is still an Event initialised as "error", indeed, if ProgressEvent inherits from Event and our ProgressEvent here had its Event prototype initialised as "error" as you can see in its .type property.

var xhr = new XMLHttpRequest();
xhr.onerror = e => console.log(
  'ProgressEvent ? ', e instanceof ProgressEvent,
  '"error" event ? ', e.type
);
xhr.open('foo', 'bar://baz');
xhr.send();