Merge pull request #550 from cloudflare/jspspike/response-print

Add logging for requests to miniflare

Author: jspspike

packages/tre/src/index.ts

@@ -67,11 +67,13 @@ import {
   Clock,
   HttpError,
   Log,
+  LogLevel,
   MiniflareCoreError,
   Mutex,
   NoOpLog,
   OptionalZodTypeOf,
   defaultClock,
+  formatResponse,
 } from "./shared";
 import { anyAbortSignal } from "./shared/signal";
 import { waitForRequest } from "./wait";
@@ -510,6 +512,13 @@ export class Miniflare {
           this.#workerSrcOpts,
           request
         );
+      } else if (url.pathname === "/core/log") {
+        if (this.#log.level < LogLevel.INFO) {
+          return;
+        }
+
+        const response = await formatResponse(request);
+        this.#log.log(response);
       } else {
         // TODO: check for proxying/outbound fetch header first (with plans for fetch mocking)
         response = await this.#handleLoopbackPlugins(request, url);

packages/tre/src/plugins/core/index.ts

@@ -130,6 +130,7 @@ export const SCRIPT_ENTRY = `
 const matchRoutes = ${matchRoutes.toString()};
 
 async function handleEvent(event) {
+  const startTime = Date.now();
   const probe = event.request.headers.get("${HEADER_PROBE}");
   if (probe !== null) {
     const probeMin = parseInt(probe);
@@ -178,6 +179,18 @@ async function handleEvent(event) {
       }
     }
 
+    event.waitUntil(${BINDING_SERVICE_LOOPBACK}.fetch("http://localhost/core/log", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          "status": response.status,
+          "statusText": response.statusText,
+          "method": event.request.method,
+          "url": response.url,
+          "time": Date.now() - startTime,
+        }),
+    }));
+
     const liveReloadScript = globalThis.${BINDING_DATA_LIVE_RELOAD_SCRIPT};
     if (
       liveReloadScript !== undefined &&

packages/tre/src/shared/log.ts

@@ -1,5 +1,17 @@
 import path from "path";
-import { Colorize, dim, green, grey, red, reset, yellow } from "kleur/colors";
+import {
+  Colorize,
+  blue,
+  bold,
+  dim,
+  green,
+  grey,
+  red,
+  reset,
+  yellow,
+} from "kleur/colors";
+import { z } from "zod";
+import { Request } from "../http";
 
 const cwd = process.cwd();
 const cwdNodeModules = path.join(cwd, "node_modules");
@@ -121,3 +133,39 @@ export class NoOpLog extends Log {
     throw message;
   }
 }
+
+export interface ResponseInfo {
+  status: number;
+  statusText: string;
+  method: string;
+  url: string;
+  time: number;
+}
+
+const ResponseInfoSchema = z.object({
+  status: z.number(),
+  statusText: z.string(),
+  method: z.string(),
+  url: z.string(),
+  time: z.number(),
+});
+
+export async function formatResponse(request: Request) {
+  const info = ResponseInfoSchema.parse(await request.json());
+  const url = new URL(info.url);
+
+  return [
+    `${bold(info.method)} ${url.pathname} `,
+    colourFromHTTPStatus(info.status)(
+      `${bold(info.status)} ${info.statusText} `
+    ),
+    grey(`(${info.time}ms)`),
+  ].join("");
+}
+
+function colourFromHTTPStatus(status: number): Colorize {
+  if (200 <= status && status < 300) return green;
+  if (400 <= status && status < 500) return yellow;
+  if (500 <= status) return red;
+  return blue;
+}