HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Untitled Lesson

⚡ Total XP: 0|💻 backend XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

Assuming fetch() rejects on 4xx/5xx responses like axios does

// Wrong: silently proceeds with an error page as "data"
const res = await fetch(url);
const data = await res.json();

// Correct
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

The Solution //

fetch only rejects its Promise for network-level failures (DNS failure, connection refused, timeout) — an HTTP 404 or 500 is still a "successful" fetch as far as the Promise is concerned, resolving normally with response.ok set to false. Always check response.ok (or response.status) explicitly before trusting the payload.

The Error //

Making an outbound fetch call with no timeout in a request-handling path

// Wrong: no protection against a hanging upstream
await fetch(slowUpstreamUrl);

// Correct
await fetch(slowUpstreamUrl, { signal: AbortSignal.timeout(3000) });

The Solution //

Without an explicit AbortSignal.timeout(), a hung upstream dependency can keep a fetch call — and the request handler awaiting it — pending indefinitely, eventually exhausting your server's concurrent connection capacity under load. Every outbound call inside a request handler should carry an explicit timeout appropriate to that dependency's expected latency.