fix(remix-express,remix-vercel): fix request.signal

integration/abort-signal-test.ts

@@ -0,0 +1,61 @@
+import { test, expect } from "@playwright/test";
+
+import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+
+let fixture: Fixture;
+let appFixture: AppFixture;
+
+test.beforeAll(async () => {
+  fixture = await createFixture({
+    files: {
+      "app/routes/index.jsx": js`
+        import { json } from "@remix-run/node";
+        import { useActionData, useLoaderData, Form } from "@remix-run/react";
+
+        export async function action ({ request }) {
+          console.log('action request.signal', request.signal)
+          // New event loop causes express request to close
+          await new Promise(r => setTimeout(r, 0));
+          return json({ aborted: request.signal.aborted });
+        }
+
+        export function loader({ request }) {
+          console.log('loader request.signal', request.signal)
+          return json({ aborted: request.signal.aborted });
+        }
+
+        export default function Index() {
+          let actionData = useActionData();
+          let data = useLoaderData();
+          return (
+            <div>
+              <p className="action">{actionData ? String(actionData.aborted) : "empty"}</p>
+              <p className="loader">{String(data.aborted)}</p>
+              <Form method="post">
+                <button type="submit">Submit</button>
+              </Form>
+            </div>
+          )
+        }
+      `,
+    },
+  });
+
+  // This creates an interactive app using puppeteer.
+  appFixture = await createAppFixture(fixture);
+});
+
+test.afterAll(async () => appFixture.close());
+
+test("should not abort the request in a new event loop", async ({ page }) => {
+  let app = new PlaywrightFixture(appFixture, page);
+  await app.goto("/");
+  expect(await app.getHtml(".action")).toMatch("empty");
+  expect(await app.getHtml(".loader")).toMatch("false");
+
+  await app.clickElement('button[type="submit"]');
+  expect(await app.getHtml(".action")).toMatch("false");
+  expect(await app.getHtml(".loader")).toMatch("false");
+});

packages/remix-express/server.ts

@@ -52,7 +52,7 @@ export function createRequestHandler({
     next: express.NextFunction
   ) => {
     try {
-      let request = createRemixRequest(req);
+      let request = createRemixRequest(req, res);
       let loadContext = getLoadContext?.(req, res);
 
       let response = (await handleRequest(
@@ -89,20 +89,21 @@ export function createRemixHeaders(
   return headers;
 }
 
-export function createRemixRequest(req: express.Request): NodeRequest {
+export function createRemixRequest(
+  req: express.Request,
+  res: express.Response
+): NodeRequest {
   let origin = `${req.protocol}://${req.get("host")}`;
   let url = new URL(req.url, origin);
 
+  // Abort action/loaders once we can no longer write a response
   let controller = new AbortController();
-
-  req.on("close", () => {
-    controller.abort();
-  });
+  res.on("close", () => controller.abort());
 
   let init: NodeRequestInit = {
     method: req.method,
     headers: createRemixHeaders(req.headers),
-    signal: controller.signal,
+    signal: controller.signal as AbortSignal,
   };
 
   if (req.method !== "GET" && req.method !== "HEAD") {

packages/remix-vercel/server.ts

@@ -46,7 +46,7 @@ export function createRequestHandler({
   let handleRequest = createRemixRequestHandler(build, mode);
 
   return async (req, res) => {
-    let request = createRemixRequest(req);
+    let request = createRemixRequest(req, res);
     let loadContext = getLoadContext?.(req, res);
 
     let response = (await handleRequest(request, loadContext)) as NodeResponse;
@@ -75,22 +75,23 @@ export function createRemixHeaders(
   return headers;
 }
 
-export function createRemixRequest(req: VercelRequest): NodeRequest {
+export function createRemixRequest(
+  req: VercelRequest,
+  res: VercelResponse
+): NodeRequest {
   let host = req.headers["x-forwarded-host"] || req.headers["host"];
   // doesn't seem to be available on their req object!
   let protocol = req.headers["x-forwarded-proto"] || "https";
   let url = new URL(req.url!, `${protocol}://${host}`);
 
+  // Abort action/loaders once we can no longer write a response
   let controller = new AbortController();
-
-  req.on("close", () => {
-    controller.abort();
-  });
+  res.on("close", () => controller.abort());
 
   let init: NodeRequestInit = {
     method: req.method,
     headers: createRemixHeaders(req.headers),
-    signal: controller.signal,
+    signal: controller.signal as AbortSignal,
   };
 
   if (req.method !== "GET" && req.method !== "HEAD") {