Skip to content

logger-middleware Overview

The logger middleware logs information about every HTTP request and response that passes through your server. It records the HTTP method, URL, status code, and response time -- giving you visibility into what your server is doing.

What is Request Logging?

Request logging records details about each HTTP request your server handles. This is essential for:

  • Debugging -- When something goes wrong, logs tell you which requests were made, what responses were returned, and how long things took.
  • Monitoring -- In production, logs help you track traffic patterns, detect errors, and measure performance.
  • Auditing -- Some applications need a record of who accessed what and when.

A typical log line looks like this:

GET /posts 200 12ms

This tells you: a GET request to /posts returned a 200 OK status in 12 milliseconds.

Log Formats

The middleware includes three built-in formats:

'dev' (Default)

A concise, colorized format designed for development. Status codes are color-coded: green for success (2xx), cyan for redirects (3xx), yellow for client errors (4xx), and red for server errors (5xx).

GET /posts 200 12ms
POST /posts 302 45ms
GET /missing 404 3ms

'short'

Same as 'dev' but without colors. Good for log files or environments that do not support ANSI colors.

'combined'

An Apache-style log format used in production. Includes the client IP, timestamp, full request line, content length, referrer, and user agent:

127.0.0.1 - [08/Apr/2026:12:00:00 +0000] "GET /posts HTTP/1.1" 200 1234 "-" "Mozilla/5.0..."

Custom Format

Pass a function to create any format you need:

ts
logger({
  format(info) {
    return JSON.stringify({
      method: info.method,
      url: info.url,
      status: info.status,
      ms: info.responseTime,
    })
  },
})

Quick Example

ts
import { createRouter } from 'remix/fetch-router'
import { logger } from 'remix/logger-middleware'

let router = createRouter({
  middleware: [
    logger(),
  ],
})

Place logger() first in the middleware chain so it captures the total response time including all downstream middleware and handlers.

Next Steps

Released under the MIT License.