Frontend Academy · Lektion

Fehlerbehandlung: HTTP-Statuscodes

Ordnen Sie HTTP-Statuscodes benutzerseitig sichtbaren Meldungen zu, unterscheiden Sie zwischen Netzwerk- und Serverfehlern und implementieren Sie eine Wiederholungslogik.

Fehlerbehandlung: HTTP-Statuscodes ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Kategorien der HTTP-Statuscodes

Statuscodes werden nach ihrer ersten Ziffer gruppiert: 2xx Erfolg, 3xx Weiterleitung, 4xx Clientfehler (Ihr Fehler), 5xx Serverfehler (deren Fehler).

Häufige 2xx-Codes

200 OK: Erfolg mit Inhalt. 201 Created: Ressource erstellt (gibt häufig die neue Ressource zurück). 204 No Content: Erfolg ohne Inhalt (DELETE, manchmal PUT).

Häufige 4xx-Codes

400 Bad Request: fehlerhaftes Eingabeformat. 401 Unauthorized: Authentifizierung fehlt oder ist ungültig. 403 Forbidden: authentifiziert, aber nicht berechtigt. 404 Not Found: Ressource existiert nicht. 409 Conflict: Konflikt im Zustand (doppelte E-Mail-Adresse). 422 Unprocessable Entity: Validierung fehlgeschlagen.

Häufige 5xx-Codes

500 Internal Server Error: allgemeiner Serverfehler. 502 Bad Gateway: Upstream-Dienst ist fehlgeschlagen. 503 Service Unavailable: Server ist überlastet oder nicht verfügbar. 504 Gateway Timeout: Upstream-Dienst hat nicht rechtzeitig geantwortet.

Codes in Benutzernachrichten abbilden

Übersetzen Sie Statuscodes in hilfreiche UI-Nachrichten – zeigen Sie Benutzern niemals „Error 500“ an.

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.';
}

Netzwerkfehler vs. Serverfehler

Ein fehlgeschlagener fetch (keine Netzwerkverbindung, DNS-Fehler, CORS) unterscheidet sich von einer Serverfehlerantwort. Netzwerkfehler lösen eine Exception aus; Serverfehler geben eine Response mit dem Status >= 400 zurück.

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;
}

Wiederholungslogik für 5xx- und Netzwerkfehler

Serverfehler und Netzwerkausfälle sind häufig vorübergehend. Wiederholen Sie die Anfrage mit exponentiellem 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
  }
}

4xx-Fehler nicht wiederholen

4xx-Fehler werden durch Ihre Anfrage verursacht – eine Wiederholung hilft nicht. Wiederholen Sie nur bei 5xx- und Netzwerkfehlern. Eine Ausnahme ist 429 (Too Many Requests), das häufig einen Retry-After-Header enthält.

Den Retry-After-Header auslesen

Server können bei 429 und 503 den Retry-After-Header mitsenden – warten Sie vor dem erneuten Versuch so viele Sekunden wie angegeben.

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');
}

Validierungsfehler anzeigen

422-Antworten enthalten normalerweise einen JSON-Body mit einer Auflistung der Feldfehler. Zeigen Sie diese neben dem jeweils relevanten Formulareingabefeld an.

// 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);
  });
}

Telemetrie: Fehler an einen Dienst senden

Senden Sie Fehler an Sentry, Datadog oder LogRocket, damit Sie sie in der Produktionsumgebung sehen können. Fügen Sie die URL der Anfrage, die Methode, den Status und einen bereinigten Body hinzu (keine Secrets).

Eine hilfreiche Wiederherstellung anbieten

Jede Fehleroberfläche sollte den Benutzern einen Weg nach vorn bieten: eine Schaltfläche zum Wiederholen, einen Link zum Support oder eine Möglichkeit zurück zu einer funktionierenden Seite. Fehlerseiten ohne Ausweg frustrieren Benutzer.

Kurzer Wissenstest

Eine API gibt 422 Unprocessable Entity zurück. Was bedeutet das normalerweise?

Zusammenfassung: HTTP-Fehlerbehandlung

2xx bedeutet Erfolg, 3xx Weiterleitung, 4xx Clientfehler und 5xx Serverfehler. Bilden Sie Codes auf benutzerfreundliche Nachrichten ab. Unterscheiden Sie Netzwerkfehler (TypeError von fetch) von Serverfehlern (res.ok false). Wiederholen Sie 5xx- und Netzwerkfehler mit exponentiellem Backoff, niemals 4xx-Fehler (außer 429 mit Retry-After). Zeigen Sie 422-Feldfehler an. Protokollieren Sie Fehler in einem Dienst wie Sentry.

Häufig gestellte Fragen

Ist die Lektion „Fehlerbehandlung: HTTP-Statuscodes“ kostenlos?

Ja — der vollständige Text von „Fehlerbehandlung: HTTP-Statuscodes“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Fehlerbehandlung: HTTP-Statuscodes“?

Ordnen Sie HTTP-Statuscodes benutzerseitig sichtbaren Meldungen zu, unterscheiden Sie zwischen Netzwerk- und Serverfehlern und implementieren Sie eine Wiederholungslogik. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Fehlerbehandlung: HTTP-Statuscodes“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy