Errores en JavaScript y cómo solucionarlos

9 noviembre, 2015 3:07 por

Esta es una traducción del artículo original publicado en el blog de David Walsh. Traducción por Marisol García Obando.

JavaScript puede ser una pesadilla para depurar. Algunos errores pueden darnos muchos problemas difíciles de entender al inicio, y los números de línea no son siempre de mucha ayuda. ¿No sería útil tener una lista donde puedes ver qué significan y cómo solucionarlos? ¡Aquí la tienes!

A continuación está una lista de errores extraños en JavaScript. Diferentes navegadores pueden dar diferentes mensajes por el mismo error, así que hay varios ejemplos diferentes según el caso.

¿Cómo leer errores?

Antes de la lista, demos un vistazo rápido a la estructura de un mensaje de error. Comprender la estructura ayuda a entender los errores y podrás tener menos problemas si llegas a tener cualquier error que no esté en la lista.

Un típico error en Chrome se ve así:

Uncaught TypeError: undefined is not a function

La estructura de el error es la siguiente:

  1. Uncaught TypeError: Esta parte del mensaje usualmente no es muy útil. “Uncaught” significa que el error no fue capturado en una sentencia catch  y  TypeError es el nombre del error.
  2. undefined is not a function: Esta es otra parte del mensaje. Los mensajes de error hay que leerlos muy literalmente. Por ejemplo en este caso es literal el significado, que el código intentó usar undefined como una función.

Otros navegadores basados en webkit como Safari dan errores en un formato similar a Chrome. Los errores del Firefox son similares, pero no siempre incluyen la primera parte, y recientes versiones de Internet Explorer pueden dar errores más simples que Chrome — pero en este caso, simple no siempre significa mejor.

Ahora sobre los errores reales.

Uncaught TypeError: undefined is not a function

Errores relacionados: number is not a function, object is not a function, string is not a function, Unhandled Error: ‘foo’ is not a function, Function Expected

Ocurre cuando intentamos llamar un valor como una función, donde el valor no es una función.

Por ejemplo:

var foo = undefined;
foo();

Este error se produce habitualmente si tratas de llamar a una función en un objeto, pero  has escrito el nombre equivocado.

var x = document.getElementByID('foo');

Nota que “ID” está capitalizado incorrectamente.

Desde las propiedades de un objeto que no existen son undefined por defecto, como resultado de lo anterior se da este error.

Las otras variaciones tales como number is not a function ocurren cuando se intenta llamar a un número como  si fuera una función.

Cómo solucionar estos errores: Asegúrate que el nombre de la  función es correcto. Con este error, el número de línea usualmente apunta a la localización correcta.

Uncaught ReferenceError: Invalid left-hand side in assignment

Errores relacionados: Uncaught exception: ReferenceError: Cannot assign to ‘functionCall()’, Uncaught exception: ReferenceError: Cannot assign to ‘this’

Causado por intentar asignar un valor a algo que no se le puede ser asignado.

El ejemplo más común de este error es con las cláusulas if:

if(doSomething() = 'somevalue')

En este ejemplo, el programador accidentalmente usó un solo operador de igualdad en lugar del doble (==). El mensaje left-hand side in assignment se refiere a la parte del lado izquierdo del signo igual, tal como se puede ver en el ejemplo anterior, el lado izquierdo contiene algo que no se puede asignar, lo que lleva al error.

Cómo solucionar este error: Asegúrate de no estar intentando asignar un valor al resultado de una función o a la palabra clave this.

Uncaught TypeError: Converting circular structure to JSON

Errores relacionados: Uncaught exception: TypeError: JSON.stringify: Not an acyclic Object, TypeError: cyclic object value, Circular reference in value argument not supported

Esto siempre es causado por una referencia circular en un objeto, que se pasa después a JSON.stringify.

var a = { };

var b = { a: a };

a.b = b;

JSON.stringify(a);

Debido a que tanto a y b en el ejemplo anterior tiene una referencia de uno a otro, el objeto resultante no puede ser convertido en JSON.

Cómo solucionar este error: Quitamos la referencia circular como la del ejemplo y la de cualquier objeto que se quiere convertir en JSON.

Unexpected token ;

Errores relacionados: Expected ), missing ) after argument list

El intérprete de JavaScript espera algo, pero que no está ahí. Por lo general es causado por paréntesis o corchetes que no coinciden.

El símbolo en estos errores puede variar – se podría decir Unexpected token ] o Expected { etc.

Cómo solucionar este error: Algunas veces el número de línea con este error no apunta al lugar correcto, por lo que es difícil de arreglar.

  • Un error con [ ] { } ( ) es usualmente causado por un par desajustado. Comprueba que todos los paréntesis y corchetes tienen un par coincidente. En este caso, el número de línea con frecuencia apunta a un lugar incorrecto.
  • Unexpected / es relacionado a las expresiones regulares. El número de línea para este usualmente es correcta.
  • Unexpected ; es causado usualmente por tener un ; en un objeto o array literal, o dentro de la lista de argumentos de una función llamada.  El número de línea para este caso será usualmente correcto también.

Uncaught SyntaxError: Unexpected token ILLEGAL

Errores relacionados: Unterminated String Literal, Invalid Line Terminator.

A un string literal le faltan comillas de cierre.

Cómo solucionar este error: Asegúrate que todos los string tengan la comillas de cierre correctas.

Uncaught TypeError: Cannot read property ‘foo’ of null, Uncaught TypeError: Cannot read property ‘foo’ of undefined

Errores relacionados: TypeError: someVal is null, Unable to get property ‘foo’ of undefined or null reference

Intenta leer  null o undefined como si fuera un objeto. Por ejemplo:

var someVal = null;
console.log(someVal.foo);

Cómo solucionar este error: Causados usualmente por errores de tipografía. Revisa las variables utilizadas cerca del número de línea indicado por el error están nombradas correctamente.

Uncaught TypeError: Cannot set property ‘foo’ of null, Uncaught TypeError: Cannot set property ‘foo’ of undefined

Errores relacionados: TypeError: someVal is undefined, Unable to set property ‘foo’ of undefined or null reference.

Intenta escribir null o undefined como si fuera un objeto. Por ejemplo:

var someVal = null;
someVal.foo = 1;

Cómo solucionar este error: Esto también es causado usualmente por errores tipográficos. Revisa los nombres de las variables cercanas a la línea que señala el error.

Uncaught RangeError: Maximum call stack size exceeded

Errores relacionados: Uncaught exception: RangeError: Maximum recursion depth exceeded, too much recursion, Stack overflow.

Causado usualmente por una pulga en la lógica del programa, causando llamadas a funciones de recursión infinita.

Cómo solucionar este error: Revisa las funciones recursivas que puedan tener pulgas que causen recursión infinita.

Uncaught URIError: URI malformed

Errores relacionados: URIError: malformed URI sequence.

Causado por una llamada decodeURIComponent inválida.

Cómo solucionar este error: Comprueba que la llamada a decodeURIComponent del número de  línea que da error pasa el valor correcto.

XMLHttpRequest cannot load http://some/url/. No ‘Access-Control-Allow-Origin’ header is present on the requested resource

Errores relacionados: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://some/url/.

Este error es siempre causado por el uso de XMLHttpRequest.

Cómo solucionar este error: Asegúrate que la solicitud URL es correcta  y respeta la same-origin policy (política de mismo origen). Una buena manera de encontrar el código infractor es mirar  la dirección URL en el mensaje de error y  encontrarla en el código .

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

Errores relacionados: InvalidStateError, DOMException code 11

Significa que el código llama una función que no debe ser llamada en ese momento. Se produce usualmente con  XMLHttpRequest, cuando se intenta llamar una función antes de estar lista.

var xhr = new XMLHttpRequest();
xhr.setRequestHeader('Some-Header', 'val');

En este caso, se da el error debido a que el setRequestHeader sólo puede ser llamado después de llamar xhr.open.

Cómo solucionar este error: Mira el código en la línea indicada por el error y asegúrate que se ejecuta en el tiempo correcto, o  añadir la llamadas necesarias antes (como xhr.open).

Conclusión

JavaScript tiene algunos de los errores más inútiles que he visto, con la excepción de la famosa Expected T_PAAMAYIM_NEKUDOTAYIM en PHP. Con más familiaridad los errores empiezan a tener más sentido. Los navegadores modernos también ayudan, ya que no dan los errores completamente inútiles que solían.

¿Cuál es el error más confuso que has visto? ¡Comparte la frustración en los comentarios!

¿Quieres saber más acerca de estos errores y cómo prevenirlos? Detecta Problemas en JavaScript Automáticamente con ESLint.

The following two tabs change content below.

jorgev

AMO Product Manager at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

Empezar la discusión en foro.mozilla-hispano.org

cc-by-sa