The data doesn't send: NS_BINDING_ABORTED and page redirection on Firefox

[RomainPastureau]

Hello everyone!

I am trying to code a jsPsych experiment, hosted on a LAMP server. Everything works well; at the end, I am trying to move to the next task by performing a redirection.

Here is the code:

saveData(save_url, data_dir, file_name, extension, redirect_html, redirectToNextPage);

function saveData(save_url, data_dir, file_name, extension, redirect_html, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', save_url); // 'write_data.php' is the path to the php file used to save the data
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                // Data was saved successfully, now trigger the callback function
                callback(redirect_html);
            } else {
                // Handle any errors that occurred during data saving
                console.error('Error saving data: ' + xhr.status);
            }
        }
    };
    xhr.send(JSON.stringify({file_name: file_name, extension: extension, data_dir: data_dir, data: jsPsych.data.get().csv()}));
}

function redirectToNextPage(redirect_html) {

    if((window.location.href).indexOf('?') != -1) {
        var variables = window.location.href.split('?')[1]; 
        redirect_html += "?" + variables;
    };

    last_trial_data = jsPsych.data.getLastTrialData().trials[0];
    if(last_trial_data["chain"] != "false"){
        window.location = redirect_html;
    };  

}

Despite waiting for a confirmation that the data is posted using xhr.readyState === XMLHttpRequest.DONE and xhr.status === 200 before calling the function to perform the redirection, running the experiment on Firefox induces a NS_BINDING_ABORTED error. I understand that what is happening is that the request gets cancelled by the redirection (as running the experiment without the redirection works properly and the data is sent).

Would anyone have an idea of what is going wrong?

[bjoluc]

Hi @RomainPastureau,
I suspect this works in other browsers? The code looks good. It seems like saving the data doesn't succeed in the first place. Maybe the Network tab in the Firefox developer tools has more details at hand about why the request fails? You could also remove the redirection to see if the problem persists (which I suspect it does).

[RomainPastureau]

Hi, thanks for your reply :)

The problem came with Firefox. We ended up finding a solution that seems to work by calling a Promise, I will leave the code below for posterity

function saveData(save_url, data_dir, file_name, extension) {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', save_url);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    resolve();
                } else {
                    reject(new Error('Error saving data: ' + xhr.status));
                }
            }
        };
    xhr.send(JSON.stringify({file_name: file_name, extension: extension, data_dir: data_dir, data: jsPsych.data.get().csv()}));
    });
}

// Usage of async/await for the redirection
async function saveAndRedirect(save_url, data_dir, file_name, extension, redirect_html) {
    try {
        await saveData(save_url, data_dir, file_name, extension);
        redirectToNextPage(redirect_html);
    } catch (error) {
        console.error(error);
    }
}

function redirectToNextPage(redirect_html) {

    if((window.location.href).indexOf('?') != -1) {
        var variables = window.location.href.split('?')[1]; 
        redirect_html += "?" + variables;
    };

    last_trial_data = jsPsych.data.getLastTrialData().trials[0];
    if(last_trial_data["chain"] != "false"){
        window.location = redirect_html;
    };  

}