Para comenzar con , deberá agregar nuestro agente del navegador al HTML de las vistas que desea monitor. El agente del navegador es un fragmento de código JavaScript que monitorea el rendimiento de su aplicación/sitio y envía esos datos a New Relic. Puede agregar ese código manualmente a su sitio o utilizar nuestro agente APM para inyectar ese código por usted.
Antes de que empieces
Antes de comenzar, es posible que desees comprobar que la aplicación de tu navegador cumpla con nuestros requisitos de compatibilidad.
¿Quiere utilizar nuestra API para monitor su aplicación mediante programación? Ver monitoreo de navegador con NerdGraph.
Instalar el agente
Para instalar el agente del navegador: Vaya a one.newrelic.com > Add data > Browser and mobile > Browser monitoring y siga las instrucciones.
Si tiene preguntas sobre el proceso de instalación, consulte Métodos de instalación.
Busca tus datos en New Relic
Cuando haya terminado de instalar el agente del navegador, espere unos minutos y busque los datos en nuestra UIde usuario de monitoreo del navegador.
Si han pasado más de 15 minutos y no ves datos, consulta resolución de problemas.
¿Que sigue?
Ideas para los próximos pasos:
- Vea los datos de su aplicación en la página Resumen.
- Ahora que ha instrumentado con el agente del navegador, profundice con sus datos con nuestro tutorial Mejore su sitio web.
- Aprenda cómo optimizar su experiencia de monitoreo de navegador con nuestra Guía de mejores prácticas para monitoreo de navegador.
Métodos de instalación
Cuando se trata de agregar el agente del navegador a tus páginas web, tienes dos métodos de despliegue:
- APM + monitoreo de navegador: Utilice uno de nuestros agentes APM para auto-instrumentado monitoreo de navegador
- Solo monitoreo del navegador: agregue nuestro agente del navegador manualmente como un fragmento de JavaScript a su interfaz HTML.
A continuación se ofrecen algunas orientaciones sobre estos dos métodos.
APM + monitoreo de navegador
Si está utilizando un agente APM (monitoreo del rendimiento de aplicaciones (APM)) para monitor el backend de la aplicación de su browser , le recomendamos utilizar este método. Recomendamos esta opción para aplicaciones que no seanSPA porque el agente APM desplegará automáticamente el agente del navegador en cada página de su sitio web y usted obtendrá automáticamente la última versión del agente del navegador cada vez que reinicie su agente APM.
Si desea personalizar el comportamiento del agente APM, puede utilizar nuestras API del agente APM. Aquí están esos documentos:
Monitoreo solo del navegador
Utilice este método si no puede utilizar APM por cualquier motivo, como si su agente APM no es compatible con la inyección automática (como ocurre con Node.js y algunas aplicaciones Java). Si utiliza este método, la UI le proporciona un fragmento de JavaScript personalizado al final del proceso de instalación que puede agregar al HTML de cualquier página que desee monitor en su sitio.
Pegue el fragmento de JavaScript dentro de la etiqueta HTML <head> de su página. La etiqueta principal generalmente maneja secuencias de comandos, fuentes y otros elementos de terceros que se cargan en todas las páginas de su aplicación, por lo que solo necesita pegarla en un lugar. Péguelo lo más cerca posible de la parte superior de <head> , pero después de cualquier etiqueta META sensible a la posición (como X-UA-Compatible y charset). Para obtener más información sobre la ubicación del fragmento, consulte Requisitos de ubicación de JavaScript.
Alternativamente, y aunque recomendamos ENCARECIDAMENTE la ruta del script en línea, también puede usar un script src para insertar el agente de forma async o defer . Para advertencias y detalles, continúe a continuación.
Retrasar el monitoreo del navegador
Advertencia
Retrasar la creación de instancias hace que el agente pierda información hasta que esté completamente cargado e inicializado. El orden de ejecución de estos scripts provoca cierta pérdida de datos de instrumentación desde el inicio de las visitas a la 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 usuario 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-srccon el atributoasync. - Agregue una etiqueta
script-srccon el atributodefer. - 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 }})
<InstallFeedback />