Lingua-e
← Errores
JavaScript

Qué significa Error de red en fetch y cómo solucionarlo

Referencia del error

Error de red en fetch

Lenguaje

JavaScript

Severidad

Alta

Cuándo ocurre

fetch() rechaza con un TypeError cuando un fallo a nivel de red impide que la solicitud se complete.

Posibles soluciones

Distingue los errores de red (TypeError) de los errores HTTP (estado no ok). Verifica la URL y asegúrate de que el servidor esté en ejecución. Maneja ambos tipos de error explícitamente. Usa navigator.onLine para proporcionar retroalimentación de UI con conciencia de estado offline.

Errores relacionados

Error CORSUnhandledPromiseRejectionECONNRESET

Más detalles

fetch() rechaza con un TypeError cuando un fallo a nivel de red impide que la solicitud se complete. Esto es diferente de un estado de error HTTP (4xx/5xx): un error de red significa que no se recibió ninguna respuesta. Las causas comunes incluyen el servidor caído, fallo de resolución DNS o un rechazo de preflight CORS.

Por qué ocurre

  • •El servidor no está en ejecución o la URL es inalcanzable.
  • •Una solicitud preflight CORS (OPTIONS) fue rechazada antes de la solicitud principal.
  • •El navegador está sin conexión o la conexión de red se cayó.
  • •Un esquema de URL o nombre de host inválido hace que la resolución DNS falle.

Posibles soluciones

Distingue los errores de red (TypeError) de los errores HTTP (estado no ok). Verifica la URL y asegúrate de que el servidor esté en ejecución. Maneja ambos tipos de error explícitamente. Usa navigator.onLine para proporcionar retroalimentación de UI con conciencia de estado offline.

Ejemplos

JavaScript

Código que causa el error

const data = await fetch("https://localhost:9999/api");
const json = await data.json();

Error en la terminal

TypeError: Failed to fetch

Código corregido

try {
  const res = await fetch("https://api.example.com/data");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const json = await res.json();
} catch (err) {
  if (err instanceof TypeError) {
    console.error("Network error:", err.message);
  } else {
    console.error("API error:", err.message);
  }
}

Practica en inglés

¿Cómo le explicarías un Fetch Network Error a un compañero dev? Elige la frase correcta:

"I hit an error...

¿Listo para practicar tu inglés en el trabajo?

Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.

Prueba Lingua-e gratis