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 { createLoggerMiddleware } from "remix-utils/middleware/logger";

export const [loggerMiddleware] = createLoggerMiddleware();
Copy

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

import { loggerMiddleware } from "~/middleware/logger.server";
export const middleware: Route.MiddlewareFunction[] = [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 createLoggerMiddleware function.

let [loggerMiddleware] = 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.