Frontend Academy · Lektion

Felhantering: HTTP-statuskoder

Mappa HTTP-statuskoder till meddelanden som visas för användaren, skilj mellan nätverksfel och serverfel och implementera logik för nya försök.

Lektion 3 av 414 steg

Felhantering: HTTP-statuskoder är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

HTTP-statuskodernas kategorier

Statuskoder grupperas efter den första siffran: 2xx lyckade svar, 3xx omdirigering, 4xx klientfel (klientens ansvar), 5xx serverfel (serverns ansvar).

Vanliga 2xx-koder

200 OK: lyckat svar med body. 201 Created: resursen skapades (returnerar ofta den nya resursen). 204 No Content: lyckat svar utan body (DELETE, ibland PUT).

Vanliga 4xx-koder

400 Bad Request: felaktigt formaterad indata. 401 Unauthorized: autentisering saknas eller är ogiltig. 403 Forbidden: autentiserad men saknar behörighet. 404 Not Found: resursen finns inte. 409 Conflict: konflikt i tillståndet (dubblett av e-postadress). 422 Unprocessable Entity: valideringen misslyckades.

Vanliga 5xx-koder

500 Internal Server Error: generellt serverfel. 502 Bad Gateway: en uppströmsliggande tjänst misslyckades. 503 Service Unavailable: servern är överbelastad eller nere. 504 Gateway Timeout: den uppströmsliggande tjänsten svarade inte i tid.

Översätta koder till användarmeddelanden

Översätt statuskoder till användbara meddelanden i gränssnittet – visa aldrig 'Error 500' för användaren.

function userMessage(status) {
  if (status === 401) return 'Please sign in to continue.';
  if (status === 403) return "You don't have permission for that.";
  if (status === 404) return 'Not found.';
  if (status === 409) return 'Already exists.';
  if (status === 422) return 'Please check the form for errors.';
  if (status >= 500) return 'Something went wrong. Try again in a moment.';
  return 'Something unexpected happened.';
}

Nätverksfel jämfört med serverfel

En misslyckad fetch (offline, DNS-fel, CORS) skiljer sig från ett serversvar med fel. Nätverksfel kastar ett undantag; serverfel returnerar ett Response med status >= 400.

try {
  const res = await fetch('/api/users');
  if (!res.ok) {
    // Server replied but with error status
    throw new Error(`Server error ${res.status}`);
  }
  return res.json();
} catch (err) {
  if (err instanceof TypeError) {
    // Network failure — fetch couldn't reach server
    throw new Error('Network error. Check your connection.');
  }
  throw err;
}

Retry-logik för 5xx- och nätverksfel

Serverfel och nätverksfel är ofta tillfälliga. Försök igen med exponentiell backoff.

async function fetchWithRetry(url, options, maxRetries = 3) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const res = await fetch(url, options);
      if (res.ok || (res.status >= 400 && res.status < 500)) return res;
      // 5xx — retryable
    } catch (err) {
      if (attempt === maxRetries - 1) throw err;
    }
    await new Promise(r => setTimeout(r, 2 ** attempt * 1000)); // 1s, 2s, 4s
  }
}

Försök inte igen vid 4xx

4xx-fel beror på klienten – nya försök hjälper inte. Försök endast igen vid 5xx-fel och nätverksfel. Undantaget är 429 (Too Many Requests), som ofta innehåller en Retry-After-header.

Läsa Retry-After-headern

Servrar kan inkludera Retry-After vid 429 och 503 – vänta det angivna antalet sekunder innan Ni försöker igen.

const res = await fetch('/api/limited');
if (res.status === 429) {
  const after = parseInt(res.headers.get('Retry-After') || '5', 10);
  await new Promise(r => setTimeout(r, after * 1000));
  return fetch('/api/limited');
}

Visa valideringsfel

422-svar innehåller vanligtvis en JSON-body med en lista över felen för varje fält. Visa dem bredvid det relevanta formulärfältet.

// Server response for 422:
// { errors: { email: 'Already taken', password: 'Too short' } }

if (res.status === 422) {
  const { errors } = await res.json();
  Object.entries(errors).forEach(([field, msg]) => {
    setFieldError(field, msg);
  });
}

Telemetri: logga fel till en tjänst

Skicka fel till Sentry, Datadog eller LogRocket så att Ni kan se dem i produktion. Inkludera förfrågningens URL, metod, status och en sanerad body (inga hemligheter).

Visa en konkret väg vidare

Varje felgränssnitt bör erbjuda användaren en väg vidare: en knapp för att försöka igen, en länk till supporten eller en väg tillbaka till en fungerande sida. Felskärmar utan utväg frustrerar användarna.

Snabb kontroll

Ett API returnerar 422 Unprocessable Entity. Vad betyder det vanligtvis?

Besvara frågan i den interaktiva lektionen

Sammanfattning: HTTP-felhantering

2xx lyckat svar, 3xx omdirigering, 4xx klientfel, 5xx serverfel. Översätt koder till användarvänliga meddelanden. Skilj nätverksfel (TypeError från fetch) från serverfel (res.ok false). Försök igen vid 5xx-fel och nätverksfel med exponentiell backoff; försök aldrig igen vid 4xx (förutom 429 med Retry-After). Visa felen för 422-fält. Logga fel till en tjänst som Sentry.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 41
Lektioner: 163

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Felhantering: HTTP-statuskoder” gratis?

Ja – hela texten till ”Felhantering: HTTP-statuskoder” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Felhantering: HTTP-statuskoder”?

Mappa HTTP-statuskoder till meddelanden som visas för användaren, skilj mellan nätverksfel och serverfel och implementera logik för nya försök. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Felhantering: HTTP-statuskoder”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Frontend Academy