Add log message when 'sec-fetch-mode: navigate' is responsible for assets routing decision in 'wrangler dev' (#8887)

Author: GregBrimble

.changeset/cute-carpets-sneeze.md

@@ -0,0 +1,6 @@
+---
+"@cloudflare/workers-shared": minor
+"miniflare": minor
+---
+
+Add log message when `Sec-Fetch-Mode: navigate` is responsible for assets routing decision in `wrangler dev`

fixtures/workers-with-assets-spa/tests/index.test.ts

@@ -1,18 +1,22 @@
 import { resolve } from "node:path";
+import { setTimeout } from "timers/promises";
 import { toMatchImageSnapshot } from "jest-image-snapshot";
 import { Browser, chromium } from "playwright-chromium";
 import { afterAll, beforeAll, describe, it } from "vitest";
 import { runWranglerDev } from "../../shared/src/run-wrangler-long-lived";
 
 describe("Workers + Assets + SPA", () => {
-	let ip: string, port: number, stop: (() => Promise<unknown>) | undefined;
+	let ip: string,
+		port: number,
+		stop: (() => Promise<unknown>) | undefined,
+		getOutput: () => string;
 	let browser: Browser | undefined;
 
 	beforeAll(async () => {
-		({ ip, port, stop } = await runWranglerDev(resolve(__dirname, ".."), [
-			"--port=0",
-			"--inspector-port=0",
-		]));
+		({ ip, port, stop, getOutput } = await runWranglerDev(
+			resolve(__dirname, ".."),
+			["--port=0", "--inspector-port=0"]
+		));
 
 		browser = await chromium.launch({
 			headless: !process.env.VITE_DEBUG_SERVE,
@@ -176,6 +180,12 @@ describe("Workers + Assets + SPA", () => {
 		const blogTitleLocator = page.getByRole("heading", { name: "Blog" });
 		await blogTitleLocator.waitFor({ state: "attached" });
 
+		expect(
+			getOutput().match(
+				/GET \/blog 200 OK \(.*\) `Sec-Fetch-Mode: navigate` header present - using `not_found_handling` behavior/
+			)
+		).toBeTruthy();
+
 		const blogSlugInput = page.getByRole("textbox");
 		blogSlugInput.fill("/blog/some-slug-here");
 

packages/miniflare/src/plugins/assets/index.ts

@@ -141,6 +141,7 @@ export const ASSETS_PLUGIN: Plugin<typeof AssetsOptionsSchema> = {
 			...options.assets.assetConfig,
 			redirects: parsedRedirects,
 			headers: parsedHeaders,
+			debug: true,
 		};
 
 		const id = options.assets.workerName;

packages/miniflare/src/workers/core/entry.worker.ts

@@ -300,14 +300,22 @@ function colourFromHTTPStatus(status: number): Colorize {
 	return blue;
 }
 
+const ADDITIONAL_RESPONSE_LOG_HEADER_NAME = "X-Mf-Additional-Response-Log";
+
 function maybeLogRequest(
 	req: Request,
 	res: Response,
 	env: Env,
 	ctx: ExecutionContext,
 	startTime: number
-) {
-	if (env[CoreBindings.JSON_LOG_LEVEL] < LogLevel.INFO) return;
+): Response {
+	res = new Response(res.body, res); // Ensure mutable headers
+	const additionalResponseLog = res.headers.get(
+		ADDITIONAL_RESPONSE_LOG_HEADER_NAME
+	);
+	res.headers.delete(ADDITIONAL_RESPONSE_LOG_HEADER_NAME);
+
+	if (env[CoreBindings.JSON_LOG_LEVEL] < LogLevel.INFO) return res;
 
 	const url = new URL(req.url);
 	const statusText = (res.statusText.trim() || STATUS_CODES[res.status]) ?? "";
@@ -316,6 +324,9 @@ function maybeLogRequest(
 		colourFromHTTPStatus(res.status)(`${bold(res.status)} ${statusText} `),
 		grey(`(${Date.now() - startTime}ms)`),
 	];
+	if (additionalResponseLog) {
+		lines.push(` ${grey(additionalResponseLog)}`);
+	}
 	const message = reset(lines.join(""));
 
 	ctx.waitUntil(
@@ -325,6 +336,8 @@ function maybeLogRequest(
 			body: message,
 		})
 	);
+
+	return res;
 }
 
 function handleProxy(request: Request, env: Env) {
@@ -423,7 +436,7 @@ export default <ExportedHandler<Env>>{
 			response = maybeInjectLiveReload(response, env, ctx);
 			response = ensureAcceptableEncoding(clientAcceptEncoding, response);
 			if (env[CoreBindings.LOG_REQUESTS]) {
-				maybeLogRequest(request, response, env, ctx, startTime);
+				response = maybeLogRequest(request, response, env, ctx, startTime);
 			}
 			return response;
 		} catch (e: any) {

packages/workers-shared/asset-worker/src/configuration.ts

@@ -22,5 +22,6 @@ export const normalizeConfiguration = (
 		},
 		account_id: configuration?.account_id ?? -1,
 		script_id: configuration?.script_id ?? -1,
+		debug: configuration?.debug ?? false,
 	};
 };