Manejo de errores: códigos de estado HTTP
Asigne códigos de estado HTTP a mensajes para el usuario, distinga entre errores de red y errores del servidor e implemente una lógica de reintento.
Manejo de errores: códigos de estado HTTP es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Categorías de códigos de estado HTTP
Los códigos de estado se agrupan según su primer dígito: 2xx, éxito; 3xx, redirección; 4xx, error del cliente (es responsabilidad suya); 5xx, error del servidor (es responsabilidad del servidor).
Códigos 2xx habituales
200 OK: éxito con cuerpo. 201 Created: recurso creado (a menudo devuelve el recurso nuevo). 204 No Content: éxito sin cuerpo (DELETE, a veces PUT).
Códigos 4xx habituales
400 Bad Request: datos de entrada con formato incorrecto. 401 Unauthorized: falta la autenticación o no es válida. 403 Forbidden: autenticación válida, pero sin permisos. 404 Not Found: el recurso no existe. 409 Conflict: conflicto de estado (correo electrónico duplicado). 422 Unprocessable Entity: la validación ha fallado.
Códigos 5xx habituales
500 Internal Server Error: fallo genérico del servidor. 502 Bad Gateway: ha fallado un servicio ascendente. 503 Service Unavailable: el servidor está sobrecargado o fuera de servicio. 504 Gateway Timeout: el servicio ascendente no respondió a tiempo.
Asignar códigos a mensajes para el usuario
Convierta los códigos de estado en mensajes útiles para la interfaz; nunca muestre «Error 500» al usuario.
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.';
}Errores de red frente a errores del servidor
Una solicitud fetch fallida (sin conexión, fallo de DNS o CORS) es distinta de una respuesta de error del servidor. Los errores de red lanzan excepciones; los errores del servidor devuelven un objeto Response con un estado >= 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;
}Lógica de reintento para errores 5xx y de red
Los errores del servidor y los fallos de red suelen ser transitorios. Reintente utilizando un backoff exponencial.
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
}
}No reintente los errores 4xx
Los errores 4xx son responsabilidad del cliente; reintentar no ayudará. Reintente únicamente los errores 5xx y los fallos de red. La excepción es 429 (Too Many Requests), que a menudo incluye una cabecera Retry-After.
Leer la cabecera Retry-After
Los servidores pueden incluir Retry-After en las respuestas 429 y 503; espere esa cantidad de segundos antes de reintentar.
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');
}Mostrar los errores de validación
Las respuestas 422 suelen incluir un cuerpo JSON con una lista de errores por campo. Muéstrelos junto al campo correspondiente del formulario.
// 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);
});
}Telemetría: registrar errores en un servicio
Envíe los errores a Sentry, Datadog o LogRocket para poder consultarlos en producción. Incluya la URL de la solicitud, el método, el estado y un cuerpo depurado (sin secretos).
Ofrecer una recuperación útil
Toda interfaz de error debe ofrecer al usuario una forma de avanzar: un botón para reintentar, un enlace al servicio de soporte o una forma de volver a una página funcional. Las pantallas de error sin salida frustran a los usuarios.
Comprobación rápida
Una API devuelve un error 422 Unprocessable Entity. ¿Qué significa normalmente?
Resumen: gestión de errores HTTP
2xx indica éxito, 3xx redirección, 4xx error del cliente y 5xx error del servidor. Asigne los códigos a mensajes comprensibles para el usuario. Distinga los errores de red (TypeError de fetch) de los errores del servidor (res.ok es false). Reintente los errores 5xx y los fallos de red mediante backoff exponencial; nunca reintente los errores 4xx (salvo el 429 con Retry-After). Muestre los errores de campo de las respuestas 422. Registre los errores en un servicio como Sentry.
Preguntas frecuentes
¿La lección «Manejo de errores: códigos de estado HTTP» es gratis?
Sí — el texto completo de «Manejo de errores: códigos de estado HTTP» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Manejo de errores: códigos de estado HTTP»?
Asigne códigos de estado HTTP a mensajes para el usuario, distinga entre errores de red y errores del servidor e implemente una lógica de reintento. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Manejo de errores: códigos de estado HTTP»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fetch API: GET POST PUT DELETE
- Axios: interceptores y URL base
- Manejo de errores: códigos de estado HTTP
- SWR y React Query para el almacenamiento en caché de datos