Module Middleware/Logger

The logger middleware let's you log the request and response information to the console, this can be useful to debug issues with the request and response.

import { unstable_createLoggerMiddleware } from "remix-utils/middleware/logger";

export const [loggerMiddleware] = unstable_createLoggerMiddleware();
Copy

To use it, you need to add it to the unstable_middleware array in your app/root.tsx file.

import { loggerMiddleware } from "~/middleware/logger.server";
export const unstable_middleware = [loggerMiddleware];
Copy

Now, every request and response will be logged to the console.

The logger middleware can be customized by passing an options object to the unstable_createLoggerMiddleware function.

let [loggerMiddleware] = unstable_createLoggerMiddleware({
  logger: console,
  precision: 2,
  formatMessage(request, response, time) {
    return `${request.method} ${request.url} - ${response.status} - ${time}ms`;
  },
});
Copy

The logger option let's you pass a custom logger, the precision option let's you set the number of decimal places to use in the response time, and the formatMessage option let's you customize the message that will be logged.