abi/screenshot-to-code · error · Error

data.detail || "Request failed"

Error message

data.detail || "Request failed"

What it means

Client-side fallback error thrown by the eval sessions UI when POST ${HTTP_BACKEND_URL}/eval-sessions returns a non-2xx status. It surfaces whatever the FastAPI backend put in the response body's `detail` field, or the generic string 'Request failed' when the body has no detail (e.g. empty body or non-JSON error page). The error is then shown via toast.error(String(error)), so the user sees 'Error: <detail>'.

Solutions

  1. Open browser devtools Network tab and inspect the actual response status and body to see the backend's detail message.
  2. Verify the backend is running and HTTP_BACKEND_URL points at it (default port 7001).
  3. If the detail mentions the set name, fix or create the eval set before starting a session.
  4. Make response parsing defensive: check content-type before .json() so an HTML error page does not mask the real status code.

Example fix

// before
if (!response.ok) {
  const data = await response.json();
  throw new Error(data.detail || "Request failed");
}

// after
if (!response.ok) {
  let detail = `Request failed (${response.status})`;
  try {
    const data = await response.json();
    if (data?.detail) detail = String(data.detail);
  } catch { /* non-JSON body */ }
  throw new Error(detail);
}
Defensive patterns

Strategy: try-catch

Validate before calling

const ok = typeof newSessionSet === "string" && /^[A-Za-z0-9][A-Za-z0-9._ -]*$/.test(newSessionSet);
if (!ok) { toast.error("Invalid set name"); return; }

Try / catch

try {
  const res = await fetch(url, opts);
  if (!res.ok) {
    const body = await res.json().catch(() => null);
    throw new Error(body?.detail ?? `Request failed (${res.status})`);
  }
  return await res.json();
} catch (e) {
  toast.error(e instanceof Error ? e.message : String(e));
} finally {
  setIsCreating(false);
}

Prevention

When it happens

Trigger: Clicking 'start session' in EvalSessionsPage with a set name that fails server-side validation (invalid characters, unknown set), backend returning 422/500, or the backend being unreachable/proxy returning an HTML error page so response.json() itself rejects and jumps to the generic catch.

Common situations: Backend not running on the configured HTTP port, CORS/proxy intercepting the request, creating a session for an eval set that was deleted on disk, or FastAPI raising HTTPException with a detail message the UI just echoes.

Related errors


AI-assisted analysis of abi/screenshot-to-code@d026163f58 (2026-08-14). Data as JSON: /api/errors/45fdd3c7ae6ba689. Report an issue: GitHub.

Appendix: source

Thrown at frontend/src/components/evals/EvalSessionsPage.tsx:325

      toast.error("Failed to activate session.");
    }
  };

  const handleCreate = async () => {
    if (!newSessionSet) return;
    setIsCreating(true);
    try {
      const response = await fetch(`${HTTP_BACKEND_URL}/eval-sessions`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          eval_set: newSessionSet,
          name: newSessionName.trim() || null,
        }),
      });
      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.detail || "Request failed");
      }
      const created: EvalSession = await response.json();
      setNewSessionName("");
      toast.success(`Session "${created.name}" started.`);
      await fetchSessions();
      loadMatrix(created.session_id);
    } catch (error) {
      console.error("Error creating session", error);
      toast.error(String(error));
    } finally {
      setIsCreating(false);
    }
  };

  const openRun = (runId: string) => {
    navigate(`/evals/agent-runs?run=${encodeURIComponent(runId)}`);
  };

View on GitHub (pinned to d026163f58)