preloader

Manejo de Errores con «try…catch» en JavaScript

Manejo de Errores con «try…catch» en JavaScript

En programación, a pesar de nuestros mejores esfuerzos, los errores pueden surgir por diversas razones, como un descuido, una entrada inesperada del usuario, una respuesta incorrecta del servidor, entre otros factores. Normalmente, un script de JavaScript se detiene inmediatamente y muestra el error en la consola. Sin embargo, existe una estructura sintáctica llamada try...catch que permite «atrapar» esos errores y manejar la situación de manera más adecuada.

Sintaxis de “try…catch”

La construcción try...catch consiste en dos bloques principales: try y catch.

				
					try {
  // código...
} catch (err) {
  // manejo del error
}

				
			

Así es como funciona:

  1. Primero, se ejecuta el código dentro del bloque try {...}.
  2. Si no hay errores, se ignora el bloque catch (err) {...} y la ejecución continúa.
  3. Si se produce un error, la ejecución se detiene y pasa al bloque catch (err) {...}, donde la variable err contiene un objeto con detalles del error.

Esto significa que un error dentro del bloque try {...} no detendrá el script por completo; en su lugar, se gestionará dentro del bloque catch.

Ejemplos

Sin errores:

				
					try {
  alert('Inicio del bloque try');  // (1)
  // ...no hay errores aquí
  alert('Fin del bloque try');  // (2)
} catch (err) {
  alert('Se ignora catch porque no hay errores'); // (3)
}

				
			

Con un error:

				
					try {
  alert('Inicio del bloque try');  // (1)
  lalala; // error, la variable no está definida
  alert('Fin del bloque try (nunca se alcanza)');  // (2)
} catch (err) {
  alert('¡Ha ocurrido un error!'); // (3)
}

				
			

Limitaciones de try...catch

  1. Errores de tiempo de ejecución solamente: try...catch solo funciona para errores que ocurren durante la ejecución del código válido de JavaScript, no para errores sintácticos.

				
					try {
  {{{{{{{{{{{{
} catch(err) {
  alert("El código no es válido.");
}

				
			

Errores asíncronos: No puede capturar errores en funciones asíncronas programadas.

				
					try {
  setTimeout(function() {
    noSuchVariable; // el script falla aquí
  }, 1000);
} catch (err) {
  alert("No funcionará");
}

				
			

Para manejar errores en funciones asíncronas, el try...catch debe estar dentro de la función asíncrona.

				
					setTimeout(function() {
  try {
    noSuchVariable; // el try...catch captura el error
  } catch (err) {
    alert("¡Error detectado!");
  }
}, 1000);

				
			

Objeto de Error

Cuando ocurre un error, JavaScript crea un objeto de error con detalles del mismo. Este objeto se pasa al bloque catch:

				
					try {
  // ...
} catch(err) { // `err` es el objeto error
  // ...
}

				
			

Las propiedades principales del objeto de error son:

  • name: Nombre del error (por ejemplo, «ReferenceError»).
  • message: Detalles del error.

Hay otras propiedades como stack, que muestra la pila de llamadas en el momento del error.

Ejemplo:

				
					try {
  lalala; // error, la variable no está definida
} catch (err) {
  alert(err.name); // ReferenceError
  alert(err.message); // lalala no está definida
  alert(err.stack); // Información de la pila de llamadas
}

				
			

Lanzar Nuestros Propios Errores

Podemos lanzar nuestros propios errores usando el operador throw.

				
					throw new Error("Algo salió mal");

				
			

Ejemplo:

				
					let json = '{ "age": 30 }'; // dato incompleto

try {
  let user = JSON.parse(json);

  if (!user.name) {
    throw new SyntaxError("Datos incompletos: falta el nombre");
  }

  alert(user.name);

} catch (err) {
  alert("Error en JSON: " + err.message); // Error en JSON: Datos incompletos: falta el nombre
}

				
			

Relanzando Errores

Si el bloque catch no sabe cómo manejar un error específico, puede relanzarlo:

				
					try {
  user = { /*...*/ };
} catch (err) {
  if (err instanceof ReferenceError) {
    alert('ReferenceError'); // Maneja errores de referencia
  } else {
    throw err; // Relanza errores desconocidos
  }
}

				
			

Bloque Finally

El bloque finally se ejecuta siempre, independientemente de si hubo un error o no:

				
					try {
  alert('Intento (try)');
  if (confirm('¿Generar un error?')) BAD_CODE();
} catch (err) {
  alert('Captura (catch)');
} finally {
  alert('Finalmente (finally)');
}

				
			

Captura Global de Errores

Los navegadores y otros entornos permiten capturar errores no manejados globalmente, como en window.onerror en navegadores.

				
					window.onerror = function(message, url, line, col, error) {
  alert(`${message} en ${line}:${col} de ${url}`);
};

				
			

Resumen

La estructura try...catch permite gestionar errores de tiempo de ejecución en JavaScript. Es importante manejar adecuadamente los errores para mejorar la robustez y la experiencia del usuario. Utilizando try...catch, throw y finally, podemos crear scripts más resistentes y mantener el control sobre los errores que puedan surgir.

				
					try {
  // código a intentar
} catch (err) {
  // manejar el error
} finally {
  // ejecutar siempre, independientemente del resultado
}

				
			

Esta es una herramienta fundamental para manejar errores y asegurar que nuestros programas sean más confiables y fáciles de depurar

Related Post

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *