fetch() Network request failed

[markhomoki]

Environment

OS: macOS High Sierra 10.13.4
Node: 6.11.0
Yarn: 1.7.0
npm: Not Found
Watchman: 4.7.0
Xcode: Xcode 9.4 Build version 9F1027a
Android Studio: 3.1 AI-173.4697961

Packages: (wanted => installed)
react: 16.3.2 => 16.3.2
react-native: ^0.55.4 => 0.55.4

Description

I have a weird issue, which I tried to debug without luck. I launched my app couple days ago in App Store and everything worked fine and even now for most users is working fine. My app is written in React Native and the API Server is using SSL, Xcode setup properly to handle and whitelist the API URL.

2 days ago I received a feedback that 3 GET calls don't load properly.

My app has 4 tabs on the bottom and doing the following 4 requests on startup:

1. GET /events?page=1&four_five_extra_query_params
2. GET /users/me <- without any params
3. GET /messages?page=1
4. GET /notifications?page=1

To make these calls, first I am authenticating the user via a POST requests which works fine in every case.

The issue is, for some users when they launch the app the 1st, 3rd and the 4th tab is just loading without any results (the 2nd tab always load properly). Yesterday for 10 minutes my 1st phone had the same issue so quickly tried to debug it. To make it clear, the API server is not down, during these unsuccessful loads from the app, I can make requests to those endpoints from other phones and Postman. Since then my app is working again properly without a single line of change.

This was the error from Google Chrome Debugger:

err TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (fetch.js:441)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:567)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:397)
    at XMLHttpRequest.js:503
    at RCTDeviceEventEmitter.emit (EventEmitter.js:179)
    at MessageQueue.__callFunction (MessageQueue.js:351)
    at MessageQueue.js:116
    at MessageQueue.__guardSafe (MessageQueue.js:314)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:115)

Today my 2nd phone started to have this issue, while it's working perfectly on my 1st phone. So I am still debugging it to come up with a solution. The weird part is if I change the endpoint on the 2nd phone to just /events it loads instantly if I change back to /events?page=1&four_five_extra_query_params then it doesn't and also doesn't send the request to the server. If I change the query args or even if just add one to it the app sends the request to the API and loads correctly.

Also a funny thing, I moved my API server to another subdomain, connected to that URL in debugging and everything worked fine, then changed back to the old subdomain and doesn't work.

The only thing I can think of which doesn't really make sense that the fetch caches the endpoint and that's why doesn't send the request to the server. In those cases when I checking the API server's log those requests don't reach the API server.

I know it's a weird issue, I've never seen this before but I hope someone can help and that'd be great. :)

[react-native-bot]

Please use Stack Overflow for this type of question.

[ali-ahari-hashemi]

Have you found a solution for this? I am having the same error.

[markhomoki]

Yes, I sorted out. Basically, every time when doing a GET request appending the url with ?time=[currentTimestamp] which changes constantly so react has no chance to cache the url.

See the following implementation:

get(url) {
	// workaround to fix the caching issue on GET requests
	const currentTimePrefix = url.indexOf('?') === -1 ? `?` : '&';
	const currentTimeArg = `${currentTimePrefix}time=${new Date().getTime()}`;
	const fixedUrl = `${url}${currentTimeArg}`;

	return this.send(fixedUrl, 'GET');
}

This solution is working now, I don't think this is the best solution I could have come up but it is definitely working. If anyone has a better solution please share it.

[banli17]

chrome debug network request failed。i change chrome's cors。

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/banli/MyChromeDevUserData/

change banli to your mac name。

its ok。may rn's issue，0.45 is ok。

[wm2zfei]

I am having the same error.

[lsl233]

i am having the same error

[tuanmai]

I got the same weird issue when uprade to react native 0.55