Add Fine-Grained Control Over Morgan Logging in React Router Serve

[mrTooT]

Use Case
In our application, we use React Router Serve to handle server-side rendering for our React application. One of our requirements is to have a /health route that is polled frequently by monitoring tools to check if the server is up. This route always returns a 200 OK response when the server is healthy.

The problem arises because the frequent polling of the /health route floods our logging system (e.g., Splunk) with unnecessary logs, making it harder to identify meaningful logs. We want to suppress logging for this specific route when it returns a 200 status code, while still logging other status codes (e.g., 500) for the same route. For all other routes, the logging behavior should remain unchanged.

Current Limitation
React Router Serve uses morgan for logging, as seen in the CLI implementation:

app.use(morgan('tiny'));

However, there is no way to customize the morgan logging behavior based on the URL or status code. While React Router provides an unstable middleware API, it only allows us to modify the request or response, not the behavior of morgan. For example, we tried the following middleware to handle /health:

const serverLogger: Route.unstable_MiddlewareFunction = async (_, next) => {
  const res = await next();
  const isHealthzPage =
    res?.url?.endsWith('healthz') || res?.url?.endsWith('healthz/');

  if (isHealthzPage && res.status === 200) {
    return new Response(null, {
      status: 418,
      statusText: 'Healthz does not need to be logged when status is 200',
    });
  }
  return res;
};

export const unstable_middleware = [serverLogger];

While this middleware allows us to modify the response, it does not provide a way to suppress morgan logging for specific routes or status codes.

Proposed Solution
We propose adding a way to control morgan logging behavior in React Router Serve. Specifically, we would like to:

1. Customize Logging Per Route: Allow developers to specify logging behavior for specific routes (e.g., suppress logging for /health when the status code is 200).
2. Customize Logging Per Status Code: Allow developers to suppress or modify logging based on the response status code.

Example Implementation
One way to achieve this is to expose a hook or configuration option in React Router Serve that allows developers to customize the morgan logging behavior. For example:

Alternatively, React Router Serve could expose a configuration option for logging:

serve({
  logOptions: {
    skip: (req, res) => {
      const isHealthzPage =
        req.url === '/healthz' || req.url === '/healthz/';
      return isHealthzPage && res.statusCode === 200;
    },
  },
});

This would allow developers to fully control the logging behavior without needing to fork or override the default implementation of React Router Serve.

Conclusion
Adding fine-grained control over morgan logging in React Router Serve would greatly enhance its flexibility and usability in production environments. We believe this feature would benefit many developers who use React Router Serve for server-side rendering and face similar challenges with logging.

We would be happy to contribute to this feature or assist in its implementation. Let us know your thoughts!

[brophdawg11]

We do not intend to open up ways to customize the behavior of the internal react-router-serve express server.

Per the docs:

By design, we do not provide options to customize the React Router App Server because if you need to customize the underlying express server, we'd rather you manage the server completely instead of creating an abstraction to handle all the possible customizations you may require. If you find you want to customize it, you can migrate to the @react-router/express adapter.