The script continues to run despite receiving an XHR error status of 0

Question

The script continues to run despite receiving an XHR error status of 0

I have created an asynchronous audio upload script that is working flawlessly, except for one issue that is really bothering me. The problem lies in the error handling aspect, where an error is being handled with an xhr status of 0 even though the upload process continues without any apparent errors.

xhr.upload.addEventListener("progress", keepPage(file,xhr),false);
xhr.upload.addEventListener("progress", uploadProgress,false);
xhr.upload.addEventListener("load", uploadComplete, false);
xhr.upload.addEventListener("error", uploadFailed(xhr.status), false);
xhr.upload.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "http://" + document.domain + "/script.php", true);
xhr.send(fd);
var uploading = true;
uploaded = false;
xhr.onreadystatechange=function(){
    if (xhr.readyState==4 && xhr.status==200) {
        var response = xhr.responseText;
        if (response == "success"){
            var uploaded = true;
            processSuccess();
        }
        else {
            var obj = $.parseJSON(response); //parse error JSON array
            errReport = obj.errReport
            uploadFailed(errReport);
        }
     }
}
uploading_tools(file, xhr, uploaded);

The error event seems to be triggered as soon as the upload starts. Upon adding console.log(xhr.status) in the uploadFailed function, a status of 0 is displayed.

Even though I know that an xhr status of 0 usually occurs when an ajax call is made across different domains, this doesn't seem to be the case here.

If I am unable to resolve this annoying bug, I might just have to ignore the xhr status of 0 in my error handling logic, which is something I would prefer to avoid.

Edit:

xhr.open("POST", "http://" + document.domain + "/script.php", true);
xhr.upload.addEventListener("progress", keepPage(file,xhr),false);
xhr.upload.addEventListener("progress", uploadProgress,false);
xhr.upload.addEventListener("load", uploadComplete, false);
xhr.upload.addEventListener("error", uploadFailed(xhr.status), false);
xhr.upload.addEventListener("abort", uploadCanceled, false);
xhr.send(fd);
var uploading = true;
uploaded = false;
xhr.onreadystatechange=function(){
    if (xhr.readyState==4 && xhr.status==200) {
        var response = xhr.responseText;
        if (response == "success"){
            var uploaded = true;
            processSuccess();
        }
        else {
            var obj = $.parseJSON(response); //parse error JSON array
            errReport = obj.errReport
            uploadFailed(errReport);
        }
     }
}
uploading_tools(file, xhr, uploaded);

javascript ajax xmlhttprequest

Answer 1

Answer №1

Remember to always utilize the open() function before interacting with any other property or method of the XMLHttpRequest. Failure to do so may result in unexpected behavior.

UPDATE Upon further inspection, it appears that there is no error occurring! The issue lies within this line:

xhr.upload.addEventListener("error", uploadFailed(xhr.status), false);

You are actually not assigning uploadFailed() as the event handler for the error event. Instead, you are invoking uploadFailed(xhr.status), which means you are setting the event handler to be the return value of the function! Since uploadFailed does not return anything, there is essentially no error handler assigned. However, your function is still being called when this line is executed! Due to xhr.send() not being called yet, xhr.status is 0.

To rectify this, you need to modify the line to

xhr.upload.addEventListener("error", uploadFailed, false);

Similar to how you have set up the other event listeners:

xhr.upload.addEventListener("progress", uploadProgress,false);
xhr.upload.addEventListener("load", uploadComplete, false);

REVISED UPDATE

In response to your feedback, the issue persists because you continue to follow the same approach rather than the suggested solution. Let me try explaining it again.

Imagine your uploadFailed function looks like this:

function uploadFailed(error) {
    console.log(error);
    return true;     //let's assume this line exists, even though it's not necessary.
}

Now, let's revisit the code in question:

xhr.upload.addEventListener('error', uploadFailed(errReport), false);

What exactly is happening with this line? Essentially:

var f = uploadFailed(errReport);   //uploadFailed is being called, not assigned to f
xhr.upload.addEventListener('error', f, false); //f is not a function, but the value 'true'!

Comprehend now? When that line executes, you are executing the function and assigning the result instead of simply assigning the function itself. If passing the error value to the error function is the concern, here's a potential solution:

function uploadFailed() {
    console.log(this); //upon assigning this function as an event handler, 
                       //'this' will refer to the object triggering the event (xhr.upload)
}

You don't necessarily have to pass the xhr object to the function, but if there is a specific need to pass the error argument, you can go about it like so:

xhr.upload.addEventListener('error', function() { uploadFailed(xhr.status); }, false);

This manner, you create a new function encapsulating your xhr object in its scope, allowing you to pass it to your error function.

I trust you grasp the distinction between a function and a function call, as it holds crucial importance.

Answer 2

Remember to always utilize the open() function before interacting with any other property or method of the XMLHttpRequest. Failure to do so may result in unexpected behavior.

UPDATE Upon further inspection, it appears that there is no error occurring! The issue lies within this line:

xhr.upload.addEventListener("error", uploadFailed(xhr.status), false);

You are actually not assigning uploadFailed() as the event handler for the error event. Instead, you are invoking uploadFailed(xhr.status), which means you are setting the event handler to be the return value of the function! Since uploadFailed does not return anything, there is essentially no error handler assigned. However, your function is still being called when this line is executed! Due to xhr.send() not being called yet, xhr.status is 0.

To rectify this, you need to modify the line to

xhr.upload.addEventListener("error", uploadFailed, false);

Similar to how you have set up the other event listeners:

xhr.upload.addEventListener("progress", uploadProgress,false);
xhr.upload.addEventListener("load", uploadComplete, false);

REVISED UPDATE

In response to your feedback, the issue persists because you continue to follow the same approach rather than the suggested solution. Let me try explaining it again.

Imagine your uploadFailed function looks like this:

function uploadFailed(error) {
    console.log(error);
    return true;     //let's assume this line exists, even though it's not necessary.
}

Now, let's revisit the code in question:

xhr.upload.addEventListener('error', uploadFailed(errReport), false);

What exactly is happening with this line? Essentially:

var f = uploadFailed(errReport);   //uploadFailed is being called, not assigned to f
xhr.upload.addEventListener('error', f, false); //f is not a function, but the value 'true'!

Comprehend now? When that line executes, you are executing the function and assigning the result instead of simply assigning the function itself. If passing the error value to the error function is the concern, here's a potential solution:

function uploadFailed() {
    console.log(this); //upon assigning this function as an event handler, 
                       //'this' will refer to the object triggering the event (xhr.upload)
}

You don't necessarily have to pass the xhr object to the function, but if there is a specific need to pass the error argument, you can go about it like so:

xhr.upload.addEventListener('error', function() { uploadFailed(xhr.status); }, false);

This manner, you create a new function encapsulating your xhr object in its scope, allowing you to pass it to your error function.

I trust you grasp the distinction between a function and a function call, as it holds crucial importance.

The script continues to run despite receiving an XHR error status of 0

Answer №1

Similar questions

Remove an option from a drop-down menu once a different option has been selected (using Jquery)

unveiling the comparison between the revealing module and object literal patterns in encapsulating code

Modifying elements in AngularJS

A series of OR interfaces in TypeScript Interface

Angular generates an array that is not native to the system

Troubleshooting: MongoDB/mongoose post save hook does not execute

Using React Native to implement Firebase onSnapshot with FlatList pagination

Reached the maximum number of iterations for Angular 10 $digest() function

Tips on sending variables to a PHP script from a JQuery $(document).ready function

When the key code is equal to "enter" (13), the form will be submitted

An error occurs when trying to access the 'map' property of an undefined variable

Developing a function that takes a parameter which can be used with or without an additional argument when invoked

Leveraging .tsx components within nested .tsx components in React Native

The text for the Google chart is nowhere to be found

Error: Unable to locate module: 'material-ui/styles/colors'

What causes the sudden disappearance of the returned value from AJAX?

Combine the serialized form data along with an array and post them together

When a promise is executed, it runs the code synchronously regardless of the promise

A guide on utilizing the TypeScript compilerOptions --outDir feature

Pretending to determine the exact height of the body