Search code examples
reactjsazurefetch

Network request failed from fetch in reactjs app

I am using fetch in a NodeJS application. Technically, I have a ReactJS front-end calling the NodeJS backend (as a proxy), and then the proxy calls out to backend services on a different domain.

However, from logging errors from consumers (I haven't been able to reproduce this issue myself) I see that a lot of these proxy calls (using fetch) throw an error that just says Network Request Failed, which is of no help. Some context:

  • This only occurs on a subset of all total calls (lets say 5% of traffic)
  • Users that encounter this error can often make the same call again some time later (next couple minutes/hours/days) and it will go through
  • From Application Insights, I can see no correlation between browsers, locations, etc
  • Calls often return fast, like < 100 ms
  • All calls are HTTPS, non are HTTP
  • We have a fetch polyfill from fetch-ponyfill that will take over if fetch is not available (Internet Explorer). I did test this package itself and the calls went through fine. I also mentioned that this error does occur on browsers that do support fetch, so I don't think this is the error.
  • Fetch settings for all requests
    • Method is set per request, but I've seen it fail on different types (GET, POST, etc)
    • Mode is set to 'same-origin'. I thought this was odd, since we were sending a request from one domain to another, but I tried to set it differently and it didn't affect anything. Also, why would some requests work for some, but not for others?
    • Body is set per request, based on the data being sent.
    • Headers is usually just Accept and Content-Type, both set to JSON.

I have tried researching this topic before, but most posts I found referenced React native applications running on iOS, where you have to set some security permissions in the plist file to allow HTTP requests or something to do with transport security.

I have implement logging specific points for the data in Application Insights, and I can see that fetch() was called, but then() was never reached; it went straight to the .catch(). So it's not even reaching code that parses the request, because apparently no request came back (we then parse the JSON response and call other functions, but like I said, it doesn't even reach this point).

Which is also odd, since the request never comes back, but it fails (often) within 100 ms.

My suspicions:

  1. Some consumers have some sort of add-on for there browser that is messing with the request. Although, I run with uBlock Origin and HTTPS Everywhere and I have not seen this error. I'm not sure what else could be modifying requests that would cause it to immediately fail.
  2. The call goes through, which then reaches an Azure Application Gateway, which might fail for some reason (too many connected clients, not enough ports, etc) and returns a response that immediately fails the fetch call without running the .then() on the response.

For #2, I remember I had traced a network call that failed and returned Network Request Failed: Made it through the proxy -> made it through the Application Gateway -> hit the backend services -> backend services sent a response. I am currently requesting access to backend service logs in order to verify this on some more recent calls (last time I did this, I did it through a screenshare with a backend developer), and hopefully clear up the path back to the client (the ReactJS application). I do remember though that it made it to the backend services successfully.

So I'm honestly not sure what's going on here. Does anyone have any insight?

Solution

  • Based on your excellent description and detective work, it's clear that the problem is between your Node app and the other domain. The other domain is throwing an error and your proxy has no choice but to say that there's an error on the server. That's why it's always throwing a 500-series error, the Network Request Failed error that you're seeing.

    It's an intermittent problem, so the error is inconsistent. It's a waste of your time to continue to look at the browser because the problem will have been created beyond that, either in your proxy translating that request or on the remote server. You have to find that error.

    Here's what I'd do... Implement brute-force logging in your Node app. You can use Bunyan, or Winston or just require(fs) and write out to some file when an error occurs. Then look at the results. Only log it out when the response code from the other server is in the 400 or 500 ranges. Log the request object and the response object.

    Something like this with Bunyan:

    fetch(urlToRemoteServer)
.then(res => res.json()) 
.then(res => whateverElseYoureDoing(res))
.catch(err => {
  // Get the request & response to the remote server
  log.info({request: req, response: res, err: err});
});

    where the res in this case is the response we just got from the other domain and req is our request to them.

    The logs on your Azure server will then have the entire request and response. From this you can find commonalities. and (🤞) the cause of the problem.