fix(vite-plugin-cloudflare): request cancellation support (#10707)

edmundhung · zshannon · web-flow · commit 092c999d57ac · 2025-10-15T21:18:01.000+01:00
* forward request.signal

* add test

* longer timeout time for windows

* skip request cancellation tests on windows

* fix request handler setup

---------

Co-authored-by: Zane Shannon &lt;z@zcs.me&gt;
diff --git a/.changeset/cruel-shirts-eat.md b/.changeset/cruel-shirts-eat.md
@@ -0,0 +1,7 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+Add request cancellation support
+
+Workers running on Vite can now listen to the abort event with `request.signal` to perform tasks when the request is canceled by the client. For more information, see the [Request](https://developers.cloudflare.com/workers/runtime-apis/request) documentation.
diff --git a/packages/vite-plugin-cloudflare/e2e/basic.test.ts b/packages/vite-plugin-cloudflare/e2e/basic.test.ts
@@ -1,5 +1,5 @@
 import { rm, writeFile } from "node:fs/promises";
-import { describe, test } from "vitest";
+import { describe, test, vi } from "vitest";
 import {
 	fetchJson,
 	isBuildAndPreviewOnWindows,
@@ -27,6 +27,35 @@ describe("basic e2e tests", () => {
 				}
 			);
 
+			// Aborting requests doesn't trigger the abort event listener on Windows at the moment
+			// See https://github.com/cloudflare/workerd/pull/5062
+			test.skipIf(process.platform === "win32")(
+				"can listen to abort signals on the request",
+				async ({ expect }) => {
+					const proc = await runLongLived(pm, command, projectPath);
+					const url = await waitForReady(proc);
+
+					// Check that no request has been aborted yet
+					const response = await fetch(url + "/aborted");
+					await expect(response.text()).resolves.toEqual("Request not aborted");
+
+					// Send a request that we will abort after 1 second
+					await Promise.allSettled([
+						fetch(url + "/wait", {
+							signal: AbortSignal.timeout(1000),
+						}),
+					]);
+
+					await vi.waitFor(
+						async () => {
+							const response = await fetch(url + "/aborted");
+							await expect(response.text()).resolves.toEqual("Request aborted");
+						},
+						{ timeout: 10000 }
+					);
+				}
+			);
+
 			describe.skipIf(isBuildAndPreviewOnWindows(command))(
 				"environment variables",
 				() => {
diff --git a/packages/vite-plugin-cloudflare/e2e/fixtures/basic/api/index.ts b/packages/vite-plugin-cloudflare/e2e/fixtures/basic/api/index.ts
@@ -7,8 +7,10 @@ interface Env {
 	AI: Ai;
 }
 
+let requestAborted = false;
+
 export default {
-	async fetch(request, env) {
+	async fetch(request, env, ctx) {
 		const url = new URL(request.url);
 
 		if (url.pathname.startsWith("/api/")) {
@@ -21,6 +23,35 @@ export default {
 			return Response.json(env);
 		}
 
+		if (url.pathname === "/wait") {
+			request.signal.addEventListener("abort", () => {
+				requestAborted = true;
+			});
+
+			async function sendPing(writable: WritableStream) {
+				const writer = writable.getWriter();
+				const enc = new TextEncoder();
+
+				for (let i = 0; i < 6; i++) {
+					// Send 'ping' every 500ms to keep the connection alive for 3 seconds
+					await writer.write(enc.encode("ping\r\n"));
+					await scheduler.wait(500);
+				}
+			}
+
+			const { readable, writable } = new IdentityTransformStream();
+			ctx.waitUntil(sendPing(writable));
+			return new Response(readable, {
+				headers: { "Content-Type": "text/plain" },
+			});
+		}
+
+		if (url.pathname === "/aborted") {
+			return new Response(
+				requestAborted ? "Request aborted" : "Request not aborted"
+			);
+		}
+
 		return env.ASSETS.fetch(request);
 	},
 } satisfies ExportedHandler<Env>;
diff --git a/packages/vite-plugin-cloudflare/e2e/fixtures/basic/wrangler.jsonc b/packages/vite-plugin-cloudflare/e2e/fixtures/basic/wrangler.jsonc
@@ -1,7 +1,7 @@
 {
 	"name": "cloudflare-vite-e2e-basic",
 	"compatibility_date": "2024-12-30",
-	"compatibility_flags": ["nodejs_compat"],
+	"compatibility_flags": ["nodejs_compat", "enable_request_signal"],
 	"assets": {
 		"not_found_handling": "single-page-application",
 		"binding": "ASSETS",
diff --git a/packages/vite-plugin-cloudflare/src/utils.ts b/packages/vite-plugin-cloudflare/src/utils.ts
@@ -45,14 +45,17 @@ export function createRequestHandler(
 	next: vite.Connect.NextFunction
 ) => Promise<void> {
 	return async (req, res, next) => {
+		let request: Request | undefined;
+
 		try {
 			// Built in vite middleware trims out the base path when passing in the request
 			// We can restore it by using the `originalUrl` property
 			// This makes sure the worker receives the correct url in both dev using vite and production
 			if (req.originalUrl) {
 				req.url = req.originalUrl;
 			}
-			const request = createRequest(req, res);
+			request = createRequest(req, res);
+
 			let response = await handler(toMiniflareRequest(request), req);
 
 			// Vite uses HTTP/2 when `server.https` or `preview.https` is enabled
@@ -64,6 +67,11 @@ export function createRequestHandler(
 
 			await sendResponse(res, response as unknown as Response);
 		} catch (error) {
+			if (request?.signal.aborted) {
+				// If the request was aborted, ignore the error
+				return;
+			}
+
 			next(error);
 		}
 	};
@@ -90,5 +98,6 @@ function toMiniflareRequest(request: Request): MiniflareRequest {
 		headers: [["accept-encoding", "identity"], ...request.headers],
 		body: request.body,
 		duplex: "half",
+		signal: request.signal,
 	});
 }
