React create app proxy agent in package.json is slow on Windows

Question

We have proxy defined in package.json in our react application (created as create-react-app. We use proxy between front-end (webpack) and back-end (express) during development as described here. Here is the part where we define proxy to the backend server ( package.json:

  "scripts": {
    ...
  },
  "proxy": "http://localhost:3001"
}

On the backend side (server runs on port 3001) we call another APIs (but I think it's not important just a note). I have noticed that proxy calls from webpack (create-react-app) to express (backed) are really slow. (Windows OS)

GET http://localhost:3000/endpoint/ -> ~600ms - 900ms
GET http://localhost:3001/endpoint/ -> ~150ms - 250ms

As you can see the time differences between proxy calls (port 3000) and direct calls - port (3001) - are really huge. I expected delay but this looks weird.

Also sometimes large JSON response (~38KB) from proxy is broken (invalid - e.g missing some parts of a response or swapped characters - in 30%+ cases). I have been struggling with the same issue on backend side and I think I have resolved it with proxy-agent where I set keep-alive connection.

Do you have any idea why or how to improve proxy time and behavior?

Also I tried to set agent in package.json but without success. create react app documentation says:

You may also specify any configuration value http-proxy-middleware or http-proxy supports.

And http-proxy documentation says

agent: object to be passed to http(s).request (see Node's https agent and http agent objects)

Is it possible to define agent in package.json?

I tried but I got following error

TypeError: Agent option must be an Agent-like object, undefined, or false. at new ClientRequest (_http_client.js:106:11)

"proxy": {
    "/": {
      "target": "http://localhost:3001",
      "agent": { "keepAlive": true }
    }
  }

Highly appreciate any suggestion or idea.

Answer 1

Adding answer for my question in case somebody has the same issue as we had.

We are forced to use react-app-rewired for custom agent. It's sad that we were not able to set our custom agent for devServer proxy.

If you need to change agent for devServer it's really nice explained in documentation.

// config-overrides.js
module.exports = {
  devServer: function(configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      config.proxy.forEach(p => {
        p.agent = agent;
      });
      return config;
    };
  }
}

I guess it's workaround and potentially not supported in a future releases of create-react-app but response time is around 150ms - 230ms (AND! without invalid JSONs) and it's the thing that counts right now. .

Disturbing note from react-app-rewired I would like to point out:

By doing this you're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support will be provided. Proceed with caution.

I have reported issue so further investigation will be there.