[Android] - XMLHttpRequest ontimeout not fired

[sergop321]

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

[rafaelbusetti]

+1

[Lxxyx]

+1 same problem. but use axios

[Lxxyx]

@sergop321 @OMegaTiger Do you resolve this problem?

[sergop321]

I encounter the problem while using axios but after some investigation I tracked the issue to react native XMLHttpRequest.

I wasn't able to resolve the issue, but I did find out that it is not always happening, https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/XHRExampleOnTimeOut.js this example with timeout on in android works (it do not work if you change the domain)

I am not sure what exactly the issue it might be with localhost, or port or it might be with the way you holding the request on the server. @Lxxyx if you are using localhost try to make the request to a different domain it might help.

[Lxxyx]

@sergop321 thank you, i'll try it.

[Lxxyx]

Seems to be axios bug. When i set timeout to 10ms, timeout works for every request but when i set timeout to 3000ms or longer, timeout do not work.

[Lxxyx]

@sergop321 I resolve this problem by use axios cancelToken but not timeout (I can not resolve react-native bugs).

Here is the code:

const TIMEOUT = 5000
function generateRequestCancelToken () {
  let cancelRequest

  return async (config: Axios.AxiosXHRConfigBase<any>) => {
    config.cancelToken = new axios.CancelToken((cancelExecutor) => {
      cancelRequest = cancelExecutor
    })

    setTimeout(() => {
      if (cancelRequest instanceof Function) {
        cancelRequest('ECONNABORTED')
      }
    }, TIMEOUT)

    return config
  }
}

const requestCancelToken = generateRequestCancelToken()
axiosInstance.interceptors.request.use(requestCancelToken, null)

When timeout, it will throw an error: { message: 'ECONNABORTED' }, then you can handle this error.

[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.

[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));