Instalar el agente del navegador

Para comenzar con , agregue nuestro agente del browser al HTML de las vistas que desea monitorear. El agente del browser es un fragmento de código JavaScript que monitorea el rendimiento de su sitio y envía esos datos a New Relic.

Antes de que empieces

Si aún no lo hizo, le recomendamos comprobar que la aplicación de su navegador cumple con nuestros requisitos y compatibilidad.

Hay cuatro formas de instalar el agente del browser. Dependiendo de sus necesidades específicas, puede:

Vaya a one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoring y siga las instrucciones para generar el fragmento npm del navegador en la UI.

Obtenga el fragmento de su navegador

Una vez que tenga el fragmento, péguelo en la primera línea de su archivo fuente, antes de cualquier otro código. Esto cerciora que el agente del navegador se cargue antes de ejecutar cualquier otro script.

Vaya a one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoring y siga las instrucciones para generar el fragmento de JavaScript del browser en la UI.

Obtenga el fragmento de su navegador

Una vez que tengas el fragmento, pégalo lo más cerca posible de la parte superior de tu etiqueta <head>, pero luego de cualquier etiqueta META sensible a la posición (como X-UA-Compatible y charset).

Para obtener información más detallada sobre la ubicación del fragmento, consulte Requisitos de ubicación de JavaScript.

Advertencia

Retrasar la instanciación hace que el agente pierda información hasta que esté completamente cargado e inicializado. El orden de ejecución de estos scripts genera cierta pérdida de datos de instrumentación desde el inicio de las vistas de página.

Por posible rendimiento u otras razones, es posible que desee retrasar la inicialización del agente del navegador desde el inicio del ciclo de carga de la página. No podrá utilizar la API newrelic hasta que el agente esté completamente inicializado. Este retraso también crea datos incompletos en UI del monitoreo de su navegador.

Una vez que el agente está completamente inicializado, funciona como se esperaba. Cualquier retraso también afecta cuando el agente ajusta globales o se suscribe a un evento relativo a otra biblioteca o código que afecta los datos capturados.

Puede retrasar la inicialización del agente de estas maneras:

Agregue una etiqueta script-src con el atributo async .
Agregue una etiqueta script-src con el atributo defer .
Utilice la importación dinámica o la colocación cronológicamente tardía del código del cargador.
src de su página debe apuntar a una versión válida del cargador de agentes en nuestra CDN. Por ejemplo, la URL que siempre contiene nuestra versión actual del agente Pro+SPA es https://js-agent.newrelic.com/nr-loader-spa-current.min.js. Se requiere CSP para cargar scripts externos de terceros.
Para determinar cuándo puede comenzar a llamar a la API newrelic , suscríbase a un evento en el ámbito global:
```
window.addEventListener("newrelic", (evt) => {
  if (evt.detail.loaded) {
    // you can start using newrelic.interaction(), etc. now
  }
});
```

Con un agente APM, puedes implementar el monitoreo del navegador sin agregar manualmente el fragmento a tu código. Al resetear el agente, éste emplea automáticamente la última versión del agente del navegador.

Si está empleando un agente APM para monitorear el backend de su aplicación de navegador y tiene una aplicación que no esSPA, le recomendamos emplear este método.

Hay pasos específicos para cada agente APM:

Si prefiere crear el fragmento de su navegador mediante programación, puede hacerlo a través de nuestro NerdGraph, nuestra API GraphQL.

Para obtener más información sobre esto, consulte nuestro tutorial de NerdGraph para crear un fragmento de navegador y configurarlo.

Una vez que tenga el fragmento, agréguelo a la etiqueta <head> de su aplicación.

Importante

Si desea automatizar el monitoreo de la implementación del navegador en múltiples aplicaciones sitio web, puede usar NerdGraph y nuestro paquete de agente del navegador npm para configurar e implementar el agente como parte del proceso de compilación de su aplicación.

Para obtener más información sobre esto, consulte Instrumento para múltiples aplicaciones con npm y NerdGraph.

¿Que sigue?

Cuando instaló el agente del navegador, espere unos minutos y busque los datos en nuestra UIde monitoreo del navegador.

Si pasaron más de 15 minutos y no ves datos, consulta solucionar problemas de instalación de tu navegador.

Una vez que veas los datos del navegador en la UI, estos son algunos pasos a seguir sobre cómo puedes aprovechar al máximo esos datos:

Te ofrecemos esta traducción automática para facilitar la lectura.

Instalar el agente del navegador

Antes de que empieces