fix: abort some of the fetches when we unmount the Remote component

cloudflare · Mar 30, 2022 · 1ca3092 · 1ca3092
1 parent ea8e701
commit 1ca3092
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/packages/wrangler/src/create-worker-preview.ts b/packages/wrangler/src/create-worker-preview.ts
@@ -57,7 +57,8 @@ export interface CfPreviewToken {
  */
 async function sessionToken(
   account: CfAccount,
-  ctx: CfWorkerContext
+  ctx: CfWorkerContext,
+  abort: AbortSignal
 ): Promise<CfPreviewToken> {
   const { accountId } = account;
   const initUrl = ctx.zone
@@ -66,7 +67,7 @@ async function sessionToken(
 
   const { exchange_url } = await fetchResult<{ exchange_url: string }>(initUrl);
   const { inspector_websocket, token } = (await (
-    await fetch(exchange_url)
+    await fetch(exchange_url, { signal: abort })
   ).json()) as { inspector_websocket: string; token: string };
   const { host } = new URL(inspector_websocket);
   const query = `cf_workers_preview_token=${token}`;
@@ -96,11 +97,13 @@ function randomId(): string {
 async function createPreviewToken(
   account: CfAccount,
   worker: CfWorkerInit,
-  ctx: CfWorkerContext
+  ctx: CfWorkerContext,
+  abort: AbortSignal
 ): Promise<CfPreviewToken> {
   const { value, host, inspectorUrl, prewarmUrl } = await sessionToken(
     account,
-    ctx
+    ctx,
+    abort
   );
 
   const { accountId } = account;
@@ -155,10 +158,14 @@ async function createPreviewToken(
 export async function createWorkerPreview(
   init: CfWorkerInit,
   account: CfAccount,
-  ctx: CfWorkerContext
+  ctx: CfWorkerContext,
+  abort: AbortSignal
 ): Promise<CfPreviewToken> {
-  const token = await createPreviewToken(account, init, ctx);
-  const response = await fetch(token.prewarmUrl.href, { method: "POST" });
+  const token = await createPreviewToken(account, init, ctx, abort);
+  const response = await fetch(token.prewarmUrl.href, {
+    method: "POST",
+    signal: abort,
+  });
   if (!response.ok) {
     // console.error("worker failed to prewarm: ", response.statusText);
   }

diff --git a/packages/wrangler/src/dev/dev.tsx b/packages/wrangler/src/dev/dev.tsx
@@ -335,6 +335,7 @@ function useHotkeys(
 ) {
   // UGH, we should put port in context instead
   const [toggles, setToggles] = useState(initial);
+  const { exit } = useApp();
   useInput(
     async (
       input,
@@ -365,7 +366,7 @@ function useHotkeys(
         // shut down
         case "q":
         case "x":
-          process.exit(0);
+          exit();
           break;
         default:
           // nothing?

diff --git a/packages/wrangler/src/dev/remote.tsx b/packages/wrangler/src/dev/remote.tsx
@@ -106,6 +106,7 @@ export function useWorker(props: {
   const startedRef = useRef(false);
 
   useEffect(() => {
+    const abortCtrl = new AbortController();
     async function start() {
       setToken(undefined); // reset token in case we're re-running
 
@@ -173,15 +174,22 @@ export function useWorker(props: {
             accountId,
             apiToken,
           },
-          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone }
+          { env: props.env, legacyEnv: props.legacyEnv, zone: props.zone },
+          abortCtrl.signal
         )
       );
     }
     start().catch((err) => {
-      // we want to log the error, but not end the process
-      // since it could recover after the developer fixes whatever's wrong
-      console.error("remote worker:", err);
+      if ((err as { code: string }).code !== "ABORT_ERR") {
+        // we want to log the error, but not end the process
+        // since it could recover after the developer fixes whatever's wrong
+        console.error("remote worker:", err);
+      }
     });
+
+    return () => {
+      abortCtrl.abort();
+    };
   }, [
     name,
     bundle,