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("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
}
function linkify(text) {View on GitHub (pinned to 606a07d341)
Solutions
- Check DevTools network tab for the failing path and actual response; fix routing/proxy so API paths hit the backend origin
- Parse the text as JSON when content-type is application/json and extract detail/message for a cleaner error
- Truncate long HTML bodies in the thrown message
- 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
- Serve frontend and API behind one origin/proxy so relative paths resolve
- Parse JSON error bodies before throwing
- Truncate HTML error pages in thrown messages
- Check content-type before response.json()
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.