Skip to content

Cómo manejar errores en JavaScript: Trucos y Consejos para utilizar Try Catch de manera eficiente

Try-catch en JavaScript es una técnica de manejo de errores que permite a los programadores controlar y gestionar excepciones (errores) de manera ordenada. El bloque "try" contiene el código que se desea ejecutar y que puede generar una excepción. Si una excepción es generada en el bloque "try", el código dentro del bloque "catch" será ejecutado y recibirá un objeto con información sobre el error, permitiendo al programador tomar decisiones específicas para manejar esa excepción.

El try-catch es útil para evitar que un programa se detenga abruptamente debido a un error, y en su lugar, permitir que el programador decida cómo manejarlo.

Un ejemplo de cómo utilizar try-catch en JavaScript podría ser el siguiente:

js
try {
  // código que puede lanzar una excepción
  const x = y + 1;
} catch (error) {
  // código que se ejecuta si se lanza una excepción
  console.error("Ocurrió un error: " + error);
}

En este ejemplo, el código dentro del bloque try intenta asignar el valor de "y + 1" a la variable "x". Si "y" no está definido, esto lanzará una excepción de "ReferenceError". El código dentro del bloque catch se ejecutará entonces y mostrará un mensaje en la consola indicando que ocurrió un error.

El catch recibe un parametro llamado error que contiene información acerca del error que ocurrió, como el nombre del error y el mensaje.

En este ejemplo se esta recogiendo el error y mostrando el mensaje pero se podría implementar cualquier acción adicional para manejar el error.

¿Qué provoca una excepción?

Hay varias cosas que pueden provocar una excepción (error) en un bloque try-catch. Algunas de las más comunes son:

  • Errores de sintaxis en el código
  • Referencias a variables o funciones que no existen
  • Problemas con el acceso a archivos o bases de datos
  • Problemas con el uso de APIs externas
  • Problemas con el manejo de memoria
  • Errores de lógica en el código.
  • Errores de red o de servidor en una petición fetch o axios
  • En general, cualquier cosa que cause que el código no pueda continuar su ejecución normalmente y cause una interrupción en el flujo de la aplicación puede generar una excepción.

¿Excepción?

En el contexto de try-catch, una excepción es un evento que interrumpe el flujo normal de la ejecución del programa. Puede ser causado por un error o una situación inesperada, como una violación de acceso a memoria o una llamada a una función no definida.

Cuando una excepción es lanzada, el intérprete de JavaScript busca un bloque catch correspondiente para manejarla. Si no se encuentra un bloque catch, la excepción se propagará a través del código hasta que sea manejada o cause que el programa termine su ejecución.

El manejo de excepciones con try-catch permite a los desarrolladores escribir código que pueda recuperarse de errores y continuar ejecutándose en lugar de detenerse completamente.

throw

Es posible provocar una excepción manualmente en JavaScript utilizando la palabra clave: "throw".

Puedes crear una nueva instancia de la clase "Error" o utilizar cualquier otro objeto que tenga una propiedad "message" y luego lanzarlo usando la palabra clave "throw". Por ejemplo:

js
function dividir(num1, num2) {
  if (num2 === 0) {
    throw new Error("No se puede dividir por cero.");
  }
  return num1 / num2;
}

try {
  const resultado = dividir(10, 0);
  console.log(resultado);
} catch (error) {
  console.log("Ocurrió un error: " + error.message);
}

En este ejemplo, se tiene una función "dividir" que toma dos números como argumentos y devuelve el resultado de la división. Dentro de la función, se verifica si el segundo argumento es cero, y si lo es, se lanza una excepción utilizando la palabra reservada "throw" y un objeto "Error" con un mensaje específico.

Luego, en el código fuera de la función, se intenta llamar a la función "dividir" con los valores 10 y 0. Como se esperaba, esto lanza una excepción, ya que se está intentando dividir por cero. El código dentro del bloque catch se ejecuta entonces y muestra un mensaje en la consola indicando que ocurrió un error.

Es importante tener en cuenta que el throw no es necesario que sea siempre un error, puede ser un objeto personalizado para indicar cualquier tipo de excepción:

js
function dividir(num1, num2) {
  if (num2 === 0) {
    throw { msg: "No se puede dividir por cero.", codigo: 0 };
  }
  return num1 / num2;
}

try {
  const resultado = dividir(10, 0);
  console.log(resultado);
} catch (error) {
  console.log(error.msg, error.codigo);
}

try catch fecth

El uso más común es utilizar en conjunto con fetch para manejar los errores de red o de servidor, aquí un ejemplo simplificado:

js
const getData = async (url) => {
  try {
    const response = await fetch(url);

    if (!response.ok) throw { msg: response.statusText, code: response.status };

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
};

getData("https://jsonplaceholder.typicode.com/todos/1");

Aquí un ejemplo más robusto, aunque en estos casos yo recomendaría utilizar axios que es una librería que facilita el manejo de peticiones http:

js
const getData = async (url) => {
  try {
    if (!url) throw { msg: "URL is required" };
    if (!window.fetch)
      throw { msg: "Fetch API is not supported by your browser" };

    const response = await fetch(url);

    if (!response.ok) throw { msg: response.statusText, code: response.status };
    if (!response.headers.get("content-type").includes("application/json"))
      throw { msg: "Response is not a JSON", code: 666 };

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
};

getData("https://jsonplaceholder.typicode.com/todos/1");

¿try catch siempre?

El uso excesivo de try-catch puede tener un impacto en el rendimiento de tu aplicación, ya que cada vez que se lanza una excepción, el motor JavaScript tiene que realizar una serie de operaciones para buscar y manejar esa excepción. Estas operaciones pueden agregar cierta sobrecarga al rendimiento de tu aplicación.

Sin embargo, es importante tener en cuenta que el impacto en el rendimiento de un solo bloque try-catch es mínimo, y probablemente no será perceptible para la mayoría de las aplicaciones. El impacto en el rendimiento real de tu aplicación dependerá de varios factores, como la cantidad de excepciones que se están lanzando, la complejidad del código dentro del bloque catch, y la cantidad de veces que se está ejecutando el bloque.

En general, si utilizas try-catch de manera razonable y en áreas donde es realmente necesario, el impacto en el rendimiento de tu aplicación probablemente será mínimo. Sin embargo, es importante medir el rendimiento de tu aplicación en diferentes escenarios para asegurarte de que el uso de try-catch no esté afectando significativamente el rendimiento.

try-catch de manera adecuada

Aquí te doy algunos consejos para utilizar bloques try-catch de manera adecuada en tu aplicación:

  • Utiliza try-catch solo para manejar errores que no pueden ser prevenidos mediante otras técnicas. Por ejemplo, si puedes validar los datos de entrada y las condiciones de ejecución antes de que ocurra un error, no es necesario utilizar try-catch.
  • Utiliza try-catch solo para manejar errores que son relevantes para tu aplicación. Por ejemplo, si un error ocurre en una biblioteca de terceros que no tiene ningún efecto en tu aplicación, no es necesario utilizar try-catch.
  • Utiliza bloques try-catch solo en las funciones que necesitan manejar errores. No es necesario utilizar bloques try-catch en todas las funciones de tu aplicación.
  • Utiliza bloques try-catch solo para manejar errores que pueden ser recuperados. Por ejemplo, si un error ocurre y no es posible recuperar el estado de la aplicación, no es necesario utilizar try-catch.
  • Utiliza try-catch para manejar errores de manera específica. Por ejemplo, si un error ocurre, utiliza un bloque catch para manejar ese error específico y no manejar todos los errores de la misma manera.
  • Utiliza finally para limpiar recursos, si es necesario.
  • Utiliza async-await para manejar operaciones asíncronas de manera más legible y sencilla, en vez de utilizar promesas con .then y .catch.

Siguiendo estos consejos, podrás utilizar bloques try-catch de manera adecuada en tu aplicación, manejar los errores de manera eficiente y evitar aumentar la complejidad del código.