Manejo de errores en JavaScript

Cuando desarrollamos una aplicación en JavaScript, hay algo que siempre va a ocurrir tarde o temprano: los errores. Pueden aparecer por fallos en nuestro código, por entradas inesperadas del usuario o por respuestas incorrectas de una API. En mi experiencia, una buena aplicación no es la que nunca falla, sino la que sabe manejar los errores de forma clara y controlada, mostrando mensajes útiles y evitando que todo se rompa.

En esta guía te voy a explicar cómo funciona el manejo de errores en JavaScript, desde lo más básico hasta casos reales que te encontrarás en proyectos reales, con ejemplos claros y buenas prácticas.

¿Qué son los errores en JavaScript y por qué ocurren?

Un error en JavaScript es una situación que impide que el programa se ejecute correctamente. Cuando ocurre, el motor de JavaScript detiene la ejecución normal y genera un objeto Error con información sobre lo que ha fallado.

En la práctica, los errores suelen aparecer por dos grandes motivos:

Errores del programador vs errores del usuario

• Errores del programador: variables mal escritas, funciones inexistentes, errores de sintaxis, tipos incorrectos, etc.
• Errores del usuario o del entorno: datos mal introducidos, formularios incompletos, JSON mal formado, fallos de red, respuestas inesperadas de una API.

Los errores del usuario deben preverse y manejarse, mientras que los errores de programación deben ayudarnos a depurar y mejorar el código.

Tipos de errores en JavaScript que debes conocer

JavaScript incluye varios tipos de errores integrados. Conocerlos te ayudará a identificar rápidamente qué está fallando.

ReferenceError, TypeError y SyntaxError

Los más comunes son:

• ReferenceError: ocurre cuando intentas usar una variable que no existe.

  • console.log(variableInexistente);

• TypeError: aparece cuando usas un valor de un tipo incorrecto.

  • let num = null;
    num.toFixed(2);

• SyntaxError: se produce cuando el código no tiene una sintaxis válida.

  • let x = ;

Errores comunes en aplicaciones reales

En aplicaciones reales es muy habitual encontrarse con:

• Acceder a propiedades de undefined o null
• Procesar JSON incorrecto
• Llamar métodos que no existen
• Manejar datos asíncronos que aún no han llegado

Por eso el manejo de errores no es opcional: es parte del diseño de la aplicación.

Cómo funciona try…catch en JavaScript

Para manejar los errores de JavaScript, use try and catch. Escribir el código try-catch para manejar el error es así:

try {
    // code
} catch (error) {
    // error handling
}

Primero se ejecuta el bloque try:

• Si no ocurre ningún error, el bloque catch se ignora.
• Si ocurre un error, la ejecución del try se detiene y se pasa directamente al catch.

try {
    console.log("first blok try");
    console.log("last blok try");
} catch (error) {
    console.log("No error occurs, then this code is ignored");
}
 
/* output
first blok try
last blok try
*/

El código del bloque try anterior no devolverá un error, por lo que el código del bloque catch se ignorará y no se ejecutará. 

Qué pasa cuando ocurre un error dentro del bloque try:

El siguiente es un ejemplo de código que genera un error:

try {
    console.log("First blok try");   // (1)
    errorCode;                      // (2)
    console.log("Last blok try");  // (3)
} catch (error) {
    console.log("An error occurred!");  // (4)
}
 
/* output
First blok try
An error occurred!
*/

La línea de código (2) producirá un error. Se detendrá la ejecución del código dentro del bloque de prueba, por lo que la línea de código (3) no se ejecutará. Luego, el código continuará hasta la línea (4) o el bloque catch.

Ahora considere el bloque catch. Hay catch tiene un parámetro llamado error (el nombre de la variable se puede cambiar). Una variable de error es un objeto que almacena información detallada sobre el error que ocurrió.

El objeto de error tiene varias propiedades principales, a saber:

• name: El nombre del error que ocurrió.
• message: Mensaje sobre los detalles del error.
• pila: Información sobre la secuencia de eventos que causaron el error. Generalmente se usa para la depuración porque contiene información sobre qué línea causó el error.

Ahora intentemos modificar el código y mostrar la propiedad de error anterior.

try {
    console.log("First blok try");   // (1)
    errorCode;                      // (2)
    console.log("Last blok try");  // (3)
} catch (error) {
    console.log(error.name);
    console.log(error.message);
    console.log(error.stack);
}
 
/* output
Awal blok try
ReferenceError
errorCode is not defined
ReferenceError: errorCode is not defined
    at file:///home/dicoding/Playground/javascript/CoffeeMachine/error.js:3:5
    at ModuleJob.run (internal/modules/esm/module_job.js:152:23)
    at async Loader.import (internal/modules/esm/loader.js:166:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)
*/

De la información anterior, podemos saber que el error que aparece es ReferenceError porque errorCode se considera una variable o valor indefinido.

try…catch…finally: cuándo y por qué usar finally

Además de intentar y atrapar, hay un bloque más en el mecanismo de manejo de errores en JavaScript, a saber, finalmente. El bloque finalmente seguirá ejecutándose independientemente del resultado del bloque try-catch.

try {
    console.log("First blok try");
    console.log("Last blok try");
} catch (error) {
    console.log("This line is ignored");
} finally {
    console.log("Will still be executed");
}
 
/* output
First blok try
Last blok try
Will still be executed
*/

El bloque finally se ejecuta siempre, haya error o no. Es especialmente útil para:

• Cerrar conexiones
• Liberar recursos
• Mostrar mensajes finales
• Medir tiempos de ejecución

Incluso si hay un return o un throw, finally se ejecutará antes.

Lanzar errores personalizados con throw

Hay situaciones en las que el código no falla por sí solo, pero lógicamente algo está mal. En esos casos podemos lanzar nuestros propios errores con throw.

Manejo de errores en JSON y APIs

let json = '{ "name": "Johon", "age": 20 }';
 
try {
    let user = JSON.parse(json);
 
    console.log(user.name);
    console.log(user.age);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}

En el código anterior, la función JSON.parse analizará o convertirá la variable JSON (String) en un objeto. Nos encontraremos con muchos escenarios como el anterior cuando hagamos solicitudes a la API.

Ejecute el código anterior en su editor de texto. La aplicación debería funcionar sin problemas y sin causar errores.

Entonces, ¿qué sucede si la cadena JSON no coincide con el formato del objeto JavaScript?

try {
    let user = JSON.parse(json);
 
    console.log(user.name);
    console.log(user.age);
} catch (error) {
    console.log(error.name);
    console.log(error.message);
}
 
 
/* output
SyntaxError
Unexpected token b in JSON at position 2
*/

Si el JSON no coincide con el formato, JSON.parse generará un error. El bloque catch detectará el error y se ejecutará el código que contiene.

Manejo de errores en promesas y async/await

Con código asíncrono, el manejo de errores cambia ligeramente.

.catch() vs try…catch en funciones async

Con promesas:

fetch(url)
 .then(res => res.json())
 .catch(error => console.log(error));

Con async/await:

async function obtenerDatos() {
 try {
   const res = await fetch(url);
   const data = await res.json();
   console.log(data);
 } catch (error) {
   console.log("Error en la petición");
 }
}

Personalmente prefiero async/await con try...catch porque el código es más lineal y fácil de leer, especialmente cuando la lógica crece.

Buenas prácticas para el manejo de errores en JavaScript

• Después de trabajar con muchos errores (más de los que me gustaría admitir), estas son algunas prácticas clave:
• Mensajes claros para el usuario
  • No muestres mensajes técnicos como “TypeError: undefined is not a function”.
    Traduce el error a algo entendible: “Ocurrió un problema al procesar los datos”.
• Errores silenciosos vs errores críticos
  • Errores críticos → notificar al usuario
  • Errores menores → registrar y continuar
• Además, evita bloques catch vacíos. Si capturas un error, haz algo con él, aunque sea registrarlo.

Preguntas frecuentes sobre manejo de errores en JavaScript

• ¿Qué es el manejo de errores en JavaScript?
  • Es el conjunto de técnicas para detectar, controlar y responder a errores sin que la aplicación falle.
• ¿Para qué sirve try…catch?
  • Permite capturar errores de ejecución y manejar el flujo del programa cuando algo falla.
• ¿Cuál es la diferencia entre error y excepción?
  • Un error es el objeto; una excepción es ese error cuando se lanza con throw.
• ¿Cómo manejar errores en código asíncrono?
  • Usando .catch() en promesas o try...catch dentro de funciones async.

Conclusión

El manejo de errores en JavaScript no es solo una cuestión técnica, sino una parte esencial de la experiencia del usuario. En lugar de evitar los errores, debemos anticiparlos, controlarlos y comunicar lo que ocurre de forma clara. Cuando entiendes bien try...catch, throw y el objeto Error, tus aplicaciones se vuelven mucho más robustas y profesionales.