Monitoreo de frontend con New Relic Browser

Monitorear el frontend de tu aplicación con New Relic te permite ver cómo interactúan los usuarios reales con tu interfaz, detectar vistas de página y validar que tu instrumentación esté funcionando. Aquí aprenderás a configurar el agente Browser monitoring paso a paso, usando una aplicación de prueba en Glitch llamada Foodme.

¿Qué es el agente Browser monitoring de New Relic?

Es el agente que New Relic provee para capturar la actividad del frontend: vistas de página, tiempos de carga y eventos del navegador. Se integra mediante un script de JavaScript que se inyecta en el HTML de tu aplicación.

¿Para qué sirve Browser monitoring? Sirve para registrar la experiencia real del usuario en el navegador, incluyendo page views y rendimiento del lado cliente, complementando el monitoreo del backend.

¿Cómo añadir el agente desde el portal de New Relic?

Dentro del portal, el flujo está pensado para que lo dejes operativo en minutos. Desde el menú lateral izquierdo, entra a Add data, selecciona Browser y abre la opción Browser monitoring.

Desde ahí, sigue estos pasos:

1. Elige el método de despliegue: selecciona copiar y pegar el código JavaScript.
2. Deja la configuración de instrumentación con los valores por defecto.
3. Indica que tu aplicación ya está siendo monitoreada por New Relic y escribe el nombre exacto, en este caso Foodme.
4. Haz clic en Enable para que se genere el script listo para copiar.

El autocomplete del campo de nombre te ayuda a no equivocarte con aplicaciones previamente configuradas, así que verifica que coincida con el nombre que usaste en la clase anterior [1:30].

¿Por qué importa elegir bien el nombre de la aplicación?

Porque New Relic vincula los datos del agente Browser con la aplicación de backend ya monitoreada. Si pones un nombre distinto, los datos quedarán desconectados y no podrás cruzar métricas de frontend con las de servidor.

¿Dónde pegar el script en Glitch para activar el monitoreo?

Una vez generado el script, abre tu proyecto en Glitch, ve al menú lateral izquierdo, entra a la carpeta App y abre el archivo index.html. Pega el bloque entre la etiqueta <meta> y la etiqueta <title>, sin modificar nada más [2:30].

¿Hay otras formas de instalar el agente Browser? Sí. New Relic ofrece instalación automática vía APM o mediante npm para apps con build propio. El método copy paste es el más rápido para pruebas.

Con el script en su lugar, el agente comenzará a reportar en cuanto un usuario cargue la página.

¿Cómo validar que el agente está capturando datos?

Para comprobar que todo quedó bien conectado, genera tráfico real en la app y luego consulta los datos en el portal.

Ejecuta una transacción de prueba en Foodme:

• Selecciona el tercer restaurante.
• Pide dos opciones del primer menú.
• Haz checkout con datos ficticios de tarjeta, fecha de vencimiento y CVV.
• Confirma la compra.

Después vuelve a New Relic, cierra la ventana del agente con la X en la parte superior derecha y entra a Query your data desde el menú lateral izquierdo. Pega el query que captura las page views de tu aplicación y ejecútalo. Si todo está bien, verás que Foodme registra al menos una vista [4:00].

¿Qué es un page view en New Relic?

Es cada carga de una página por parte de un usuario en el navegador. Es la métrica básica que confirma que el agente Browser está activo y enviando eventos a tu cuenta.

¿Qué herramientas y conceptos clave intervienen en este flujo?

Entender las piezas que usaste te ayuda a replicar el proceso en proyectos reales:

• New Relic Browser monitoring: agente para observabilidad del lado cliente [0:20].
• Script de instrumentación: bloque de JavaScript inyectado en el HTML para reportar eventos.
• Glitch: entorno de desarrollo en línea donde corre la app Foodme.
• Query your data: módulo de New Relic para correr consultas tipo NRQL sobre tus eventos [3:50].
• Page view: evento que confirma que el frontend está siendo monitoreado.

Cuéntame en los comentarios qué método de despliegue prefieres y comparte un screenshot de tu primer page view registrado en Foodme.