We have a couple React applications that are suddenly failing requests to our REST API; this has only been happening for about a week and has happened with no changes to our code. Our infrastructure is as follows:
Netlify-hosted React applications with a proxy set up via the netlify.toml file (detailed below).
Heroku-hosted Node/Express REST API
React applications were built with Create React App and uses Axios for requests and Mobx State Tree for managing state and initiating requests.
The requests only fail randomly, about half the time for some endpoints, and only fail in Safari and Firefox. Chrome and Opera do not have this issue. I’m testing on macOS, but Safari on iOS has the same issue. The way the requests fail is not due to CORS (as it shouldn’t be since we’re proxying requests), authorization, or any other standard HTTP error; what we get from Axios is a “Network Error” which is their method for setting the callback for the XMLHTTPRequest onerror function.
Here are the details of the relevant configuration in netlify.toml for proxying the requests to our API:
[build]
command = "sed -i \"s@API_URL_PLACEHOLDER@$API_URL@g\" netlify.toml && yarn build"
# API proxying
[[redirects]]
from = "/api/*"
to = "API_URL_PLACEHOLDER/:splat"
status = 200
force = true
# React Router support
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
API_URL is set per-environment to allow for environment-specific APIs and we replace API_URL_PLACEHOLDER with its value in the build command. The redirects are set up based on the recommendations in the documentation.
We are unable to reproduce this issue locally in any way. We run a production build of the React code and even proxy to our production Heroku instance and it works fine locally. The only difference between our local tests and our live Netlify server is how requests are proxied (we use http-proxy-middleware from npm locally for proxying). I tried to set up Netlify Dev for more one-to-one testing, but ran into a lot of errors.
Based on all of our research, it seems like something is suddenly happening on Netlify with how it handles redirects like ours. Has anyone else had this issue or does anyone have any additional thoughts on how to resolve this? We’ve exhausted everything we can think of over a few days and don’t know where to go next.
Hi @sporkbytesalex, thanks for writing in! really appreciate you being a part of our community. Do you have an x-nf-request-id from one of these failed requests? What was the status that was sent back to your client? Also what is the URL that is erroring out for you?
Hi @futuregerald, thanks for the response! And sorry for my delayed response; I’ve been out for the holidays.
I was just able to reproduce the issue and do have a request ID and URL I can share with you. The URL is a private URL that requires an authenticated user to make the request. Will that be an issue? Here’s the request ID:
72f6cb3b-03ba-406f-947e-e0f477dd9c9a-4056079
The response back from the server is a 200.
If it’s alright with you, I’d prefer to share the URL via private message or another private means. If we’re able to resolve the issue, I’m happy to post any helpful information here to aid other developers in the future.
@sporkbytesalex, I’ve enabled private messages (PMs) on the community forum for you. Would you please send the URL to @futuregerald (or me)?
I show that Netlify also returned a 200 response for that. Was the issue with the data returned (not the status code)? What was the nature of the error (and please feel free to PM that if you prefer)?
@johndatserakis it just seemed to resolve itself. I sent a PM to the support engineers and never received a response, but relatively soon thereafter we stopped having problems. Frankly, I completely forgot about this, which is why it’s still open.
I see, thanks for replying. Yea I’m going through the same issue now, a redirect was working in the past but is no longer working. I did make some changes to the project though, including a re-linking of a new git repo that I think has triggered the new “monorepo” change that Netlify has implemented.
I’ll update here if I find anything. Thank you.
Edit - ha funny enough after working with it tonight I got it to work like I had it set up before. The answer for me was that I had to send my api calls to my domain, which for whatever didn’t reason didn’t work when I had it hard coded, I had to actual have my api calls go to my raw domain, like an empty string with my appended “/api/v1” to it, then, and only then, did the Netlify redirect properly. Hopefully this helps someone else reading in the future, ha.
@johndatserakis when you say “have my api calls go to my raw domain” do you mean you had to make requests to absolute URLs instead of relative? To be fully explicit:
Hey @sporkbytesalex, actually no, my requests have always been absolute, which made everything seem stranger for me as that really reduces the chance of the redirect not catching.
In the end, I found that even after my message here the other day, I was experiencing issues - although seemingly only on certain routes. Because I had run into some issues with my git transition concerning my netlify.toml file, I incorrectly attributed the redirect issue as another side effect of the Netlify monorepo update a while back.
After looking very deep into it, I found that there was actually a typo bug in my code that caused the issues. Everything is working correctly now. Sorry to bump the thread.