more error handling

src/client/runtime/steppable-stream.ts

···
   releasedCount = 0;
   buffered = false;
   closed = false;
+  error: Error | null = null;
   release: (count: number) => void;
   flightPromise: Thenable<unknown>;
   bufferPromise: Promise<void>;
···
 
       partial += decoder.decode();
       if (partial.trim()) this.rows.push(partial);
+    } catch (err) {
+      this.error = err instanceof Error ? err : new Error(String(err));
     } finally {
       this.buffered = true;
     }
···
 
   async waitForBuffer(): Promise<void> {
     await this.bufferPromise;
+    if (this.error) {
+      throw this.error;
+    }
+  }
+
+  static fromError(error: Error): SteppableStream {
+    const emptyStream = new ReadableStream<Uint8Array>({
+      start(controller) {
+        controller.close();
+      },
+    });
+    const stream = new SteppableStream(emptyStream);
+    stream.error = error;
+    stream.buffered = true;
+    // Override flightPromise to reject so client transitions complete
+    stream.flightPromise = Promise.reject(error);
+    return stream;
   }
 }

src/client/runtime/timeline.ts

···
   args?: string;
   rows: string[];
   flightPromise: Thenable<unknown> | undefined;
+  error: Error | null;
   chunkStart: number;
   chunkCount: number;
   canDelete: boolean;
···
       const base = {
         rows: entry.stream.rows,
         flightPromise: entry.stream.flightPromise,
+        error: entry.stream.error,
         chunkStart,
         chunkCount,
         canDelete: this.cursor <= chunkStart,

src/client/samples.ts

···
   return String(v)
 }`,
   },
+  actionerror: {
+    name: "Action Error",
+    server: `import { Button } from './client'
+
+export default function App() {
+  return (
+    <div>
+      <h1>Action Error</h1>
+      <Button failAction={failAction} />
+    </div>
+  )
+}
+
+async function failAction() {
+  'use server'
+  throw new Error('Action failed intentionally')
+}`,
+    client: `'use client'
+
+import { useTransition } from 'react'
+
+export function Button({ failAction }) {
+  const [isPending, startTransition] = useTransition()
+
+  const handleClick = () => {
+    startTransition(async () => {
+      await failAction()
+    })
+  }
+
+  return (
+    <button onClick={handleClick} disabled={isPending}>
+      {isPending ? 'Running...' : 'Trigger Failing Action'}
+    </button>
+  )
+}`,
+  },
   cve: {
     name: "CVE-2025-55182",
     server: `import { Instructions } from './client'

src/client/ui/FlightLog.css

···
   opacity: 0.4;
 }
 
+.FlightLog-entry--error {
+  border-left-color: #e57373;
+}
+
 .FlightLog-entry-header {
   display: flex;
   align-items: center;
···
   color: #81c784;
   white-space: pre-wrap;
   word-break: break-all;
+}
+
+/* Error display */
+
+.FlightLog-entry-error {
+  padding: 8px 10px;
+}
+
+.FlightLog-entry-errorMessage {
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.4;
+  color: #e57373;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 /* FlightLog-renderView */

src/client/ui/FlightLog.tsx

···
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useTransition } from "react";
 import { FlightTreeView } from "./TreeView.tsx";
 import { Select } from "./Select.tsx";
 import type { EntryView } from "../runtime/index.ts";
···
   cursor,
   onDelete,
 }: FlightLogEntryProps): React.ReactElement {
-  const modifierClass = entry.isActive
-    ? "FlightLog-entry--active"
-    : entry.isDone
-      ? "FlightLog-entry--done"
-      : "FlightLog-entry--pending";
+  const hasError = entry.error !== null;
+  const modifierClass = hasError
+    ? "FlightLog-entry--error"
+    : entry.isActive
+      ? "FlightLog-entry--active"
+      : entry.isDone
+        ? "FlightLog-entry--done"
+        : "FlightLog-entry--pending";
 
   return (
     <div className={`FlightLog-entry ${modifierClass}`} data-testid="flight-entry">
···
           <pre className="FlightLog-entry-requestArgs">{entry.args}</pre>
         </div>
       )}
-      <RenderLogView entry={entry} cursor={cursor} />
+      {hasError ? (
+        <div className="FlightLog-entry-error" data-testid="flight-entry-error">
+          <pre className="FlightLog-entry-errorMessage">{entry.error!.message}</pre>
+        </div>
+      ) : (
+        <RenderLogView entry={entry} cursor={cursor} />
+      )}
     </div>
   );
 }
···
   entries: EntryView[];
   cursor: number;
   availableActions: string[];
-  onAddRawAction: (actionName: string, rawPayload: string) => void;
+  onAddRawAction: (actionName: string, rawPayload: string) => Promise<void>;
   onDeleteEntry: (index: number) => void;
 };
 
···
   const [showRawInput, setShowRawInput] = useState(false);
   const [selectedAction, setSelectedAction] = useState("");
   const [rawPayload, setRawPayload] = useState("");
+  const [isPending, startTransition] = useTransition();
 
   const handleAddRaw = (): void => {
     if (rawPayload.trim()) {
-      onAddRawAction(selectedAction, rawPayload);
-      setSelectedAction(availableActions[0] ?? "");
-      setRawPayload("");
-      setShowRawInput(false);
+      startTransition(async () => {
+        try {
+          await onAddRawAction(selectedAction, rawPayload);
+        } catch {
+          // Error entry added to timeline
+        }
+        startTransition(() => {
+          setSelectedAction(availableActions[0] ?? "");
+          setRawPayload("");
+          setShowRawInput(false);
+        });
+      });
     }
   };
 
···
       {availableActions.length > 0 &&
         (showRawInput ? (
           <div className="FlightLog-rawForm">
-            <Select value={selectedAction} onChange={(e) => setSelectedAction(e.target.value)}>
+            <Select
+              value={selectedAction}
+              onChange={(e) => setSelectedAction(e.target.value)}
+              disabled={isPending}
+            >
               {availableActions.map((action) => (
                 <option key={action} value={action}>
                   {action}
···
               onChange={(e) => setRawPayload(e.target.value)}
               className="FlightLog-rawForm-textarea"
               rows={6}
+              disabled={isPending}
             />
             <div className="FlightLog-rawForm-buttons">
               <button
                 className="FlightLog-rawForm-submitBtn"
                 onClick={handleAddRaw}
-                disabled={!rawPayload.trim()}
+                disabled={!rawPayload.trim() || isPending}
               >
-                Add
+                {isPending ? "Adding..." : "Add"}
               </button>
               <button
                 className="FlightLog-rawForm-cancelBtn"
                 onClick={() => setShowRawInput(false)}
+                disabled={isPending}
               >
                 Cancel
               </button>

src/client/workspace-session.ts

···
     args: EncodedArgs,
     argsDisplay: string,
   ): Promise<SteppableStream> {
-    const responseRaw = await this.worker.callAction(actionName, args);
-    const stream = new SteppableStream(responseRaw, {
-      callServer: this.callServer.bind(this),
-    });
-    await stream.waitForBuffer();
+    let stream: SteppableStream;
+    try {
+      const responseRaw = await this.worker.callAction(actionName, args);
+      stream = new SteppableStream(responseRaw, {
+        callServer: this.callServer.bind(this),
+      });
+      await stream.waitForBuffer();
+    } catch (err) {
+      let error = err instanceof Error ? err : new Error(String(err));
+      if (error.message === "Connection closed.") {
+        error = new Error(
+          "Connection closed.\n\nThis usually means React couldn't parse the request payload. " +
+            "Try triggering a real action first and copying its payload format.",
+        );
+      }
+      stream = SteppableStream.fromError(error);
+    }
     this.timeline.addAction(actionName, argsDisplay, stream);
+    if (stream.error) {
+      throw stream.error;
+    }
     return stream;
   }
 

src/server/worker-server.ts

···
 }
 export type Deploy = typeof deploy;
 
+const renderOptions = {
+  onError: () => "Switch to dev mode (top right) to see the full error.",
+};
+
 function render(): ReadableStream<Uint8Array> {
   if (!deployed) throw new Error("No code deployed");
   const App = deployed.module.default as React.ComponentType;
-  return renderToReadableStream(React.createElement(App), deployed.manifest);
+  return renderToReadableStream(React.createElement(App), deployed.manifest, renderOptions);
 }
 export type Render = typeof render;
 
···
   const args = Array.isArray(decoded) ? decoded : [decoded];
   const result = await actionFn(...args);
 
-  return renderToReadableStream(result, deployed.manifest);
+  return renderToReadableStream(result, deployed.manifest, renderOptions);
 }
 export type CallAction = typeof callAction;
 

tests/actionerror.spec.ts

···
+import { test, expect, beforeAll, afterAll, afterEach } from "vitest";
+import { createHelpers, launchBrowser, type TestHelpers } from "./helpers.ts";
+import type { Browser, Page } from "playwright";
+
+let browser: Browser;
+let page: Page;
+let h: TestHelpers;
+
+beforeAll(async () => {
+  browser = await launchBrowser();
+  page = await browser.newPage();
+  h = createHelpers(page);
+});
+
+afterAll(async () => {
+  await browser.close();
+});
+
+afterEach(async () => {
+  await h.checkNoRemainingSteps();
+});
+
+test("action error - throwing action shows error in entry and clears pending state", async () => {
+  await h.load("actionerror");
+
+  // Render completes
+  expect(await h.stepAll()).toMatchInlineSnapshot(`
+    "<div>
+      <h1>Action Error</h1>
+      <Button failAction={[Function: failAction]} />
+    </div>"
+  `);
+  expect(await h.preview("Trigger Failing Action")).toMatchInlineSnapshot(`
+    "Action Error
+    Trigger Failing Action"
+  `);
+
+  // Click the button to trigger the failing action
+  await h.frame().getByTestId("preview-container").locator("button").click();
+
+  // Wait for the error entry to appear (action fails quickly)
+  const errorEntry = h.frame().getByTestId("flight-entry-error");
+  await expect.poll(() => errorEntry.count(), { timeout: 10000 }).toBeGreaterThan(0);
+
+  // Verify error message is displayed in the FlightLog entry
+  const errorText = await errorEntry.innerText();
+  expect(errorText).toContain("Action failed intentionally");
+
+  // The error propagates to the preview (no ErrorBoundary in the sample),
+  // so the preview will show the error message instead of the button.
+  // The key verification is that the error entry appears in the FlightLog.
+});
+
+test("action error - raw action with invalid payload shows error", async () => {
+  await h.load("form");
+
+  // Render completes
+  expect(await h.stepAll()).toMatchInlineSnapshot(`
+    "<div>
+      <h1>Form Action</h1>
+      <Form greetAction={[Function: greet]} />
+    </div>"
+  `);
+
+  // Click + to add raw action
+  await h.frame().locator(".FlightLog-addButton").click();
+
+  // Enter invalid payload (not valid URLSearchParams format for decodeReply)
+  await h.frame().locator(".FlightLog-rawForm-textarea").fill("invalid-payload-that-will-fail");
+
+  // Submit
+  await h.frame().locator(".FlightLog-rawForm-submitBtn").click();
+
+  // Wait for the error entry to appear
+  const errorEntry = h.frame().getByTestId("flight-entry-error");
+  await expect.poll(() => errorEntry.count(), { timeout: 10000 }).toBeGreaterThan(0);
+
+  // Verify error message includes our helpful hint about payload format
+  const errorText = await errorEntry.innerText();
+  expect(errorText).toContain("couldn't parse the request payload");
+});