datawhalechina/hello-agents · error

HTTP ${response.status}

Error message

HTTP ${response.status}

What it means

Single api() wrapper for the whole task-view frontend: fetch(path) with JSON headers, and on !response.ok it reads the body as text and throws that text, falling back to 'HTTP <status>' only when the body is empty. Because it throws raw body text, HTML error pages get thrown as-is; also, if the server responds with HTML for a 200 (login redirect page), response.json() will throw a SyntaxError instead.

Source

Thrown at Co-creation-projects/huailishang-AgentPlatformBase/frontend/app.js:28

  agentList: document.getElementById("agentList"),
  chatForm: document.getElementById("chatForm"),
  messageInput: document.getElementById("messageInput"),
  mentionMenu: document.getElementById("mentionMenu"),
  messages: document.getElementById("messages"),
  statusText: document.getElementById("statusText"),
  refreshButton: document.getElementById("refreshButton"),
  taskView: document.getElementById("taskView"),
  eventList: document.getElementById("eventList"),
};

async function api(path, options = {}) {
  const response = await fetch(path, {
    headers: { "Content-Type": "application/json", ...(options.headers || {}) },
    ...options,
  });
  if (!response.ok) {
    const text = await response.text();
    throw new Error(text || `HTTP ${response.status}`);
  }
  return response.json();
}

function nowText() {
  return new Date().toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#039;");
}

function linkify(text) {

View on GitHub (pinned to 606a07d341)

Solutions

  1. Check DevTools network tab for the failing path and actual response; fix routing/proxy so API paths hit the backend origin
  2. Parse the text as JSON when content-type is application/json and extract detail/message for a cleaner error
  3. Truncate long HTML bodies in the thrown message
  4. If auth-based, detect 401 and redirect to login

Example fix

// before
if (!response.ok) {
    const text = await response.text();
    throw new Error(text || `HTTP ${response.status}`);
}

// after
if (!response.ok) {
    const text = await response.text().catch(() => '');
    let msg = text.slice(0, 200);
    try { const j = JSON.parse(text); msg = j.detail || j.message || msg; } catch (_) {}
    throw new Error(msg || `HTTP ${response.status}`);
}
Defensive patterns

Strategy: try-catch

Type guard

function isJsonResponse(resp) { return (resp.headers.get('content-type') || '').includes('application/json'); }

Try / catch

try { const data = await api('/api/tasks'); } catch (e) { if (/401|403/.test(e.message)) location.href = '/login'; else renderError(e.message.slice(0, 200)); }

Prevention

When it happens

Trigger: Any backend 4xx/5xx on the relative path: FastAPI 422 detail JSON stringified as raw text, proxy 502 HTML pages thrown wholesale, session expiry returning a redirect page. Relative paths assume the frontend and API share an origin.

Common situations: Frontend served statically while API sits on another origin/port (path resolves against the wrong origin → 404 HTML); auth cookie expired so every call returns a 401/redirect page; nginx misroute.

Related errors


AI-assisted analysis of datawhalechina/hello-agents@606a07d341 (2026-08-14). Data as JSON: /api/errors/368c0807983b3c31. Report an issue: GitHub.