CodeForge

JavaScript de Cero a Experto / Manejo de errores y debugging

La anatomía de un error: leer lo que grita la consola

Teoría20 min20 XP

Ese texto rojo que a veces llena la consola no es un castigo ni un insulto: es el reporte más detallado que vas a recibir en tu carrera. Dice qué pasó, de qué tipo, y el camino exacto hasta el choque. Hoy dejas de temerle y aprendes a leerlo como un forense.

El parte del accidente

Un error es un objeto

Lo primero que rompe el mito: un error no es "texto rojo", es un objeto normal con propiedades. Podemos atraparlo con el try/catch del módulo 10 —ahora en código síncrono— y hurgar dentro:

error.name te dice la FAMILIA del problema, error.message lo explica en palabras, y instanceof te deja preguntar por el tipo exacto (clave para el catch, lo verás en la lección 3). Sin el try/catch, ese mismo error habría detenido el programa en seco —por eso la última línea no se habría impreso.

Las cuatro familias que más vas a ver

Fíjate en el patrón: cada name te orienta antes de leer una palabra del mensaje. "TypeError" → algo es null/undefined o no es función. "ReferenceError" → un nombre mal escrito. Con el tiempo, el name solo ya te dice dónde mirar.

El stack: el camino hasta el choque

El stack es la lista de funciones que estaban en curso cuando todo explotó, de la más reciente (arriba) a la más antigua (abajo). Es un mapa de "cómo llegué hasta aquí":

La primera línea del stack es el lugar EXACTO donde reventó (cobrarComision); las siguientes te cuentan quién la llamó (pagar) y quién llamó a ese. Leer el stack de arriba abajo responde las dos preguntas del debugging: ¿dónde falló? (arriba) y ¿cómo se llegó ahí? (el resto). En las DevTools del navegador cada línea es un enlace que te lleva al código —eso lo explotas en la lección 6.

Escribes usuarios.push(nuevo) pero olvidaste declarar la variable usuarios. ¿Qué error verás?

Mini-reto

Vuélvete cazador de tipos: 1) en un playground, provoca a propósito un TypeError llamando const x = 5; x(); y lee el mensaje; 2) provoca un RangeError con (3).toFixed(200) (demasiados decimales); 3) para cada uno, imprime error.name y comprueba con instanceof que aciertas la familia antes de mirar el mensaje. Entrena el reflejo de predecir el name.

Qué sigue

Ya sabes LEER un error ajeno. El siguiente paso es tomar el control: lanzar tus propios errores cuando algo no cuadra y atraparlos con red. throw, try, catch y el infalible finally —la mecánica completa del manejo de errores.