Manejo de errores en Fetch API: Cómo detectar 404 y 500

Introducción Un error común es asumir que fetch() lanzará una excepción si el servidor responde con un error 404 o 500. En realidad, la promesa solo se rechaza ante fallos de red. Para detectar errores del servidor, debes verificar la propiedad response.ok. Implementar esta validación es vital para evitar estados inconsistentes en tu aplicación.

Solución Rápida (Código)

async function obtenerDatos(url) {
    try {
        const res = await fetch(url);

        if (!res.ok) {
            throw new Error(`Error HTTP: ${res.status}`);
        }

        const data = await res.json();
        return data;
    } catch (error) {
        console.error("Fallo en la petición:", error.message);
    }
}

Explicación técnica La especificación de Fetch API define que la promesa se resuelve exitosamente siempre que el navegador pueda contactar al servidor, independientemente del código de estado HTTP. Esto significa que un error 500 (Internal Server Error) se considera técnicamente una “petición exitosa” desde la perspectiva de la conexión.

Para manejar esto profesionalmente, debemos inspeccionar el booleano response.ok, que es true solo para estados en el rango 200-299. Si es false, es obligatorio lanzar un error manualmente para que sea capturado por el bloque catch. Este patrón asegura que no intentes parsear un JSON de una página de error HTML, lo que causaría un segundo error innecesario. Un manejo robusto de APIs mejora la confiabilidad de tu software y facilita el mantenimiento.

Conclusión Gestionar correctamente las respuestas de tu backend es fundamental para cualquier desarrollador fullstack. Te invitamos a profundizar en el tema con nuestra guía sobre Arquitectura de APIs REST eficientes.