fetch request randomly hanging with react-native app

Question

The other day, I noticed that some of the API calls from the app were silently not being executed. I logged out a console.log before and after a fetch request, and lo' and behold, the await on the fetch was never completing.

// in an async js function...

let response;
try {
   console.log("START")
   response = await fetch(url, { headers, method, body });
   console.log("END")
} catch (err) {
   console.log(err)
}

Will it finish?

In the logs for the app, I see "START", but then I wait 2-5 minutes and it will usually print "END"

Is it the server?

I suspected that it was just a slow server API, but tailing the logs on the server, the request doesn't even get sent until ~2 minutes after the "START" -- and I see it get sent / processed right when it prints out "END"

I have actioncable connected to Redis, mounted in my Rails app, served via Puma on Heroku.

Can I reproduce it?

It's been super hard to reproduce it, but I can usually trigger it by pressing command + R in the iOS app simulator, which reloads the app, and kicks off some new API requests that hang.

Anything else?

I have a websocket connection open to the server. Not sure if that could cause any interference.

I've tried using a timeout with AbortController, but it just waits 5 seconds and then kills the request (but no new requests succeed)

Once it starts, every API request hangs.

My questions

Is there some good way to debug this?
Is there something that could be queuing up fetch requests in the background that I'm not aware of?

UPDATE: Okay, maybe it is my server...? I tried changing the URL to a different website and it appears that the requests are completing.**

UPDATE: Alright, I think it's the server. I tried a curl request and a traceroute and they showed something is hanging big time...

traceroute results

traceroute to us-east-1-a.route.herokuapp.com (127.0.0.54), 64 hops max, 52 byte packets
 1  * * *
 2  * * *
 3  * * *
 4  * * *
 5  * * *
 6  * * *
 7  * * *
 8  * * *
 9  * * *
10  * * *
(it never ends)

curl results

curl -v https://redacted.herokuapp.com/v3/users/me
*   Trying 127.0.0.54...
* TCP_NODELAY set
* Connection failed
* connect to 127.0.0.54 port 443 failed: Operation timed out
* Failed to connect to redacted.herokuapp.com port 443: Operation timed out
* Closing connection 0
curl: (7) Failed to connect to redacted.herokuapp.com port 443: Operation timed out

Update: This gets weirder and weirder. I turned off my iOS Simulator, and let my computer rest for 10 minutes. Came back, and just tried simple curl requests, and it worked. Fired the iOS simulator back up, and now my curl requests timeout.

Update: I suspect this has to do with actioncable blocking requests on Heroku. Attempting to disable all websockets and test again.

Update: To see if it was application specific, I created a brand new react native app and a brand new Rails API.

API Steps

rails new my_api --api
remove sqlite3 and add in pg gem
updated database.yml
add a "health" status ok endpoint (controller + route)
deploy to heroku

Mobile App Steps

create new react native app
add a setInterval request in componentDidMount to fetch from the rails API
put a console.log before and after the await
press refresh ("r") on the console to refresh the app
refresh the app ~10 times
request hangs at some point

I'm a complete loss...

fetch request randomly hanging with react-native app

0 Answers