499 Error Server Timeout with Firefox

1

I am getting a very specific error when running my application on Firefox. This error is not returned to the front end but can be found in my server logs.

I am going to try to provide enough detail and info to make this (semi)-reproducible but there are a lot of factors at play so it might be tricky.

I have a full stack app build with React and Python. The front and back end are deployed separately, but both on Render. The domain is hosted with GoDaddy, and I am using a subdomain for the backend to avoid cookie issues.

My app works as expected in Chrome and Safari, but in Firefox I frequently get an error.

The two error messages I see are:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.torsera.com/process_story. (Reason: CORS request did not succeed). Status code: (null).

and

Error: 
Object { stack: "Fb@https://www.torsera.com/static/js/main.a32a5f2f.js:2:734425\nOw</</m.onerror@https://www.torsera.com/static/js/main.a32a5f2f.js:2:751607\nEventHandlerNonNull*Ow</<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:751584\nOw<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:750679\ne_@https://www.torsera.com/static/js/main.a32a5f2f.js:2:757729\n_request@https://www.torsera.com/static/js/main.a32a5f2f.js:2:760570\nrequest@https://www.torsera.com/static/js/main.a32a5f2f.js:2:759092\nt/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:761020\nJy/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:728072\nWM@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1231453\nonClick@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1234296\nLe@https://www.torsera.com/static/js/main.a32a5f2f.js:2:39487\nVe@https://www.torsera.com/static/js/main.a32a5f2f.js:2:39641\n730/jr/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:59541\njr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:59635\nFr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60052\n730/$r/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:65494\nuu@https://www.torsera.com/static/js/main.a32a5f2f.js:2:129152\nRe@https://www.torsera.com/static/js/main.a32a5f2f.js:2:38619\n$r@https://www.torsera.com/static/js/main.a32a5f2f.js:2:61346\nHt@https://www.torsera.com/static/js/main.a32a5f2f.js:2:45742\nKt@https://www.torsera.com/static/js/main.a32a5f2f.js:2:45524\nEventListener.handleEvent*qr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60849\nBr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60248\n730/zr/<@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60414\nzr@https://www.torsera.com/static/js/main.a32a5f2f.js:2:60358\n730/t.createRoot@https://www.torsera.com/static/js/main.a32a5f2f.js:2:150747\n@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1293094\n@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1293227\n@https://www.torsera.com/static/js/main.a32a5f2f.js:2:1293231\n", message: "Network Error", name: "AxiosError", code: "ERR_NETWORK", config: {…}, request: XMLHttpRequest }
home-page-util-functions.js:233:14

After quite a bit of research I discovered that despite the error mentioning CORS this is not really a CORS issue.

The endpoint I am hitting is returning a 200 response to the options request but the actual POST request is NOT getting any response.

I found various posts on stackoverflow and this mdn doc: mdn but none of this seem to be the issue I am having, because my request does succeed on Firefox occasionally.

I checked my server logs and I found that when my request fails there is always a log like this somewhere in server logs: 499 api.torsera.com/process_storyclientIP="69.180.xxx.xxx" requestID="893c3004-ca76-4fc4" responseTimeMS=29965 responseBytes=0 userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:130.0) Gecko/20100101 Firefox/130.0"

That error doesn’t always seem to appear in the same place in the logs and importantly my backend continues to process the user request even after this error appears.

The notable thing from this error is responseTimeMS=29965 which makes me believe there is some type of timeout happening.

IMPORTANT The backend process I am running is making multiple calls to external apis. So I believe it is my connection with the external apis that is throwing the 499 error.

However, if that is the case I am not sure why it would be browser dependent.

I have tried increasing network.http.connection-timeout in Firefox and that didn’t change anything.

Here are the request headers I am using:

Accept: application/json
Accept-Encoding: gzip, deflate, br, zstd
Accept-Language: en-US,en;q=0.5
Alt-Used: api.torsera.com
Connection: keep-alive
Content-Length: 148
Content-Type: application/json
Cookie: _ga_4FS2W9D=GS1.1.172775.5.1.17258.0.0.0; _ga=GA1.1.561638967.1726769877; session=eyJhbGciOiE15OXB1Q0puYmpEN2dRTzlQT09kTnl4VG1
Host: api.torsera.com
Origin: https://www.torsera.com
Priority: u=0
Referer: https://www.torsera.com/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
TE: trailer

If there are any other details that I can provide let me know. I am very determined to get to the bottom of this issue.

The interesting thing is that my api call doesn’t fail 100% of the time. I get a success maybe 1 in 20 tries so I don’t think the problem has to do with my certificate.

I raised an issue with Firefox and they told me the problem was on the server.

2

There are a lot of moving parts here;

A 499 is supposed to mean that the requestor closed the connection ( List of HTTP status codes - Wikipedia ). The service, which in your case I believe is the Python backend, did not close the connection, but received a TCP close. Because of the realities of the internet, a 499 might not mean that the requestor closed the connection, it could mean there was a connection interrupt between your service and the requestor; Cloudflare may have closed the connection for some reason, the Render routing infrastructure may have closed the connection for some reason, etc.

You are correct that CORS isn’t involved, CORS is complaining because the request didn’t complete. Since the request didn’t complete, CORS headers weren’t available, if no response comes in, CORS complains because headers aren’t available. This is a huge burden with the frontend/backend model that is constantly seen, if diagnosis is done on the frontend, the reality (backend failure) is entirely obscured.

That said, responseTimeMS=29965 is a relevant detail here. Tons of software defaults to a timeout of 30 seconds. 30 seconds is 30,000 milliseconds. If a working response took 29.9 seconds, it is likely that the other 19 failures failed because it took 30 seconds.

I don’t know enough about your stack to know if increasing network.http.connection-timeout is enough. There’s may be something else in React I don’t know about, and possibly other aspects of your application’s stack that still emits this 30 second timeout. This sounds more like a data timeout than a connection timeout, it’s likely that it connected to the appropriate destination, but gave up when data was not returned within 30 seconds.