How to enable and view create-react-app proxy logs?

Question

How can I view detailed logs of all requests and responses being handled by the proxy used by create-react-app?

I don't only want to log some endpoints. Instead, I want to see everything, in as much detail as possible, about what's going through the proxy.

The reason is that I'm getting 403 errors back from the AWS API Gateway server but I'm having trouble reproducing the problem via browser, curl, etc. So I want to get ahold of the actual headers and content going over the wire, to see if my problem might be proxy-related.

Adminicle

Answer 1

This is what worked for me. I added the two properties logger and logLevel. Amazingly, logLevel is not listed in the documentation anywhere and it seems to have a very high default level.

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: process.env.REACT_APP_API,
            changeOrigin: true,
            logger: console,
            logLevel: 'debug',
        }),
    )
}

I have no idea why but any event handlers I pass seem to be ignored and I can't see any console logs from them. After adding these I can see a log line in the console for every request.

Zeiler

Answer 2

In Create-react-app you can use a custom proxy which is an instance of http-proxy-middleware.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

So you can implement your own LogProvider and Errors events

Insurance