Al consumir una API, es común encontrar errores debido a una variedad de razones, como problemas de red, errores de autenticación o datos mal formateados. Manejar estos errores de manera efectiva es fundamental para garantizar una experiencia de usuario fluida y mejorar la robustez de tu aplicación.
En este artículo, explicaremos cómo manejar errores al consumir APIs y cómo implementar buenas prácticas para gestionarlos correctamente.
Tipos comunes de errores al consumir APIs
Cuando interactúas con una API, puedes encontrar diferentes tipos de errores. Estos errores se pueden dividir en dos categorías principales: errores del lado del cliente y errores del lado del servidor.
Errores del lado del cliente
Estos errores se producen cuando algo está mal con la solicitud que haces a la API. Generalmente están relacionados con la forma en que estructuramos la solicitud o con la falta de ciertos parámetros. Algunos ejemplos incluyen:
- 400 Bad Request: La solicitud tiene un formato incorrecto o le falta un parámetro requerido.
- 401 Unauthorized: La autenticación es incorrecta o falta.
- 403 Forbidden: El usuario no tiene permisos para realizar la acción solicitada.
- 404 Not Found: El recurso al que intentas acceder no existe.
Errores del lado del servidor
Estos errores ocurren cuando el problema está en la API o en el servidor que la aloja. Algunos ejemplos incluyen:
- 500 Internal Server Error: Error general del servidor.
- 502 Bad Gateway: El servidor recibió una respuesta inválida de un servidor upstream.
- 503 Service Unavailable: La API no está disponible temporalmente debido a mantenimiento o problemas del servidor.
- 504 Gateway Timeout: La API no respondió dentro del tiempo esperado.
Estrategias para manejar errores al consumir APIs
1. Comprobar los códigos de estado HTTP
El primer paso para corregir errores es comprobar el código de estado HTTP de la respuesta. Dependiendo del código recibido, puedes decidir qué acción tomar.
Ejemplo en JavaScript con fetch:
fetch(«https://api.ejemplo.com/usuarios»)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(«Error al consumir la API:», error));
En este ejemplo, la función response.ok verifica si el código de estado HTTP es 2xx (indica éxito). Si no es así, comete un error.
2. Manejar los errores de forma específica
En lugar de simplemente registrar el error, es recomendable manejar los diferentes tipos de error de manera específica. Esto mejora la usabilidad de la aplicación y permite ofrecer retroalimentación adecuada al usuario.
Ejemplo de manejo de errores específico:
fetch(«https://api.ejemplo.com/usuarios»)
.then(response => {
if (response.status === 404) {
throw new Error(«Recurso no encontrado.»);
} else if (response.status === 401) {
throw new Error(«No autorizado. Verifica tus credenciales.»);
} else if (!response.ok) {
throw new Error(`Error HTTP: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => {
console.error(«Error:», error.message);
// Aquí puedes mostrar un mensaje amigable al usuario
});
En este caso, se maneja cada código de error de forma distinta y se le proporciona al usuario un mensaje claro y comprensible.
3. Implementar reintentos en caso de errores temporales
A veces, los errores pueden ser temporales, como problemas de red o caídas del servidor. En esos casos, puedes implementar una lógica de reintento para volver a hacer la solicitud después de un corto período de tiempo.
Ejemplo de reintento con fetch:
const fetchWithRetry = (url, retries = 3, delay = 1000) => {
return fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.catch(error => {
if (retries > 0) {
console.log(`Reintentando… (${retries} intentos restantes)`);
return new Promise(resolve => setTimeout(resolve, delay))
.then(() => fetchWithRetry(url, retries – 1, delay));
} else {
throw new Error(«No se pudo realizar la solicitud después de varios intentos.»);
}
});
};
fetchWithRetry(«https://api.ejemplo.com/usuarios»)
.then(data => console.log(data))
.catch(error => console.error(«Error final:», error.message));
Aquí, si la solicitud falla, se reintenta hasta 3 veces con un intervalo de 1 segundo entre cada intento.
4. Proporcionar retroalimentación clara al usuario
Es fundamental que tu aplicación proporciona mensajes de error claros y útiles para el usuario. En lugar de simplemente mostrar el error técnico, proporciona un mensaje amigable que explique lo que sucedió y qué pasos seguir.
Ejemplo de mensaje amigable al usuario:
- Error 401 (Unauthorized): «No tienes acceso a esta área. Por favor, inicia sesión para continuar.»
- Error 500 (Internal Server Error): «Algo salió mal en el servidor. Intenta nuevamente más tarde.»
- Error 404 (Not Found): «No encontramos el recurso que estás buscando.»
5. Manejar errores relacionados con el tiempo de espera (Timeout)
Las solicitudes que tardan mucho en procesarse pueden resultar en un timeout. Es importante definir un tiempo de espera máximo para evitar que tu aplicación quede bloqueada esperando una respuesta indefinidamente.
Ejemplo con fetch y un timeout manual:
const fetchWithTimeout = (url, timeout = 5000) => {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);
return fetch(url, { signal: controller.signal })
.then(response => response.json())
.finally(() => clearTimeout(timeoutId)); // Limpiar el timeout
};
fetchWithTimeout(«https://api.ejemplo.com/usuarios»)
.then(data => console.log(data))
.catch(error => {
if (error.name === «AbortError») {
console.error(«La solicitud excedió el tiempo de espera.»);
} else {
console.error(«Error al consumir la API:», error);
}
});
Conclusión
Manejar errores al consumir APIs es un aspecto crucial para construir aplicaciones robustas y confiables. Asegúrate de verificar los códigos de estado HTTP, manejar los errores de manera específica, implementar reintentos en casos temporales y proporcionar retroalimentación clara al usuario. Siguiendo estas estrategias, podrás mejorar la experiencia de usuario y hacer que tu aplicación sea más resistente a fallos.
