@remix-run/logger-middleware 0.1.5 → 0.2.1

package/README.md

@@ -7,6 +7,7 @@ HTTP request/response logging middleware for Remix. It logs request metadata and
 - **Request/Response Logging** - Logs method, path, status, and response metadata
 - **Token-Based Formatting** - Customize log output with built-in placeholders
 - **Structured Timing Data** - Includes request duration and timestamps
+- **Colorized Output** - Highlights method, status, duration, and content length in TTY output
 
 ## Installation
 
@@ -73,6 +74,27 @@ let router = createRouter({
 })
 ```
 
+### Colorized Output
+
+Logger output automatically uses ANSI colors for high-signal tokens when terminal color detection allows them. Set `colors` to `false` to disable colorized output or `true` to force it on. When the `process` global is defined, color detection respects `CI`, `NO_COLOR`, `FORCE_COLOR`, `TERM=dumb`, and TTY output streams.
+
+```ts
+let router = createRouter({
+  middleware: [
+    logger({
+      colors: false,
+    }),
+  ],
+})
+```
+
+The following tokens are colorized when colors are enabled:
+
+- `%method`
+- `%status`
+- `%duration`
+- `%contentLength`
+
 ### Custom Logger
 
 You can use a custom logger to write logs to a file or other stream.

package/dist/lib/logger.d.ts

@@ -36,6 +36,23 @@ export interface LoggerOptions {
      * @default console.log
      */
     log?: (message: string) => void;
+    /**
+     * Enables ANSI colors for high-signal log tokens.
+     *
+     * By default, colors are enabled when terminal color detection allows them. Set this to `false`
+     * to opt out or `true` to force colors on. When the `process` global is defined, color
+     * detection respects `CI`, `NO_COLOR`, `FORCE_COLOR`, `TERM=dumb`, and TTY output streams.
+     *
+     * The following tokens are colorized when colors are enabled:
+     *
+     * - `%method`
+     * - `%status`
+     * - `%duration`
+     * - `%contentLength`
+     *
+     * @default undefined
+     */
+    colors?: boolean;
 }
 /**
  * Creates a middleware handler that logs various request/response info.

package/dist/lib/logger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/lib/logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEzD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,OAAO,GAAE,aAAkB,GAAG,UAAU,CAoC9D"}
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/lib/logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAIzD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,OAAO,GAAE,aAAkB,GAAG,UAAU,CA4C9D"}

package/dist/lib/logger.js

@@ -1,3 +1,4 @@
+import { createStyles } from '@remix-run/terminal';
 /**
  * Creates a middleware handler that logs various request/response info.
  *
@@ -5,20 +6,24 @@
  * @returns The logger middleware
  */
 export function logger(options = {}) {
-    let { format = '[%date] %method %path %status %contentLength', log = console.log } = options;
+    let { colors, format = '[%date] %method %path %status %contentLength', log = console.log, } = options;
+    let colorizer = getColorizer(colors);
     return async ({ request, url }, next) => {
         let start = new Date();
         let response = await next();
         let end = new Date();
+        let duration = end.getTime() - start.getTime();
+        let contentLength = response.headers.get('Content-Length');
+        let contentLengthValue = parseContentLength(contentLength);
         let tokens = {
             date: () => formatApacheDate(start),
             dateISO: () => start.toISOString(),
-            duration: () => String(end.getTime() - start.getTime()),
-            contentLength: () => response.headers.get('Content-Length') ?? '-',
+            duration: () => colorizer.duration(duration),
+            contentLength: () => colorizer.contentLength(contentLength ?? '-', contentLengthValue),
             contentType: () => response.headers.get('Content-Type') ?? '-',
             host: () => url.host,
             hostname: () => url.hostname,
-            method: () => request.method,
+            method: () => colorizer.method(request.method),
             path: () => url.pathname + url.search,
             pathname: () => url.pathname,
             port: () => url.port,
@@ -26,7 +31,7 @@ export function logger(options = {}) {
             query: () => url.search,
             referer: () => request.headers.get('Referer') ?? '-',
             search: () => url.search,
-            status: () => String(response.status),
+            status: () => colorizer.status(response.status),
             statusText: () => response.statusText,
             url: () => url.href,
             userAgent: () => request.headers.get('User-Agent') ?? '-',
@@ -37,6 +42,74 @@ export function logger(options = {}) {
     };
 }
 const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+function getColorizer(option) {
+    let styles = createStyles({ colors: option });
+    return {
+        contentLength(value, bytes) {
+            if (!styles.enabled || bytes === undefined)
+                return value;
+            if (bytes >= 1024 * 1024)
+                return styles.red(value);
+            if (bytes >= 100 * 1024)
+                return styles.yellow(value);
+            if (bytes >= 1024)
+                return styles.cyan(value);
+            return value;
+        },
+        duration(ms) {
+            let value = String(ms);
+            if (!styles.enabled)
+                return value;
+            if (ms >= 1000)
+                return styles.red(value);
+            if (ms >= 500)
+                return styles.magenta(value);
+            if (ms >= 100)
+                return styles.yellow(value);
+            return styles.green(value);
+        },
+        method(method) {
+            if (!styles.enabled)
+                return method;
+            switch (method.toUpperCase()) {
+                case 'GET':
+                case 'HEAD':
+                    return styles.green(method);
+                case 'POST':
+                    return styles.cyan(method);
+                case 'PUT':
+                case 'PATCH':
+                    return styles.yellow(method);
+                case 'DELETE':
+                    return styles.red(method);
+                case 'OPTIONS':
+                    return styles.magenta(method);
+                default:
+                    return method;
+            }
+        },
+        status(status) {
+            let value = String(status);
+            if (!styles.enabled)
+                return value;
+            if (status >= 500)
+                return styles.red(value);
+            if (status >= 400)
+                return styles.yellow(value);
+            if (status >= 300)
+                return styles.cyan(value);
+            if (status >= 200)
+                return styles.green(value);
+            return value;
+        },
+    };
+}
+function parseContentLength(value) {
+    if (value === null)
+        return undefined;
+    let bytes = Number(value);
+    return Number.isSafeInteger(bytes) && bytes >= 0 ? bytes : undefined;
+}
 /**
  * Formats a date in Apache/nginx log format: "dd/Mon/yyyy:HH:mm:ss ±zzzz"
  * Example: "23/Sep/2025:11:34:12 -0700"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/logger-middleware",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Middleware for logging HTTP requests and responses",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -28,12 +28,13 @@
   "devDependencies": {
     "@types/node": "^24.6.0",
     "@typescript/native-preview": "7.0.0-dev.20251125.1",
-    "@remix-run/fetch-router": "0.18.1",
-    "@remix-run/assert": "0.1.0",
-    "@remix-run/test": "0.1.0"
+    "@remix-run/assert": "0.2.0",
+    "@remix-run/fetch-router": "0.18.2",
+    "@remix-run/test": "0.3.0"
   },
   "dependencies": {
-    "@remix-run/fetch-router": "^0.18.1"
+    "@remix-run/fetch-router": "^0.18.2",
+    "@remix-run/terminal": "^0.1.0"
   },
   "keywords": [
     "fetch",
@@ -47,6 +48,7 @@
     "build": "tsgo -p tsconfig.build.json",
     "clean": "git clean -fdX",
     "test": "remix-test",
+    "test:bun": "bun x --bun remix-test",
     "typecheck": "tsgo --noEmit"
   }
 }

package/src/lib/logger.ts

@@ -1,5 +1,7 @@
 import type { Middleware } from '@remix-run/fetch-router'
 
+import { createStyles } from '@remix-run/terminal'
+
 /**
  * Options for the {@link logger} middleware.
  */
@@ -37,6 +39,23 @@ export interface LoggerOptions {
    * @default console.log
    */
   log?: (message: string) => void
+  /**
+   * Enables ANSI colors for high-signal log tokens.
+   *
+   * By default, colors are enabled when terminal color detection allows them. Set this to `false`
+   * to opt out or `true` to force colors on. When the `process` global is defined, color
+   * detection respects `CI`, `NO_COLOR`, `FORCE_COLOR`, `TERM=dumb`, and TTY output streams.
+   *
+   * The following tokens are colorized when colors are enabled:
+   *
+   * - `%method`
+   * - `%status`
+   * - `%duration`
+   * - `%contentLength`
+   *
+   * @default undefined
+   */
+  colors?: boolean
 }
 
 /**
@@ -46,22 +65,30 @@ export interface LoggerOptions {
  * @returns The logger middleware
  */
 export function logger(options: LoggerOptions = {}): Middleware {
-  let { format = '[%date] %method %path %status %contentLength', log = console.log } = options
+  let {
+    colors,
+    format = '[%date] %method %path %status %contentLength',
+    log = console.log,
+  } = options
+  let colorizer = getColorizer(colors)
 
   return async ({ request, url }, next) => {
     let start = new Date()
     let response = await next()
     let end = new Date()
+    let duration = end.getTime() - start.getTime()
+    let contentLength = response.headers.get('Content-Length')
+    let contentLengthValue = parseContentLength(contentLength)
 
     let tokens: Record<string, () => string> = {
       date: () => formatApacheDate(start),
       dateISO: () => start.toISOString(),
-      duration: () => String(end.getTime() - start.getTime()),
-      contentLength: () => response.headers.get('Content-Length') ?? '-',
+      duration: () => colorizer.duration(duration),
+      contentLength: () => colorizer.contentLength(contentLength ?? '-', contentLengthValue),
       contentType: () => response.headers.get('Content-Type') ?? '-',
       host: () => url.host,
       hostname: () => url.hostname,
-      method: () => request.method,
+      method: () => colorizer.method(request.method),
       path: () => url.pathname + url.search,
       pathname: () => url.pathname,
       port: () => url.port,
@@ -69,7 +96,7 @@ export function logger(options: LoggerOptions = {}): Middleware {
       query: () => url.search,
       referer: () => request.headers.get('Referer') ?? '-',
       search: () => url.search,
-      status: () => String(response.status),
+      status: () => colorizer.status(response.status),
       statusText: () => response.statusText,
       url: () => url.href,
       userAgent: () => request.headers.get('User-Agent') ?? '-',
@@ -85,6 +112,71 @@ export function logger(options: LoggerOptions = {}): Middleware {
 
 const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
 
+interface Colorizer {
+  contentLength(value: string, bytes: number | undefined): string
+  duration(ms: number): string
+  method(method: string): string
+  status(status: number): string
+}
+
+function getColorizer(option: boolean | undefined): Colorizer {
+  let styles = createStyles({ colors: option })
+
+  return {
+    contentLength(value, bytes) {
+      if (!styles.enabled || bytes === undefined) return value
+      if (bytes >= 1024 * 1024) return styles.red(value)
+      if (bytes >= 100 * 1024) return styles.yellow(value)
+      if (bytes >= 1024) return styles.cyan(value)
+      return value
+    },
+    duration(ms) {
+      let value = String(ms)
+      if (!styles.enabled) return value
+      if (ms >= 1000) return styles.red(value)
+      if (ms >= 500) return styles.magenta(value)
+      if (ms >= 100) return styles.yellow(value)
+      return styles.green(value)
+    },
+    method(method) {
+      if (!styles.enabled) return method
+
+      switch (method.toUpperCase()) {
+        case 'GET':
+        case 'HEAD':
+          return styles.green(method)
+        case 'POST':
+          return styles.cyan(method)
+        case 'PUT':
+        case 'PATCH':
+          return styles.yellow(method)
+        case 'DELETE':
+          return styles.red(method)
+        case 'OPTIONS':
+          return styles.magenta(method)
+        default:
+          return method
+      }
+    },
+    status(status) {
+      let value = String(status)
+      if (!styles.enabled) return value
+      if (status >= 500) return styles.red(value)
+      if (status >= 400) return styles.yellow(value)
+      if (status >= 300) return styles.cyan(value)
+      if (status >= 200) return styles.green(value)
+      return value
+    },
+  }
+}
+
+function parseContentLength(value: string | null): number | undefined {
+  if (value === null) return undefined
+
+  let bytes = Number(value)
+  return Number.isSafeInteger(bytes) && bytes >= 0 ? bytes : undefined
+}
+
 /**
  * Formats a date in Apache/nginx log format: "dd/Mon/yyyy:HH:mm:ss ±zzzz"
  * Example: "23/Sep/2025:11:34:12 -0700"