Debido a que los datos son lo más importante, recopilamos, analizamos y clasificamos los 10 errores de JavaScript más importantes. Esto da a los usuarios una buena visión general en lugar de un gran volcado abrumador como el que verías en un archivo de registro.
Nos centramos en los errores que más probablemente te afectarán a ti y a tus usuarios. Para ello, clasificamos los errores por el número de proyectos que los experimentan en diferentes empresas. Si observamos sólo el número total de veces que ocurrió cada error, entonces los clientes de alto volumen podrían saturar el conjunto de datos con errores que no son relevantes para la mayoría de los lectores.
Aquí están los 10 principales errores de JavaScript
Cada error ha sido acortado para facilitar la lectura. Profundicemos en cada uno de ellos para determinar qué puede causarlo y cómo evitar crearlo.
Tipo de error no detectado: No puede leer la propiedad
Si eres un desarrollador de JavaScript, probablemente has visto este error más de lo que le gustaría admitir. Esto ocurre en Chrome cuando lees una propiedad o llamas a un método en un objeto no definido. Puedes probarlo muy fácilmente en la consola de desarrollo de Chrome.
Esto puede ocurrir por muchas razones, pero una común es la inicialización incorrecta del estado mientras se renderizan los componentes de la interfaz de usuario.
TypeError: ‘undefined’ no es un objeto
Este es un error que ocurre en Safari cuando lees una propiedad o llamas a un método en un objeto no definido. Puedes probarlo muy fácilmente en la consola de desarrollo de Safari. Este es esencialmente el mismo error que el anterior para Chrome, pero Safari utiliza un mensaje de error diferente.
TipoError: null no es un objeto
Este es un error que ocurre en Safari cuando lees una propiedad o llamas a un método en un objeto nulo. Puedes probarlo muy fácilmente en la consola de desarrollo de Safari.
Curiosamente, en JavaScript, nulo e indefinido no son lo mismo, por lo que vemos dos mensajes de error diferentes. Undefined es generalmente una variable que no ha sido asignada, mientras que null significa que el valor está en blanco.
Una forma en que este error puede ocurrir en un ejemplo del mundo real es si intenta usar un elemento DOM en su JavaScript antes de que el elemento sea cargado. Esto se debe a que la API DOM devuelve nullpara las referencias de objetos que están en blanco.
Cualquier código JS que ejecute y trate con elementos DOM debe ejecutarse después de que se hayan creado los elementos DOM. El código JS se interpreta de arriba hacia abajo como se indica en el HTML. Por lo tanto, si hay una etiqueta antes de los elementos DOM, el código JS dentro de la etiqueta script se ejecutará cuando el navegador analice la página HTML. Obtendrá este error si los elementos DOM no han a sido creados antes de cargar el script.
(unknown): Script error
El error de Script se produce cuando un error de JavaScript no detectado cruza los límites del dominio en violación de la política de origen cruzado. Por ejemplo, si aloja tu código JavaScript en una CDN, cualquier error no detectado (errores que burbujean hasta el manejador de errores window.onerror, en lugar de ser atrapados en el try-catch) será reportado como simplemente «error de script» en lugar de contener información útil. Se trata de una medida de seguridad del navegador destinada a evitar el paso de datos a través de dominios que de otro modo no podrían comunicarse.
TypeError: Object doesn’t support property
Este es un error que se produce en IE cuando se llama a un método no definido. Puede probarlo en la IE Developer Console.
Esto es equivalente al error «TypeError: ‘undefined’ is not a function» en Chrome. Sí, diferentes navegadores pueden tener diferentes mensajes de error para el mismo error lógico.
Este es un problema común para IE en aplicaciones web que emplean espaciado de nombres JavaScript. Cuando este es el caso, el problema del 99,9% de las veces es la incapacidad de IE para enlazar métodos dentro del espacio de nombres actual con esta palabra clave. Por ejemplo, si tiene el espacio de nombres JS Rollbar con el método isAwesome.
TypeError: ‘undefined’ is not a function
Este es un error que se produce en Chrome cuando se llama a una función indefinida. Puede probarlo en la consola de desarrollo Chrome y en la consola de desarrollo Mozilla Firefox.
A medida que las técnicas de codificación JavaScript y los patrones de diseño se han vuelto cada vez más sofisticados a lo largo de los años, ha habido un aumento correspondiente en la proliferación de ámbitos de autorreferenciación dentro de las llamadas de retorno y los cierres, que son una fuente bastante común de tal o cual confusión.
Uncaught RangeError
Este es un error que ocurre en Chrome bajo un par de circunstancias. Una es cuando se llama a una función recursiva que no termina. Puedes probarlo en la consola de desarrollo de Chrome.
También puede ocurrir si se pasa un valor a una función que está fuera de rango. Muchas funciones aceptan sólo un rango específico de números para sus valores de entrada. Por ejemplo, Number.toExponential(digitos) y Number.toFixed(digitos) aceptan dígitos del 0 al 100, y Number.toPrecision(digitos) aceptan dígitos del 1 al 100.
TypeError: Cannot read property ‘length’
Este es un error que ocurre en Chrome debido a la propiedad de longitud de lectura de una variable indefinida. Puedes probarlo en la consola de desarrollo de Chrome.
Normalmente se encuentra la longitud definida en un array, pero puede encontrarse con este error si el array no está inicializado o si el nombre de la variable está oculto en otro contexto. Entendamos este error con el siguiente ejemplo.
Uncaught TypeError: Cannot set property
Cuando intentamos acceder a una variable indefinida siempre nos devuelve indefinida y no podemos obtener o establecer ninguna propiedad de indefinida. En ese caso, una aplicación lanzará «Uncaught TypeError cannot set property of undefined».
ReferenceError: event is not defined
Este error se produce cuando se intenta acceder a una variable que está indefinida o fuera del alcance actual. Puedes probarlo muy fácilmente en el navegador Chrome.
Si obtiene este error al utilizar el sistema de gestión de eventos, asegúrese de utilizar el objeto de evento pasado como parámetro. Los navegadores más antiguos como IE ofrecen un evento de variable global, y Chrome automáticamente adjunta la variable de evento al handler. Firefox no lo añadirá automáticamente. Las bibliotecas como jQuery intentan normalizar este comportamiento. Sin embargo, es una buena práctica usar la que se ha pasado a la función del manejador de eventos.
Conclusión
Resulta que muchos de estos son errores nulos o indefinidos. Un buen sistema de comprobación de tipos estático como Typescript podría ayudarte a evitarlos si utilizas la opción del compilador estricto. Puede advertirte si se espera un tipo pero no se ha definido. Incluso sin Typescript, es útil utilizar cláusulas de protección para comprobar si los objetos están indefinidos antes de usarlos.
Esperamos que hayas aprendido algo nuevo y puedas evitar errores en el futuro, o que esta guía te haya ayudado a resolver un rasguño de cabeza. Sin embargo, incluso con las mejores prácticas, aparecen errores inesperados en la producción. Es importante tener visibilidad de los errores que afectan a los usuarios y disponer de buenas herramientas para resolverlos rápidamente.
