Este documento explica cómo browser recopila y almacena los datos asincrónicos de su aplicación de página única (SPA). Esto le permitirá comprender mejor los datos del SPA que ve en la UI del navegador. Esto también le ayudará a agregar más fácilmente un monitoreo personalizado con la API SPA.
Interacciones de browser
En el corazón del monitoreo de SPA está el concepto de browser interaction. New Relic define una interacción del navegador, también llamada navegación suave, como la siguiente secuencia de eventos, basar en la heurística de Google:
- Se produce una interacción del usuario. Buscamos específicamente eventos
click,keydownosubmit. El eventopopstatede la API de Historial también iniciará una interacción. - La URL cambia de cualquier manera, ya sea la ruta o el hash.
- Cualquier cambio, incluso en el atributo del nodo o en el texto, ocurre en cualquier parte del árbol DOM del documento.
Siguiendo estos pasos la interacción del navegador se considerará finalizada en el siguiente cuadro de repintado. También asociarán XHR y recuperarán requests iniciadas dentro de su lapso. La versión 2.1 introdujo otro paso:
- Para la versión 2.1 de SPA y posteriores, el monitor verifica si hay una devolución de llamada de larga duración durante un máximo de 5 segundos. Si se identifica una devolución de llamada de larga duración, el sistema extiende la interacción actual y vuelve a ejecutar el monitor.
La interacción concluirá completamente cuando haya un periodo de 5 segundos sin tareas largas. Durante el periodo de extensión hasta el final de la última tarea larga observada, cualquier AjaxRequest y JavascriptError que ocurra también se asociará con la interacción. Es importante destacar que la duración de la interacción no incluirá los últimos 5 segundos de inactividad.
Tenga en cuenta que el paso cuatro puede cortocircuitarse o pasar por alto en determinados escenarios.
Sugerencia
El disparador de evento popstate se gestiona de forma única en comparación con otros disparadores de eventos UI debido a su comportamiento específico en los navegadores. Cuando un evento popstate ocurre dentro de los 500 milisegundos luego de otro evento de UI, como un clic, se fusionará con la interacción existente iniciada por ese evento, sin cambiar el disparador original de la interacción (por ejemplo, "clic"). Sin embargo, dos eventos popstate consecutivos nunca se fusionarán de esta manera.
La interacción con popstate como disparador generalmente se origina a partir de acciones del navegador, como usar el botón de atrás o adelante, o de acciones relacionadas con el código, como cambiar la URL mediante programación.
Tipos de informes de datos SPA
@@ -39,54 +38,39 @@ Se pueden informar a New Relic tres categorías principales de datos de aplicaciones de una sola página:
Cada uno de estos crea un evento BrowserInteraction . Si una o más solicitudes AJAX son parte de una interacción, también se crea el evento AjaxRequest asociado. Estos eventos y sus atributos se pueden consultar en el generador de consultas.
Importante
La interacción predeterminada o no personalizada no espera a que se completen requests de red. Se asocian con la interacción tal como están, lo que significa que solo requests completadas antes de que el programador recopile la interacción están vinculadas a ella. Si una solicitud de red tiene una duración lenta o larga y comienza como parte de una interacción, puede quedar fuera de esta ventana de tiempo y no estar asociada con la interacción.
Como alternativa, puede extender manualmente la duración de una interacción para garantizar que permanezca abierta hasta que regrese cualquier solicitud de red importante mediante el uso de la API.
Cargas de la página inicial
Un initial page load es un cambio de URL tradicional, que se origina a partir de una carga o recarga completa de una URL. Esto se indica en el navegador cuando se activa un evento de carga de página (el evento window.onload ) y también se denomina navegación dura. Las cargas de página iniciales aparecen junto con los cambios de ruta en la UIdel navegador.
Cambios de ruta
La ruta dinámica de SPA experiencia del usuario cambia de forma similar a la carga de páginas. A los visitantes de un sitio o aplicación generalmente no les importa how que se haya entregado una nueva vista; simplemente saben que cuando realizan una acción, aparece una nueva vista. Por este motivo, tratamos los cambios de ruta de forma similar a las cargas de páginas en la UI.
Para monitorear de manera óptima la aplicación de una sola página, comenzamos a monitorear cualquier interacción que teóricamente podría conducir a cambios de ruta.
- Si estas interacciones no completan los pasos heurísticos definidos anteriormente, el agente inicia el monitoreo pero luego las descarta.
- Si estas interacciones do siguen todos los pasos, el agente almacena la secuencia como un evento
BrowserInteractioncompletado.
Una interacción se considera un cambio de ruta y se almacena como un evento BrowserInteraction si la URL cambia entre el inicio y el final. Los cambios de URL se rastrean de dos maneras:
- El evento
popstate. Cambiar la URL mediante programación, por ejemplo configurandowindow.location.hash, activará este evento. pushStateo se llamareplaceState. Las SPA comúnmente emplean estos métodos de API de historial para actualizar la URL.
Los cambios de ruta aparecen junto con las cargas iniciales de la página en la UI del navegador.
Tenga en cuenta que el agente informa fragmentos hash de las URL de cambio de ruta. Si usa hash para pasar datos privados o confidenciales, dichos datos pueden ser visibles para el usuario de su cuenta de New Relic. Para obtener más información sobre la recopilación de datos y los reportes, consulte Seguridad del navegador.
Monitoreo personalizado
Todas las aplicaciones son diferentes y tienen diferentes necesidades de monitoreo. Puede emplear la APIde SPA para personalizar la interacción de su navegador o definir usted mismo la forma en que se captura.
Los eventos personalizados se almacenan como BrowserInteraction evento y tienen la siguiente diferencia en atributo:
- El atributo
categorytendrá el valorCustom. - El atributo
triggertendrá el valorapi. (Este es el valor predeterminado pero se puede cambiar con la API).
La API le permite dictar cuándo iniciar y detener dicha interacción personalizada, si la heurística anterior no se adapta a su base de usuarios o aplicación.
Evento y atributo
Almacenamos las interacciones del navegador que generan cambios de ruta y cargas de páginas, o que se crean a través de API, como evento BrowserInteraction, y requests AJAX como evento AjaxRequest. Puedes consultar estos eventos en el generador de consultas.