Merge pull request #58 from homanp/cursor/fix-network-timeout-long-runs

homanp · web-flow · commit 78b5726e5d8f · 2026-03-25T19:49:02.000+01:00
feat: fix network errors on long-running AI streams
diff --git a/src/app/api/chat/route.ts b/src/app/api/chat/route.ts
@@ -18,6 +18,8 @@ import {
 import { webSearch, type SearchProvider } from "@/lib/web-search";
 import { scanUrls } from "@/lib/brin";
 
+export const maxDuration = 800;
+
 interface McpServerPayload {
   name: string;
   type: "command" | "sse" | "streamableHttp";
diff --git a/src/app/api/widgets/bootstrap/route.ts b/src/app/api/widgets/bootstrap/route.ts
@@ -5,6 +5,8 @@ import {
   buildWidget,
 } from "@/lib/widget-runner";
 
+export const maxDuration = 800;
+
 export async function POST(request: Request) {
   const { widgets } = (await request.json()) as {
     widgets: Array<{
diff --git a/src/components/chat-sidebar.tsx b/src/components/chat-sidebar.tsx
@@ -106,6 +106,8 @@ function KittLoader() {
 }
 
 const abortControllers = new Map<string, AbortController>();
+const MAX_RETRIES = 2;
+const RETRY_DELAY_MS = 1500;
 
 function ReasoningBlock({
   text,
@@ -288,120 +290,165 @@ async function streamToWidget(
         env: s.env,
       }));
 
-    const res = await fetch("/api/chat", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        messages,
-        widgetId,
-        model,
-        apiKey,
-        ...(searchProvider && searchApiKey ? { searchProvider, searchApiKey } : {}),
-        ...(enabledMcpServers.length > 0 ? { mcpServers: enabledMcpServers } : {}),
-        ...(customApi ? { customApi } : {}),
-      }),
-      signal: controller.signal,
+    const body = JSON.stringify({
+      messages,
+      widgetId,
+      model,
+      apiKey,
+      ...(searchProvider && searchApiKey ? { searchProvider, searchApiKey } : {}),
+      ...(enabledMcpServers.length > 0 ? { mcpServers: enabledMcpServers } : {}),
+      ...(customApi ? { customApi } : {}),
     });
 
-    if (!res.ok) {
-      const err = await res.text();
-      updateAssistantMessage(widgetId, currentMsgId, `Error: ${err}`);
-      return;
+    function isNetworkError(err: unknown): boolean {
+      if (err instanceof TypeError) return true;
+      const msg = String(err).toLowerCase();
+      return msg.includes("network") || msg.includes("failed to fetch") || msg.includes("econnreset") || msg.includes("socket hang up");
     }
 
-    const reader = res.body?.getReader();
-    if (!reader) return;
+    for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+      if (controller.signal.aborted) break;
 
-    const decoder = new TextDecoder();
-    let buffer = "";
+      if (attempt > 0) {
+        showAction(`Reconnecting (attempt ${attempt + 1})…`);
+        await new Promise((r) => setTimeout(r, RETRY_DELAY_MS * attempt));
+        if (controller.signal.aborted) break;
+      }
 
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
+      try {
+        const res = await fetch("/api/chat", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body,
+          signal: controller.signal,
+        });
+
+        if (!res.ok) {
+          const err = await res.text();
+          updateAssistantMessage(widgetId, currentMsgId, `Error: ${err}`);
+          return;
+        }
 
-      buffer += decoder.decode(value, { stream: true });
-      const parts = buffer.split("\n\n");
-      buffer = parts.pop() ?? "";
+        const reader = res.body?.getReader();
+        if (!reader) return;
 
-      for (const part of parts) {
-        const line = part.trim();
-        if (!line.startsWith("data:")) continue;
-        const payload = line.slice(5).trim();
-        if (payload === "[DONE]") continue;
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let streamCompleted = false;
 
-        try {
-          const event = JSON.parse(payload);
-          if (event.type === "reasoning-delta") {
-            if (hasEmittedText) {
-              startNewAssistantMessage();
-            }
-            setReasoningStreaming(widgetId, true);
-            appendReasoningToMessage(widgetId, currentMsgId, event.text);
-          } else if (event.type === "text-delta") {
-            setReasoningStreaming(widgetId, false);
-            hasEmittedText = true;
-            fullText += event.text;
-            updateAssistantMessage(widgetId, currentMsgId, fullText);
-          } else if (event.type === "widget-file") {
-            if (event.path && event.content) {
-              setWidgetFile(widgetId, event.path, event.content);
-            }
-          } else if (event.type === "widget-code") {
-            if (event.code) {
-              setWidgetCode(widgetId, event.code);
-              showAction("Building widget…");
-              setTimeout(() => bumpIframeVersion(widgetId), 15000);
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            streamCompleted = true;
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const parts = buffer.split("\n\n");
+          buffer = parts.pop() ?? "";
+
+          for (const part of parts) {
+            const line = part.trim();
+            if (!line.startsWith("data:")) continue;
+            const payload = line.slice(5).trim();
+            if (payload === "[DONE]") {
+              streamCompleted = true;
+              continue;
             }
-          } else if (event.type === "tool-call") {
-            let action = "";
-            if (event.toolName === "writeFile") {
-              const filePath = event.args?.path ?? "";
-              action =
-                filePath === "src/App.tsx"
-                  ? "Writing widget code"
-                  : `Writing ${filePath}`;
-            } else if (event.toolName === "readFile") {
-              action = `Reading ${event.args?.path ?? "file"}`;
-            } else if (event.toolName === "bash") {
-              const cmd = String(event.args?.command ?? "");
-              action = cmd.length > 40 ? `Running: ${cmd.slice(0, 40)}…` : `Running: ${cmd}`;
-            } else if (event.toolName === "listDashboardWidgets") {
-              action = "Checking dashboard widgets";
-            } else if (event.toolName === "readWidgetCode") {
-              action = `Reading ${event.args?.targetWidgetId ?? "sibling"} code`;
-            } else if (event.toolName === "web_search") {
-              action = event.args?.query
-                ? `Searching "${event.args.query}"`
-                : "Searching the web";
-            } else {
-              action = `Using ${event.toolName}`;
+
+            try {
+              const event = JSON.parse(payload);
+              if (event.type === "reasoning-delta") {
+                if (hasEmittedText) {
+                  startNewAssistantMessage();
+                }
+                setReasoningStreaming(widgetId, true);
+                appendReasoningToMessage(widgetId, currentMsgId, event.text);
+              } else if (event.type === "text-delta") {
+                setReasoningStreaming(widgetId, false);
+                hasEmittedText = true;
+                fullText += event.text;
+                updateAssistantMessage(widgetId, currentMsgId, fullText);
+              } else if (event.type === "widget-file") {
+                if (event.path && event.content) {
+                  setWidgetFile(widgetId, event.path, event.content);
+                }
+              } else if (event.type === "widget-code") {
+                if (event.code) {
+                  setWidgetCode(widgetId, event.code);
+                  showAction("Building widget…");
+                  setTimeout(() => bumpIframeVersion(widgetId), 15000);
+                }
+              } else if (event.type === "tool-call") {
+                let action = "";
+                if (event.toolName === "writeFile") {
+                  const filePath = event.args?.path ?? "";
+                  action =
+                    filePath === "src/App.tsx"
+                      ? "Writing widget code"
+                      : `Writing ${filePath}`;
+                } else if (event.toolName === "readFile") {
+                  action = `Reading ${event.args?.path ?? "file"}`;
+                } else if (event.toolName === "bash") {
+                  const cmd = String(event.args?.command ?? "");
+                  action = cmd.length > 40 ? `Running: ${cmd.slice(0, 40)}…` : `Running: ${cmd}`;
+                } else if (event.toolName === "listDashboardWidgets") {
+                  action = "Checking dashboard widgets";
+                } else if (event.toolName === "readWidgetCode") {
+                  action = `Reading ${event.args?.targetWidgetId ?? "sibling"} code`;
+                } else if (event.toolName === "web_search") {
+                  action = event.args?.query
+                    ? `Searching "${event.args.query}"`
+                    : "Searching the web";
+                } else {
+                  action = `Using ${event.toolName}`;
+                }
+                if (action) showAction(action);
+              } else if (event.type === "tool-result") {
+                clearActionWithMinimumVisibility();
+              } else if (event.type === "abort") {
+                updateAssistantMessage(
+                  widgetId,
+                  currentMsgId,
+                  fullText || "[Interrupted]"
+                );
+              } else if (event.type === "error") {
+                updateAssistantMessage(
+                  widgetId,
+                  currentMsgId,
+                  `Error: ${event.error}`
+                );
+              }
+            } catch {
+              // skip malformed chunks
             }
-            if (action) showAction(action);
-          } else if (event.type === "tool-result") {
-            clearActionWithMinimumVisibility();
-          } else if (event.type === "abort") {
-            updateAssistantMessage(
-              widgetId,
-              currentMsgId,
-              fullText || "[Interrupted]"
-            );
-          } else if (event.type === "error") {
-            updateAssistantMessage(
-              widgetId,
-              currentMsgId,
-              `Error: ${event.error}`
-            );
           }
-        } catch {
-          // skip malformed chunks
+        }
+
+        if (streamCompleted) return;
+      } catch (err) {
+        if ((err as Error).name === "AbortError") {
+          updateAssistantMessage(widgetId, currentMsgId, fullText || "[Interrupted]");
+          return;
+        }
+        if (!isNetworkError(err) || attempt >= MAX_RETRIES) {
+          const friendly = isNetworkError(err)
+            ? "Connection lost — please check your network and try again."
+            : `Error: ${String(err)}`;
+          updateAssistantMessage(widgetId, currentMsgId, fullText ? `${fullText}\n\n${friendly}` : friendly);
+          return;
         }
       }
     }
-  } catch (err) {
-    if ((err as Error).name === "AbortError") {
-      updateAssistantMessage(widgetId, currentMsgId, fullText || "[Interrupted]");
-    } else {
-      updateAssistantMessage(widgetId, currentMsgId, `Error: ${String(err)}`);
+
+    if (!controller.signal.aborted) {
+      updateAssistantMessage(
+        widgetId,
+        currentMsgId,
+        fullText
+          ? `${fullText}\n\nConnection lost after multiple retries — please try again.`
+          : "Connection lost after multiple retries — please try again.",
+      );
     }
   } finally {
     abortControllers.delete(widgetId);
diff --git a/src/lib/create-model.ts b/src/lib/create-model.ts
@@ -19,22 +19,35 @@ import type { CustomApiConfig } from "@/store/settings-store";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ProviderFactory = (opts?: { apiKey?: string; baseURL?: string }) => (modelId: string) => any;
 
+const REQUEST_TIMEOUT_MS = 800_000; // ~13 min — match maxDuration on API routes
+
+function fetchWithTimeout(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  if (init?.signal) return fetch(input, init);
+  return fetch(input, { ...init, signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS) });
+}
+
+interface ProviderOpts { apiKey?: string; baseURL?: string }
+
+function withTimeout(opts?: ProviderOpts): ProviderOpts & { fetch: typeof fetch } {
+  return { ...opts, fetch: fetchWithTimeout as typeof fetch };
+}
+
 const providers: Record<string, ProviderFactory> = {
-  anthropic: (opts) => createAnthropic(opts),
-  openai: (opts) => createOpenAI(opts),
-  google: (opts) => createGoogleGenerativeAI(opts),
-  xai: (opts) => createXai(opts),
-  mistral: (opts) => createMistral(opts),
-  groq: (opts) => createGroq(opts),
-  deepseek: (opts) => createDeepSeek(opts),
-  perplexity: (opts) => createPerplexity(opts),
-  cohere: (opts) => createCohere(opts),
-  cerebras: (opts) => createCerebras(opts),
-  togetherai: (opts) => createTogetherAI(opts),
-  fireworks: (opts) => createFireworks(opts),
-  moonshotai: (opts) => createMoonshotAI(opts),
-  alibaba: (opts) => createAlibaba(opts),
-  deepinfra: (opts) => createDeepInfra(opts),
+  anthropic: (opts) => createAnthropic(withTimeout(opts)),
+  openai: (opts) => createOpenAI(withTimeout(opts)),
+  google: (opts) => createGoogleGenerativeAI(withTimeout(opts)),
+  xai: (opts) => createXai(withTimeout(opts)),
+  mistral: (opts) => createMistral(withTimeout(opts)),
+  groq: (opts) => createGroq(withTimeout(opts)),
+  deepseek: (opts) => createDeepSeek(withTimeout(opts)),
+  perplexity: (opts) => createPerplexity(withTimeout(opts)),
+  cohere: (opts) => createCohere(withTimeout(opts)),
+  cerebras: (opts) => createCerebras(withTimeout(opts)),
+  togetherai: (opts) => createTogetherAI(withTimeout(opts)),
+  fireworks: (opts) => createFireworks(withTimeout(opts)),
+  moonshotai: (opts) => createMoonshotAI(withTimeout(opts)),
+  alibaba: (opts) => createAlibaba(withTimeout(opts)),
+  deepinfra: (opts) => createDeepInfra(withTimeout(opts)),
 };
 
 const CUSTOM_PROVIDER_PREFIX = "custom:";
