@remix-run/logger-middleware 0.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2025 Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,98 @@
+# logger-middleware
+
+Middleware for logging HTTP requests and responses for use with [`@remix-run/fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router).
+
+Logs information about HTTP requests and responses with customizable formatting.
+
+## Installation
+
+```sh
+npm install @remix-run/logger-middleware
+```
+
+## Usage
+
+```ts
+import { createRouter } from '@remix-run/fetch-router'
+import { logger } from '@remix-run/logger-middleware'
+
+let router = createRouter({
+  middleware: [logger()],
+})
+
+// Logs: [19/Nov/2025:14:32:10 -0800] GET /users/123 200 1234
+```
+
+### Custom Format
+
+You can use the `format` option to customize the log format. The following tokens are available:
+
+- `%date` - Date and time in Apache/nginx format (dd/Mon/yyyy:HH:mm:ss ±zzzz)
+- `%dateISO` - Date and time in ISO format
+- `%duration` - Request duration in milliseconds
+- `%contentLength` - Response Content-Length header
+- `%contentType` - Response Content-Type header
+- `%host` - Request URL host
+- `%hostname` - Request URL hostname
+- `%method` - Request method
+- `%path` - Request pathname + search
+- `%pathname` - Request pathname
+- `%port` - Request port
+- `%query` - Request query string (search)
+- `%referer` - Request Referer header
+- `%search` - Request search string
+- `%status` - Response status code
+- `%statusText` - Response status text
+- `%url` - Full request URL
+- `%userAgent` - Request User-Agent header
+
+```ts
+let router = createRouter({
+  middleware: [
+    logger({
+      format: '%method %path - %status (%duration ms)',
+    }),
+  ],
+})
+// Logs: GET /users/123 - 200 (42 ms)
+```
+
+For Apache-style combined log format, you can use the following format:
+
+```ts
+let router = createRouter({
+  middleware: [
+    logger({
+      format: '%host - - [%date] "%method %path" %status %contentLength "%referer" "%userAgent"',
+    }),
+  ],
+})
+```
+
+### Custom Logger
+
+You can use a custom logger to write logs to a file or other stream.
+
+```ts
+import { createWriteStream } from 'node:fs'
+
+let logStream = createWriteStream('access.log', { flags: 'a' })
+
+let router = createRouter({
+  middleware: [
+    logger({
+      log(message) {
+        logStream.write(message + '\n')
+      },
+    }),
+  ],
+})
+```
+
+## Related Packages
+
+- [`fetch-router`](https://github.com/remix-run/remix/tree/main/packages/fetch-router) - Router for the web Fetch API
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { type LoggerOptions, logger } from './lib/logger.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1 @@
+export { logger } from "./lib/logger.js";

package/dist/lib/logger.d.ts

@@ -0,0 +1,37 @@
+import type { Middleware } from '@remix-run/fetch-router';
+export interface LoggerOptions {
+    /**
+     * The format to use for log messages. Defaults to `[%date] %method %path %status %contentLength`.
+     *
+     * The following tokens are available:
+     *
+     * - `%date` - The date and time of the request in Apache/nginx log format (dd/Mon/yyyy:HH:mm:ss ±zzzz).
+     * - `%dateISO` - The date and time of the request in ISO format.
+     * - `%duration` - The duration of the request in milliseconds.
+     * - `%contentLength` - The `Content-Length` header of the response.
+     * - `%contentType` - The `Content-Type` header of the response.
+     * - `%host` - The host of the request URL.
+     * - `%hostname` - The hostname of the request URL.
+     * - `%method` - The method of the request.
+     * - `%path` - The pathname + search of the request URL.
+     * - `%pathname` - The pathname of the request URL.
+     * - `%port` - The port of the request.
+     * - `%query` - The query (search) string of the request URL.
+     * - `%referer` - The `Referer` header of the request.
+     * - `%search` - The search string of the request URL.
+     * - `%status` - The status code of the response.
+     * - `%statusText` - The status text of the response.
+     * - `%url` - The full URL of the request.
+     * - `%userAgent` - The `User-Agent` header of the request.
+     */
+    format?: string;
+    /**
+     * The function to use to log messages. Defaults to `console.log`.
+     */
+    log?: (message: string) => void;
+}
+/**
+ * Creates a middleware handler that logs various request/response info.
+ */
+export declare function logger(options?: LoggerOptions): Middleware;
+//# sourceMappingURL=logger.d.ts.map

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

@@ -0,0 +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,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAChC;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,OAAO,GAAE,aAAkB,GAAG,UAAU,CAoC9D"}

package/dist/lib/logger.js

@@ -0,0 +1,55 @@
+/**
+ * Creates a middleware handler that logs various request/response info.
+ */
+export function logger(options = {}) {
+    let { format = '[%date] %method %path %status %contentLength', log = console.log } = options;
+    return async ({ request, url }, next) => {
+        let start = new Date();
+        let response = await next();
+        let end = new Date();
+        let tokens = {
+            date: () => formatApacheDate(start),
+            dateISO: () => start.toISOString(),
+            duration: () => String(end.getTime() - start.getTime()),
+            contentLength: () => response.headers.get('Content-Length') ?? '-',
+            contentType: () => response.headers.get('Content-Type') ?? '-',
+            host: () => url.host,
+            hostname: () => url.hostname,
+            method: () => request.method,
+            path: () => url.pathname + url.search,
+            pathname: () => url.pathname,
+            port: () => url.port,
+            protocol: () => url.protocol,
+            query: () => url.search,
+            referer: () => request.headers.get('Referer') ?? '-',
+            search: () => url.search,
+            status: () => String(response.status),
+            statusText: () => response.statusText,
+            url: () => url.href,
+            userAgent: () => request.headers.get('User-Agent') ?? '-',
+        };
+        let message = format.replace(/%(\w+)/g, (_, key) => tokens[key]?.() ?? '-');
+        log(message);
+        return response;
+    };
+}
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/**
+ * Formats a date in Apache/nginx log format: "dd/Mon/yyyy:HH:mm:ss ±zzzz"
+ * Example: "23/Sep/2025:11:34:12 -0700"
+ */
+function formatApacheDate(date) {
+    let day = String(date.getDate()).padStart(2, '0');
+    let month = months[date.getMonth()];
+    let year = date.getFullYear();
+    let hours = String(date.getHours()).padStart(2, '0');
+    let minutes = String(date.getMinutes()).padStart(2, '0');
+    let seconds = String(date.getSeconds()).padStart(2, '0');
+    // Get timezone offset in minutes and convert to ±HHMM format
+    let timezoneOffset = date.getTimezoneOffset();
+    let sign = timezoneOffset <= 0 ? '+' : '-';
+    let offsetHours = String(Math.floor(Math.abs(timezoneOffset) / 60)).padStart(2, '0');
+    let offsetMinutes = String(Math.abs(timezoneOffset) % 60).padStart(2, '0');
+    let timezone = `${sign}${offsetHours}${offsetMinutes}`;
+    return `${day}/${month}/${year}:${hours}:${minutes}:${seconds} ${timezone}`;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@remix-run/logger-middleware",
+  "version": "0.0.0",
+  "description": "Middleware for logging HTTP requests and responses",
+  "author": "Michael Jackson <mjijackson@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/remix-run/remix.git",
+    "directory": "packages/logger-middleware"
+  },
+  "homepage": "https://github.com/remix-run/remix/tree/main/packages/logger-middleware#readme",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src",
+    "!src/**/*.test.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "typescript": "^5.9.3",
+    "@remix-run/fetch-router": "0.9.0"
+  },
+  "peerDependencies": {
+    "@remix-run/fetch-router": "^0.9.0"
+  },
+  "keywords": [
+    "fetch",
+    "router",
+    "middleware",
+    "logger",
+    "logging",
+    "http-logger"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "git clean -fdX",
+    "test": "node --disable-warning=ExperimentalWarning --test './src/**/*.test.ts'",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { type LoggerOptions, logger } from './lib/logger.ts'
+

package/src/lib/logger.ts

@@ -0,0 +1,98 @@
+import type { Middleware } from '@remix-run/fetch-router'
+
+export interface LoggerOptions {
+  /**
+   * The format to use for log messages. Defaults to `[%date] %method %path %status %contentLength`.
+   *
+   * The following tokens are available:
+   *
+   * - `%date` - The date and time of the request in Apache/nginx log format (dd/Mon/yyyy:HH:mm:ss ±zzzz).
+   * - `%dateISO` - The date and time of the request in ISO format.
+   * - `%duration` - The duration of the request in milliseconds.
+   * - `%contentLength` - The `Content-Length` header of the response.
+   * - `%contentType` - The `Content-Type` header of the response.
+   * - `%host` - The host of the request URL.
+   * - `%hostname` - The hostname of the request URL.
+   * - `%method` - The method of the request.
+   * - `%path` - The pathname + search of the request URL.
+   * - `%pathname` - The pathname of the request URL.
+   * - `%port` - The port of the request.
+   * - `%query` - The query (search) string of the request URL.
+   * - `%referer` - The `Referer` header of the request.
+   * - `%search` - The search string of the request URL.
+   * - `%status` - The status code of the response.
+   * - `%statusText` - The status text of the response.
+   * - `%url` - The full URL of the request.
+   * - `%userAgent` - The `User-Agent` header of the request.
+   */
+  format?: string
+  /**
+   * The function to use to log messages. Defaults to `console.log`.
+   */
+  log?: (message: string) => void
+}
+
+/**
+ * Creates a middleware handler that logs various request/response info.
+ */
+export function logger(options: LoggerOptions = {}): Middleware {
+  let { format = '[%date] %method %path %status %contentLength', log = console.log } = options
+
+  return async ({ request, url }, next) => {
+    let start = new Date()
+    let response = await next()
+    let end = new Date()
+
+    let tokens: Record<string, () => string> = {
+      date: () => formatApacheDate(start),
+      dateISO: () => start.toISOString(),
+      duration: () => String(end.getTime() - start.getTime()),
+      contentLength: () => response.headers.get('Content-Length') ?? '-',
+      contentType: () => response.headers.get('Content-Type') ?? '-',
+      host: () => url.host,
+      hostname: () => url.hostname,
+      method: () => request.method,
+      path: () => url.pathname + url.search,
+      pathname: () => url.pathname,
+      port: () => url.port,
+      protocol: () => url.protocol,
+      query: () => url.search,
+      referer: () => request.headers.get('Referer') ?? '-',
+      search: () => url.search,
+      status: () => String(response.status),
+      statusText: () => response.statusText,
+      url: () => url.href,
+      userAgent: () => request.headers.get('User-Agent') ?? '-',
+    }
+
+    let message = format.replace(/%(\w+)/g, (_, key) => tokens[key]?.() ?? '-')
+
+    log(message)
+
+    return response
+  }
+}
+
+const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+/**
+ * Formats a date in Apache/nginx log format: "dd/Mon/yyyy:HH:mm:ss ±zzzz"
+ * Example: "23/Sep/2025:11:34:12 -0700"
+ */
+function formatApacheDate(date: Date): string {
+  let day = String(date.getDate()).padStart(2, '0')
+  let month = months[date.getMonth()]
+  let year = date.getFullYear()
+  let hours = String(date.getHours()).padStart(2, '0')
+  let minutes = String(date.getMinutes()).padStart(2, '0')
+  let seconds = String(date.getSeconds()).padStart(2, '0')
+
+  // Get timezone offset in minutes and convert to ±HHMM format
+  let timezoneOffset = date.getTimezoneOffset()
+  let sign = timezoneOffset <= 0 ? '+' : '-'
+  let offsetHours = String(Math.floor(Math.abs(timezoneOffset) / 60)).padStart(2, '0')
+  let offsetMinutes = String(Math.abs(timezoneOffset) % 60).padStart(2, '0')
+  let timezone = `${sign}${offsetHours}${offsetMinutes}`
+
+  return `${day}/${month}/${year}:${hours}:${minutes}:${seconds} ${timezone}`
+}