Frontend Academy · Lekcja

Obsługa błędów: kody statusu HTTP

Przyporządkuje Pan/Pani kodom statusu HTTP komunikaty widoczne dla użytkownika, rozróżni błędy sieciowe od błędów serwera i zaimplementuje logikę ponawiania prób.

Obsługa błędów: kody statusu HTTP to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Kategorie kodów statusu HTTP

Kody statusu grupuje się według pierwszej cyfry: 2xx oznacza powodzenie, 3xx przekierowanie, 4xx błąd klienta (problem po Twojej stronie), a 5xx błąd serwera (problem po stronie serwera).

Popularne kody 2xx

200 OK: powodzenie z treścią odpowiedzi. 201 Created: zasób został utworzony (często zwracany jest nowy zasób). 204 No Content: powodzenie bez treści odpowiedzi (DELETE, czasami PUT).

Popularne kody 4xx

400 Bad Request: nieprawidłowy format danych wejściowych. 401 Unauthorized: brak uwierzytelnienia lub nieprawidłowe dane uwierzytelniające. 403 Forbidden: użytkownik jest uwierzytelniony, ale nie ma uprawnień. 404 Not Found: zasób nie istnieje. 409 Conflict: konflikt stanu (na przykład zduplikowany adres e-mail). 422 Unprocessable Entity: walidacja się nie powiodła.

Popularne kody 5xx

500 Internal Server Error: ogólny błąd serwera. 502 Bad Gateway: usługa nadrzędna nie zadziałała. 503 Service Unavailable: serwer jest przeciążony lub niedostępny. 504 Gateway Timeout: usługa nadrzędna nie odpowiedziała na czas.

Przekształcanie kodów w komunikaty dla użytkownika

Przekształcaj kody statusu w przydatne komunikaty interfejsu — nigdy nie wyświetlaj użytkownikowi tekstu „Błąd 500”.

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

Błędy sieciowe a błędy serwera

Nieudane fetch (brak połączenia, błąd DNS, CORS) to coś innego niż odpowiedź serwera zawierająca błąd. Błędy sieciowe powodują zgłoszenie wyjątku, a błędy serwera zwracają obiekt Response ze statusem >= 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;
}

Ponawianie dla błędów 5xx i błędów sieciowych

Błędy serwera i awarie sieci są często przejściowe. Ponawiaj żądania z wykładniczym zwiększaniem odstępów.

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

Nie ponawiaj żądań dla błędów 4xx

Błędy 4xx wynikają z problemu po Twojej stronie — ponawianie żądania nie pomoże. Ponawiaj tylko żądania zakończone błędem 5xx oraz nieudane z powodu błędów sieciowych. Wyjątkiem jest 429 (Too Many Requests), któremu często towarzyszy nagłówek Retry-After.

Odczytywanie nagłówka Retry-After

Serwery mogą dołączać Retry-After do odpowiedzi 429 i 503 — przed ponowieniem żądania odczekaj podaną liczbę sekund.

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

Wyświetlanie błędów walidacji

Odpowiedzi 422 zazwyczaj zawierają treść JSON z listą błędów poszczególnych pól. Wyświetlaj je obok odpowiedniego pola formularza.

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

Telemetria: rejestrowanie błędów w usłudze

Wysyłaj błędy do Sentry, Datadog lub LogRocket, aby móc je obserwować na produkcji. Dołącz URL żądania, metodę, status oraz oczyszczoną treść żądania (bez sekretów).

Zapewnij możliwość działania po błędzie

Każdy interfejs błędu powinien wskazywać użytkownikowi dalsze działanie: przycisk ponowienia, odsyłacz do pomocy lub możliwość powrotu do działającej strony. Ekrany błędów bez wyjścia frustrują użytkowników.

Szybkie sprawdzenie

API zwraca 422 Unprocessable Entity. Co to zazwyczaj oznacza?

Podsumowanie: obsługa błędów HTTP

2xx oznacza powodzenie, 3xx przekierowanie, 4xx błąd klienta, a 5xx błąd serwera. Przekształcaj kody w przyjazne dla użytkownika komunikaty. Rozróżniaj błędy sieciowe (TypeError z fetch) od błędów serwera (res.ok false). Ponawiaj żądania zakończone błędem 5xx i nieudane z powodu błędów sieciowych, stosując wykładnicze zwiększanie odstępów; nigdy nie ponawiaj żądań dla błędów 4xx (z wyjątkiem 429 z Retry-After). Wyświetlaj błędy pól dla odpowiedzi 422. Rejestruj błędy w usłudze takiej jak Sentry.

Często zadawane pytania

Czy lekcja „Obsługa błędów: kody statusu HTTP” jest bezpłatna?

Tak — pełny tekst „Obsługa błędów: kody statusu HTTP” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Obsługa błędów: kody statusu HTTP”?

Przyporządkuje Pan/Pani kodom statusu HTTP komunikaty widoczne dla użytkownika, rozróżni błędy sieciowe od błędów serwera i zaimplementuje logikę ponawiania prób. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Obsługa błędów: kody statusu HTTP”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy