Cinco errores de JavaScript que atacan sin previo aviso -

Por (patrocinador) en

Recientemente descubríTrackJS, un servicio de monitoreo del JavaScript de su sitio. Es increíble. Recibo información detallada sobre cada error, incluido el archivo en el que ocurrió, la URL, el navegador y más. ¡Me encanta! La siguiente es una publicación escrita por el fundador de TrackJS. ¡Disfruta!

“La Web es el entorno de ingeniería de software más hostil que se pueda imaginar”.

—Douglas Crockford

Ejecutamos aplicaciones web en un entorno hostil. Con cada vista de página, nuestro JavaScript se implementa a través de una red impredecible en un navegador que no controlamos. Da miedo, pero hemos desglosado cinco errores de JavaScript que afectan a las aplicaciones de JavaScript en la actualidad, generalmente sin que los desarrolladores se den cuenta del problema.

1. Fallos en la carga de activos

La mayoría de las aplicaciones web cargan algunos activos de JavaScript: un marco de una CDN, algunos complementos de terceros y uno o más archivos de script personalizados. ¿Qué pasaría si algunos o todos ellos no se cargarán?

Esta no es una pregunta hipotética. Las estadísticas de TrackJS muestran que, en promedio, 1 de cada 500 páginas vistas se ve afectada por una falla de carga. Esto puede suceder por muchas razones: conexiones de red deficientes, fallas en el servidor, cambios de proveedor y ataques DDoS.

De cierto modo, el fracaso total es un caso más fácil de afrontar. Si no se carga ninguno de los JavaScript, su aplicación de una sola página simplemente mostrará una interfaz de usuario vacía o “Sin JavaScript”. Pero puede ser mucho más peligroso si solo falla un script al cargar.

Por ejemplo, no cargar una biblioteca de procesador de pagos podría exponer detalles transaccionales e información personal. No cargar una red social, publicitaria o de contenido podría impedir que parte de la interfaz de usuario se reproduzca.

2. Condiciones de carrera asíncrona

Gran parte de JavaScript implica configurar y responder a eventos asincrónicos, como acciones del usuario o transmisiones de red. Cuando es necesario combinar varias acciones asíncronas para producir un resultado, tienes los ingredientes para una condición de carrera. Considere este sencillo ejemplo:

var obj = {};$.post("/api/cosa1", {}, función (resp) {obj.cosa1 = resp;});$.post("/api/cosa2", {}, función ( resp) {obj.cosa2 = resp;obj.resultado = obj.cosa1 + obj.cosa2;});

Se han iniciado dos solicitudes AJAX. Cuando se completa el segundo, las dos respuestas se combinan para obtener un resultado. Esto funciona bien cuando “/api/thing1” termina antes de “/api/thing2”, lo que puede ser cierto en su entorno local. Pero si se introduce una red real, el orden puede revertirse.

3. Cambios en la biblioteca de proveedores

Muchos sitios aprovechan bibliotecas de terceros: procesadores de pagos, análisis, anunciantes o redes sociales. Cada uno de estos proporciona servicios valiosos que nos facilitan a todos construir algo increíble.

But we must recognize that we’re introduce a dependency and a risk with these libraries. Vendors can change their API or their performance without warning.

4. Browser Runtime Changes

The browsers themselves are changing on us. Every day, they fix bugs and push new capabilities. But sometimes we expect those bugs, or sometimes new bugs are introduced.

Last October, Apple shippeda version of WebKit into iOS that made subtle changes to the DOM and caused bugs in Ember, Angular, and Polymer core.

In a few weeks, Microsoft Edge will launch. It will inevitably include changes to the JavaScript runtime, the DOM, and CSS interpretation. We’ll have to retest our apps to make sure they all work great in it.

5. Invasive Browser Plugins

Many browsers have an ecosystem of plugins that users can install to extend and enhance the pages they visit. Unfortunately, these plugins can stick their fingers into the DOM and sometimes mess with the flow of your app. It only takes one important user to make this a big problem:

“…the boss found a bug, but it only happens on his wife’s computer. This has to be fixed before launch!”

—Anonymous Client Interaction

Search toolbar plugins are really common malware, and they frequently mess with form inputs. They can also change performance characteristics, override APIs, and mask events.

Monitoring and Prevention

Running web applications is hard. Because the platform is constantly shifting, we are never “done”. We must constantly monitor and re-test our applications to work with current users, the networks they access through, and the browsers and plugins that run our app.

Once you’ve launched, you should monitor your web applications withTrackJS. TrackJS monitors real users on your site and tells you when they have a problem. TrackJS records all your production JavaScript errors, and includes deep context about what the user, the network, and your application were doing leading up to the failure. TrackJS doesn’t just count your errors, it gives you the context to fix them.

TrackJS is an incredible tool for monitoring your site’s JavaScript reliability. Every day I receive an email listing the error rate and the top errors for my site. After logging into my TrackJS account, I can see detail about each error, including browser and browser versions, pages the error occurred on, and more. There isn’t a better tool out there!

— David Walsh

Obtenga hoy una prueba gratuita de 30 días de TrackJS y comencemos a encontrar y corregir errores para sus usuarios.

Acerca de Todd Gardner

Todd Gardner es un emprendedor y desarrollador de software que ha creado múltiples productos rentables. Presiona por herramientas simples, software mantenible y por equilibrar la complejidad con el riesgo. Es cofundador de TrackJS y Request Metrics, donde ayuda a miles de desarrolladores a crear sitios web más rápidos y confiables. También produce el programa de comedia de software PubConf.

toddhgardner.com toddhgardner Publicaciones