Gestione degli errori: codici di stato HTTP
Associare i codici di stato HTTP ai messaggi mostrati all’utente, distinguere tra errori di rete ed errori del server e implementare la logica di ritentativo
Gestione degli errori: codici di stato HTTP è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Categorie dei codici di stato HTTP
I codici di stato sono raggruppati in base alla prima cifra: 2xx indica un successo, 3xx un reindirizzamento, 4xx un errore del client (il problema dipende dalla richiesta) e 5xx un errore del server (il problema dipende dal server).
Codici 2xx comuni
200 OK: operazione riuscita con corpo della risposta. 201 Created: risorsa creata (spesso restituisce la nuova risorsa). 204 No Content: operazione riuscita senza corpo della risposta (DELETE, talvolta PUT).
Codici 4xx comuni
400 Bad Request: dati di input malformati. 401 Unauthorized: autenticazione mancante o non valida. 403 Forbidden: utente autenticato ma non autorizzato. 404 Not Found: la risorsa non esiste. 409 Conflict: conflitto nello stato (ad esempio, un indirizzo email duplicato). 422 Unprocessable Entity: la convalida non è riuscita.
Codici 5xx comuni
500 Internal Server Error: errore generico del server. 502 Bad Gateway: il servizio upstream non ha funzionato. 503 Service Unavailable: server sovraccarico o non disponibile. 504 Gateway Timeout: il servizio upstream non ha risposto in tempo.
Associare i codici ai messaggi per l'utente
Traduce i codici di stato in messaggi utili per l'interfaccia: non mostri mai 'Error 500' all'utente.
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.';
}Errori di rete ed errori del server
Un fetch non riuscito (assenza di connessione, errore DNS, CORS) è diverso da una risposta di errore del server. Gli errori di rete generano un'eccezione; gli errori del server restituiscono un oggetto Response con 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;
}Logica di retry per errori 5xx e di rete
Gli errori del server e i problemi di rete sono spesso temporanei. Esegua nuovamente la richiesta applicando un backoff esponenziale.
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
}
}Non ripetere le richieste 4xx
Gli errori 4xx dipendono dalla richiesta: ripeterla non servirà. Ripeta la richiesta solo per errori 5xx e problemi di rete. Fa eccezione il codice 429 (Too Many Requests), che spesso include un header Retry-After.
Leggere l'header Retry-After
I server possono includere Retry-After per i codici 429 e 503: attenda il numero di secondi indicato prima di ripetere la richiesta.
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');
}Mostrare gli errori di convalida
Le risposte 422 in genere includono un corpo JSON che elenca gli errori dei campi. Li mostri accanto al campo corrispondente del modulo.
// 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: registrare gli errori in un servizio
Invii gli errori a Sentry, Datadog o LogRocket per poterli visualizzare in produzione. Includa URL della richiesta, metodo, status e un corpo sanificato (senza segreti).
Offrire un recupero efficace
Ogni interfaccia di errore dovrebbe offrire all'utente un modo per procedere: un pulsante per riprovare, un link all'assistenza o un modo per tornare a una pagina funzionante. Le schermate di errore senza via d'uscita frustrano gli utenti.
Verifica rapida
Un'API restituisce 422 Unprocessable Entity. Che cosa significa in genere?
Riepilogo: gestione degli errori HTTP
2xx indica successo, 3xx reindirizzamento, 4xx errore del client e 5xx errore del server. Associ i codici a messaggi comprensibili per l'utente. Distingua gli errori di rete (TypeError generato da fetch) dagli errori del server (res.ok false). Ripeta le richieste in caso di errori 5xx e problemi di rete applicando un backoff esponenziale; non ripeta mai le richieste 4xx (tranne 429 con Retry-After). Mostri gli errori dei campi nelle risposte 422. Registri gli errori in un servizio come Sentry.
Domande Frequenti
La lezione «Gestione degli errori: codici di stato HTTP» è gratuita?
Sì — il testo completo di «Gestione degli errori: codici di stato HTTP» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Gestione degli errori: codici di stato HTTP»?
Associare i codici di stato HTTP ai messaggi mostrati all’utente, distinguere tra errori di rete ed errori del server e implementare la logica di ritentativo Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Gestione degli errori: codici di stato HTTP»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fetch API: GET, POST, PUT e DELETE
- Axios: interceptor e URL di base
- Gestione degli errori: codici di stato HTTP
- SWR e React Query per la memorizzazione nella cache dei dati