[Android] - XMLHttpRequest ontimeout not fired

Timeouted XMLHttpRequest request do not call the timeout callback on android. The request is being aborted (the onreadystatechange or onerror never get called after) while in IOS the timeout event getting called as expected.

const request =  new XMLHttpRequest();

request.open('GET', "http://localhost:3333/", true);
request.timeout = 1000;
request.onabort = () => { console.log('abort', request); };
request.onerror = () => { console.log('error', request); };
request.onload = () => { console.log('load', request); };
request.onloadend = () => { console.log('loadend', request); };
request.onreadystatechange = () => { console.log('onreadystatechange', request); };
request.ontimeout = () => { console.log('ontimeout', request); };
request.send();

The server sleeps for 3 seconds to make sure the timeout occurs.

will print on Android

onreadystatechange XMLHttpRequest {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4…}
load XMLHttpRequest {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4…}
loadend XMLHttpRequest {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4…}

on Ios

onreadystatechange XMLHttpRequest {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4…}
ontimeout XMLHttpRequest {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4…}
loadend XMLHttpRequest {UNSENT: 0, OPENED: 1, HEADERS_RECEIVED: 2, LOADING: 3, DONE: 4…}

Additional Information

• React Native version: 0.39.2
• Platform: Android
• Operating System: MacOS

[vmatt]

I solved this problem with a setTimeout method. If the readyState is not DONE, call the request.abort() function.

setTimeout(() => {
    if (request.readyState !== XMLHttpRequest.DONE) {
        request.abort();
        callback("timeouterror");
    }
}, parseFloat(this.state.timeout));

[sergop321]

Thanks @Lxxyx This is a specific workaround using axios but it probably should have a fix in the android code. this bug will persistent for different libraries as well.

@Lxxyx In the gist provided you always overriding the cancelToken, that mean you won’t be able to cancel requests that are not timeouted (Which is probably one of the reasons you are using axios instead of fetch in the first place), you can solve this by creating a wrapper around every request that will generate the cancel token and pass it (Not using the axios interceptors) or by passing cancelExecuter inside the config object and before generating a new cancel token, check if one already exsists.