Comprender los tipos de errores y mensajes de JavaScript

Todo desarrollador de JavaScript ha mirado fijamente un mensaje de error rojo en su consola, preguntándose qué salió mal. Comprender estos tipos de errores no se trata solo de corregir código defectuoso, sino de escribir aplicaciones más confiables y depurar problemas más rápidamente. Cuando sabes qué significa cada error y por qué ocurre, pasas de la depuración reactiva a la prevención proactiva de errores.

¿Qué son los errores de JavaScript?

Los errores de JavaScript son objetos que representan problemas durante la ejecución del código. Cada error contiene una propiedad name que identifica su tipo y una propiedad message que describe qué salió mal. Estos no son fallos aleatorios, son retroalimentación estructurada sobre problemas específicos en tu código.

Los ocho tipos de errores nativos

SyntaxError: rompiendo las reglas

Un SyntaxError ocurre cuando JavaScript no puede analizar tu código debido a una sintaxis inválida. El intérprete se detiene antes de que comience la ejecución.

// Missing closing parenthesis
console.log("Hello World");
// SyntaxError: missing ) after argument list

// Invalid JSON parsing
JSON.parse("{'invalid': 'json'}");
// SyntaxError: Unexpected token ' in JSON at position 1

Las causas comunes incluyen corchetes faltantes, cadenas sin cerrar o JSON mal formado. Estos errores impiden que tu código se ejecute en absoluto.

ReferenceError: usando lo indefinido

Un ReferenceError ocurre cuando intentas acceder a una variable que no existe en el ámbito actual.

console.log(userName);
// ReferenceError: userName is not defined

function greet() {
  let message = "Hello";
}
greet();
console.log(message);
// ReferenceError: message is not defined

Esto típicamente resulta de errores tipográficos, acceso a variables antes de su declaración o confusión de ámbito.

TypeError: operaciones de tipo incorrecto

Un TypeError ocurre cuando realizas una operación en un tipo incompatible, como llamar a algo que no es una función o acceder a propiedades en null o undefined.

const num = 42;
num();
// TypeError: num is not a function

const user = null;
console.log(user.name);
// TypeError: Cannot read properties of null (reading 'name')

Estos se encuentran entre los errores de tiempo de ejecución más comunes en aplicaciones JavaScript.

RangeError: fuera de límites

Un RangeError señala que un valor excede su rango permitido.

const arr = new Array(-1);
// RangeError: Invalid array length

const num = 1;
num.toPrecision(101);
// RangeError: toPrecision() argument must be between 1 and 100

Ten cuidado con estos al trabajar con constructores de arrays, métodos numéricos o funciones recursivas que exceden la pila de llamadas.

URIError: URIs mal formadas

Un URIError aparece cuando las funciones de codificación o decodificación de URI reciben parámetros inválidos.

decodeURIComponent('%');
// URIError: URI malformed

encodeURI('\uD800');
// URIError: URI malformed

Estos errores surgen al manejar URLs con caracteres especiales o codificación de porcentaje incompleta.

EvalError: problemas con eval()

Aunque EvalError existe en la especificación, el JavaScript moderno no lo lanza. Permanece por compatibilidad hacia atrás. Los problemas históricos con eval() activarían este tipo de error.

AggregateError: múltiples fallos

Un AggregateError envuelve múltiples errores en un solo objeto, particularmente útil con Promise.any().

Promise.any([
  Promise.reject(new Error("First failure")),
  Promise.reject(new Error("Second failure"))
]).catch(err => {
  console.log(err instanceof AggregateError); // true
  console.log(err.errors); // Array of individual errors
});

InternalError: límites del motor

Un InternalError (no estándar, específico de Firefox) ocurre cuando el motor de JavaScript alcanza límites internos.

function recursiveFunction() {
  recursiveFunction();
}
recursiveFunction();
// InternalError: too much recursion (Firefox)
// RangeError: Maximum call stack size exceeded (Chrome)

Manejo de excepciones con try…catch

JavaScript proporciona manejo de excepciones estructurado a través de las declaraciones try, catch, finally y throw.

try {
  // Code that might throw an error
  const data = JSON.parse(userInput);
  processData(data);
} catch (error) {
  if (error instanceof SyntaxError) {
    console.error("Invalid JSON format:", error.message);
  } else if (error instanceof TypeError) {
    console.error("Data processing error:", error.message);
  } else {
    // Re-throw unknown errors
    throw error;
  }
} finally {
  // Cleanup code runs regardless
  closeConnections();
}

La declaración throw crea errores personalizados:

function validateAge(age) {
  if (age < 0) {
    throw new RangeError("Age cannot be negative");
  }
  if (typeof age !== 'number') {
    throw new TypeError("Age must be a number");
  }
  return age;
}

Mejores prácticas para el manejo de errores

Usa tipos de error específicos al lanzar errores personalizados. En lugar de objetos Error genéricos, lanza TypeError para problemas de tipo o RangeError para violaciones de límites.

Maneja los errores en el nivel correcto. No envuelvas cada función en try-catch. Maneja los errores donde puedas responder a ellos de manera significativa.

Preserva el contexto del error al relanzar:

try {
  riskyOperation();
} catch (error) {
  // Add context without losing original stack trace
  error.message = `Failed during user ${userId} operation: ${error.message}`;
  throw error;
}

Crea clases de error personalizadas para problemas específicos del dominio:

class ValidationError extends Error {
  constructor(field, value) {
    super(`Invalid value for ${field}: ${value}`);
    this.name = 'ValidationError';
    this.field = field;
    this.value = value;
  }
}

Depuración efectiva de errores de JavaScript

Los navegadores modernos proporcionan excelentes herramientas de depuración. El stack trace muestra la ruta de ejecución que conduce a un error. Usa puntos de interrupción para pausar la ejecución antes de que ocurran los errores. Los mensajes de error de la consola a menudo incluyen el número de línea exacto y el archivo.

Para aplicaciones en producción, implementa manejadores de errores globales:

window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  // Send to error tracking service
});

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise rejection:', event.reason);
});

Conclusión

Comprender los tipos de errores de JavaScript transforma la depuración de conjeturas en resolución sistemática de problemas. Cada tipo de error, desde SyntaxError hasta AggregateError, te dice exactamente qué salió mal y dónde buscar. Combinado con el manejo de excepciones adecuado usando bloques try-catch y mensajes de error significativos, puedes construir aplicaciones que fallen con elegancia y proporcionen retroalimentación clara cuando surjan problemas. La clave no es evitar todos los errores, sino manejarlos inteligentemente cuando ocurren.

Preguntas frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.