El Atributo ONERROR

El atributo onerror es un evento de JavaScript que se activa cuando ocurre un error al cargar un recurso (como imágenes, scripts, archivos multimedia) o durante su ejecución. Es fundamental para manejar fallos de carga, proporcionar contenido alternativo y mejorar la resiliencia de una aplicación web.

¿Qué hace onerror?

• Disparador: Cuando ocurre un error en:

  • Carga de recursos: <img>, <script>, <link>, <audio>, <video>.

  • Ejecución de scripts (errores en tiempo de ejecución).

• Usos principales:

  • Mostrar contenido alternativo si un recurso falla.

  • Registrar errores para diagnóstico.

  • Cargar recursos de respaldo automáticamente.

Sintaxis básica

Como atributo HTML (inline):

<!-- Ejemplo en imagen -->
<img src="imagen.jpg" onerror="this.src='imagen-respaldo.jpg'">

Con JavaScript (recomendado para más control):

// Ejemplo en script
const script = document.createElement("script");
script.src = "https://cdn.ejemplo.com/script.js";
script.onerror = () => {
  console.error("Error al cargar el script");
  cargarScriptRespaldo();
};
document.head.appendChild(script);

Ejemplos prácticos

Ejemplo 1: Imagen de respaldo

<img src="foto-perfil.jpg" alt="Foto de perfil" 
  onerror="this.onerror=null; this.src='imagen-default.png'">

this.onerror = null: Evita bucles infinitos si el respaldo también falla.

Ejemplo 2: Manejar errores en scripts

<script src="https://cdn.ejemplo.com/library.js" onerror="cargarRespaldo()">
</script>

<script>
  function cargarRespaldo() {
    const script = document.createElement("script");
    script.src = "/local/library-respaldo.js";
    document.head.appendChild(script);
  }
</script>

Ejemplo 3: Error en video/audio

<video controls>
  <source src="video.mp4" type="video/mp4" onerror="manejarErrorVideo(event)">
  Tu navegador no soporta video.
</video>

<script>
  function manejarErrorVideo(e) {
    console.error("Error en video:", e.target.error);
    e.target.innerHTML = `<source src="respaldo.mp4" type="video/mp4">`;
    e.target.load();
  }
</script>

Propiedades clave del evento error

Cuando se usa con JavaScript, el objeto event contiene información útil:

• event.message: Descripción del error (no siempre disponible).

• event.filename: Ruta del recurso que falló.

• event.lineno: Número de línea donde ocurrió el error (para scripts).

window.onerror = (mensaje, url, linea) => {
  console.error(`Error: ${mensaje} en ${url}:${linea}`);
  return true; // Evita que el error se muestre en la consola del navegador
};

Diferencias clave entre elementos

Elemento	Comportamiento de onerror
<img>	Se activa si la imagen no carga (ej: 404, formato inválido).
<script>	Error al cargar/ejecutar el script.
<video>/<audio>	Fallo de carga, formato no soportado, red interrumpida.
Global (window)	Captura errores no manejados en la ejecución de JS.

Mejores prácticas

Evitar bucles infinitos:

En imágenes, restablece onerror a null después de manejar el error:

<img src="imagen.jpg" onerror="this.onerror=null; this.src='respaldo.jpg'">

Registrar errores en servidores:

window.onerror = (mensaje, url, linea) => {
  fetch("/log-error", {
    method: "POST",
    body: JSON.stringify({ mensaje, url, linea })
  });
};

Proporcionar alternativas accesibles:

• Usa <noscript> para contenido alternativo.

• Combina onerror con alt en imágenes.

Casos avanzados

Precargar recursos con manejo de errores:

function cargarRecurso(url, respaldo) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = url;
    img.onload = () => resolve(img);
    img.onerror = () => {
      img.src = respaldo;
      resolve(img);
    };
  });
}

// Uso:
cargarRecurso("banner.jpg", "banner-default.jpg")
  .then(img => document.body.appendChild(img));

Monitor de errores en tiempo real:

// Captura todos los errores no controlados
window.addEventListener("error", (event) => {
  const { message, filename, lineno, colno, error } = event;
  console.error(`Error: ${message} en ${filename}:${lineno}:${colno}`);
  if (error.stack) console.error("Stack trace:", error.stack);
});

Errores comunes

<!-- MAL: Bucle infinito si el respaldo también falla -->
<img src="imagen.jpg" onerror="this.src='respaldo.jpg'">

<!-- CONFUSIÓN: No distinguir entre tipos de errores -->
<script onerror="alert('Error genérico')"></script>

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Todas versiones
Firefox	✅ Todas versiones
Safari	✅ Sí (v. 5+)
Edge	✅ Todas versiones
Móviles	✅ Sí (iOS/Android)

Conclusión

El atributo onerror es esencial para:

• Manejar errores de carga de recursos de manera elegante.
• Mejorar la experiencia del usuario con contenido alternativo.
• Diagnosticar problemas en producción mediante registro de errores.

Recuerda:

1. Evita bucles infinitos al usar recursos de respaldo.
2. Combina con otros métodos (como <noscript>) para accesibilidad.
3. Usa registros de errores para mantener tu aplicación saludable.

¡Ahora puedes crear aplicaciones web más robustas y tolerantes a fallos!