Realizar un monitoreo de usuario real (RUM) con APM de Elastic | Elastic Blog
Engineering

Una muestra de RUM (monitoreo de usuario real) de Elastic

Lo siento si escuchaste mal y te tentamos con las ganas de tomar un sorbo de un maravilloso cóctel hecho con ron y te diste cuenta de que el RUM del que estamos hablando no es el ron que anhelas. Pero quédate tranquilo que el RUM de Elastic es igualmente maravilloso. Tomemos un sorbo. Queremos advertirte que tomará un poco de tiempo revisar la cantidad de detalles que cubriremos en este blog.

¿Qué es RUM?

El monitoreo de usuario real de Elastic captura las interacciones del usuario con el navegador web y proporciona una vista detallada de la “experiencia del usuario real” de tus aplicaciones web desde una perspectiva de rendimiento. El agente RUM de Elastic es un agente de JavaScript, lo que significa que es compatible con cualquier aplicación basada en JavaScript. RUM puede proporcionar información valiosa sobre tus aplicaciones. Algunos de los beneficios comunes de RUM incluyen lo siguiente:

  • Los datos de rendimiento de RUM pueden ayudarte a identificar cuellos de botella y descubrir cómo los problemas de rendimiento del sitio afectan la experiencia de tus visitantes.
  • La información de agente de usuario capturada por RUM te permite identificar los navegadores, los dispositivos y las plataformas más usados por tus clientes para que puedas realizar optimizaciones informadas a tu aplicación.
  • Junto con la información de ubicación, los datos de rendimiento del usuario individual de RUM te ayudan a comprender el rendimiento regional de tu sitio web en todo el mundo.
  • RUM proporciona información y medición para los acuerdos de nivel de servicio (SLA) de tus aplicaciones.

Primeros pasos con RUM usando APM de Elastic

En este blog, te guiaremos por el proceso completo de instrumentación de una aplicación web simple realizada a partir de un frontend React y un backend Spring Boot, paso a paso. Verás lo fácil que es usar el agente RUM. Como beneficio adicional, también podrás ver cómo el APM de Elastic vincula la información de rendimiento de backend y frontend junto con una vista de rastreo distribuido holístico. Consulta nuestro blog anterior para obtener una visión general de APM de Elastic y el rastreo distribuido si estás interesado en conocer más detalles.

Para usar el monitoreo de usuario real de APM de Elastic, tienes que tener el Elastic Stack con el servidor de APM instalado. Puedes, por supuesto, descargar e instalar la última versión del Elastic Stack con el servidor de APM de forma local en tu computadora. Sin embargo, el enfoque más sencillo sería crear una cuenta de prueba de Elastic Cloud y tener tu cluster listo en unos minutos. APM está habilitado para la plantilla predeterminada de E/S optimizada. De ahora en adelante, supondremos que tienes un cluster listo para usar.

Aplicación de muestra

La aplicación que instrumentaremos es una aplicación simple de base de datos de automóviles realizada a partir de un frontend React y un backend Spring Boot que proporciona acceso de API a una base de datos de automóviles en la memoria. La aplicación se mantiene simple a propósito. La idea es mostrarte pasos detallados de instrumentación comenzando desde cero para que puedas instrumentar tus propias aplicaciones siguiendo los mismos pasos.

Una aplicación simple con un frontend React y un backend Spring

Crea un directorio llamado CarApp en cualquier parte de tu computadora portátil. Luego, clona tanto la aplicación de frontend como la aplicación de backend en ese directorio.

git clone https://github.com/adamquan/carfront.git
git clone https://github.com/adamquan/cardatabase.git

Como puedes ver, la aplicación es extremadamente simple. Solo hay un par de componentes en el frontend React y algunas clases en la aplicación de backend Spring Boot. Crea y ejecuta la aplicación siguiendo las instrucciones en GitHub para el frontend y el backend. Deberías ver algo así. Puedes navegar, filtrar automóviles y ejecutar opciones de crear, leer, actualizar y eliminar (CRUD) en ellos.

La simple interfaz de usuario de React

Ahora, con la aplicación en ejecución, estamos listos para pasar por la instrumentación usando el agente RUM.

Una completa instrumentación lista para usarse con RUM

Primero instalemos y configuremos el agente RUM. Hay dos formas de hacerlo:

  1. Para aplicaciones del lado del servidor, puedes instalar el agente RUM como una dependencia e inicializarlo.

    npm install @elastic/apm-rum --save
        
  2. Instala el agente RUM con configuración HTML.

    <script src="https://unpkg.com/@elastic/apm-rum@4.0.1/dist/bundles/elastic-apm-rum.umd.min.js">
    </script>
    <script>
      elasticApm.init({
        serviceName: 'carfront',
        serverUrl: 'http://localhost:8200',
        serviceVersion: '0.90'
      })
    </script>
        

Dado que nuestro frontend es una aplicación React, vamos a usar el primer enfoque. En el mismo directorio que tu index.js, hay un archivo llamado rum.js con el siguiente código:

import { init as initApm } from '@elastic/apm-rum'
var apm = initApm({
 // Establece el nombre de servicio requerido (caracteres permitidos: a-z, A-Z, 0-9, -, _ y espacio)
 serviceName: 'carfront',
 // Configura la versión de tu aplicación
 // Se usa en el servidor de APM para encontrar el mapa fuente correcto
 serviceVersion: '0.90',
 // Configura la URL del servidor de APM (predeterminado: http://localhost:8200)
 serverUrl: 'https://aba7c3d90b0b4820b05b0a9df44c096d.apm.us-central1.gcp.cloud.es.io:443',
 // distributedTracingOrigins: ['http://localhost:8080'],
})
export default apm;

Eso es todo lo que se necesita para inicializar el agente RUM. Esta es una explicación rápida de algunas de las configuraciones:

  1. Nombre del servicio: Se debe establecer el nombre del servicio. Representa tu aplicación en la UI de APM. Asígnale un nombre significativo.
  2. Versión del servicio: Esta es la versión de tu aplicación. El servidor de APM también usa esta versión para encontrar el mapa de origen correcto. Hablaremos del mapa de origen en detalle más adelante.
  3. URL del servidor: Esta es la URL del servidor de APM. Ten en cuenta que normalmente se puede acceder al servidor de APM desde la internet pública, ya que tu agente RUM informa datos al servidor a partir de navegadores de usuario final en internet
  4. Hablaremos de distributedTracingOrigins más adelante.

Las personas que están familiarizadas con los agentes de backend de APM de Elastic podrían preguntarse por qué el token de APM no se pasó aquí. Esto se debe a que el agente RUM en realidad no usa un token de APM secreto. El token solo se usa para agentes de backend. Como el código de frontend es público, el token secreto no proporciona seguridad adicional.

Cargaremos este archivo de JavaScript cuando se cargue la aplicación y lo incluiremos en los lugares donde queramos realizar una instrumentación personalizada. Por ahora, veamos qué cosas tenemos listas para usarse, sin ninguna instrumentación personalizada. Para hacerlo, simplemente debemos incluir rum.js en index.js. El archivo index.js importa rum.js y establece un nombre de carga de página. Sin establecer un nombre de carga de página, verás la carga de la página como “Unknown” (Desconocida) en la UI de APM, que no es muy intuitiva. Así es como se ve index.js.

import apm from './rum'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
apm.setInitialPageLoadName("Car List")
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

Genera algo de tráfico a tu aplicación. Inicia sesión en Kibana y haz clic en la UI de APM. Deberías ver un servicio llamado “carfront” en la lista. Al hacer clic en el nombre del servicio, se accede a la página de transacciones. Deberías ver la lista predeterminada de “page-load” (carga de página) y ver una carga de la página “car list” (lista de automóviles). De lo contrario, asegúrate de seleccionar el rango de tiempo en “Last 15 minutes” (Últimos 15 minutos) en el selector de tiempo. Haz clic en el enlace “car list” (lista de autos) y verás una vista en cascada de interacciones de navegador como esta:

Una transacción de muestra en APM de Elastic

¿Asombrado por la cantidad de información capturada por el agente RUM de forma predeterminada? Presta especial atención a los marcadores como timeToFirstByte, domInteractive, domComplete y firstContentfulPaint. Pasa el mouse sobre los puntos negros para ver los nombres. Te proporcionan una gran cantidad de detalles sobre la recuperación de contenido y la representación en el navegador de estos contenidos. También presta atención a todos los datos de rendimiento sobre la carga de recursos desde el navegador. Con solo inicializar tu agente RUM, sin instrumentación personalizada, obtienes todas estas métricas detalladas de rendimiento, listas para usar. Cuando hay un problema de rendimiento, estas métricas te permiten decidir fácilmente si el problema se debe a servicios de backend lentos, una red lenta o simplemente un navegador de cliente lento. Eso es muy impresionante.

Para aquellos de ustedes que necesitan un repaso, aquí incluimos una explicación rápida de las métricas de rendimiento web. Ten en cuenta que para los marcos de trabajo de aplicaciones web modernas como React, estas métricas podrían representar solo la parte “estática” de la página web, debido a la naturaleza asíncrona de React. Por ejemplo, es posible que los contenidos dinámicos sigan cargándose después de domInteractive, como podrás ver más adelante.

  • timeToFirstByte es la cantidad de tiempo que un navegador espera para recibir el primer elemento de información del servidor web después de solicitarlo. Representa una combinación de red y velocidad de procesamiento del lado del servidor.
  • domInteractive es el momento inmediatamente antes de que el agente de usuario establezca la preparación del documento actual en “interactive” (interactivo), lo que significa que el navegador ha terminado de parsear todo el HTML y la creación de DOM está completa.
  • domComplete es el momento inmediatamente antes de que el agente de usuario establezca la preparación del documento actual en “complete” (completo), lo que significa que la página y todos sus recursos secundarios, como las imágenes, se han terminado de descargar y están listos. La rueda de carga ha dejado de girar.
  • firstContentfulPaint es el momento en que el navegador muestra el primer extracto de contenido del DOM. Este es un hito importante para los usuarios porque proporciona comentarios de que la página realmente se está cargando.

Instrumentación personalizada flexible

El agente RUM proporciona instrumentación detallada para la interacción de tu navegador, lista para usarse, como acabas de ver. También puedes realizar instrumentaciones personalizadas cuando sea necesario. Por ejemplo, debido a que la aplicación React es una aplicación de una sola página y eliminar un automóvil no desencadenará una “carga de página”, RUM no captura de forma predeterminada los datos de rendimiento de la eliminación de un automóvil. Podemos usar transacciones personalizadas para algo así.

Con nuestra versión actual (Monitoreo de usuario real de APM con agente JavaScript 4.x), los usuarios deben crear manualmente transacciones para llamadas de AJAX y llamadas de aplicación de página única (SPA) que no desencadenen una carga de página. En algunos marcos de trabajo, como JSF, tienes muy poco control sobre JavaScript. Por lo tanto, la creación manual de transacciones para clics de botón que inician solicitudes de AJAX no es viable. Incluso si el desarrollador tiene control directo sobre las solicitudes de AJAX, instrumentar una aplicación grande exigiría mucho esfuerzo. Estamos planeando mejorar el agente RUM para que cree automáticamente una transacción para estas solicitudes en caso de que no haya una activa actualmente. Esto haría que la instrumentación automática cubra mucho más contenido de la aplicación sin que los desarrolladores tengan que agregar lógica de rastreo mediante programación a sus aplicaciones.

El botón "New Car" (Agregar automóvil) en nuestra aplicación de frontend te permite agregar un nuevo automóvil a la base de datos. Instrumentaremos el código para capturar el rendimiento de agregar un automóvil nuevo. Abre el archivo Carlist.js en el directorio de componentes. Verás el siguiente código:

// Add new car
addCar(car) {
    // Create a custom transaction
    var transaction = apm.startTransaction("Add Car", "Car");
    apm.addTags(car);
    fetch(SERVER_URL + 'api/cars',
        {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(car)
        })
        .then(res => this.fetchCars())
        .catch(err => console.error(err))
}
fetchCars = () => {
    fetch(SERVER_URL + 'api/cars')
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({
                cars: responseData._embedded.cars,
            });
        })
        .catch(err => console.error(err));
        // End the current transaction at the end of the response call back
        var transaction = apm.getCurrentTransaction()
        if (transaction) transaction.end()
}

El código creó una nueva transacción llamada “Add Car” (Agregar automóvil) de tipo “Car” (Automóvil). Luego, etiquetó la transacción con el automóvil para proporcionar información contextual. La transacción terminó al final de la llamada de respuesta.

Agrega un automóvil nuevo desde la UI web de la aplicación. Haz clic en la UI de APM en Kibana. Deberías ver una transacción denominada “Add Car” (Agregar automóvil) enumerada. Asegúrate de seleccionar “Car” (Automóvil) en el menú desplegable de “Filter by type” (Filtrar por tipo). De forma predeterminada, muestra las transacciones de “page-load” (carga de página).

Filtrar por tipo en APM de Elastic

Haz clic en el enlace de transacción “Add Car” (Agregar automóvil). Deberías ver la información de rendimiento de la transacción personalizada “Add Car” (Agregar automóvil):

Transacción de muestra en APM de Elastic filtrada por tipo de automóvil

Haz clic en la pestaña “Tags” (Etiquetas). Verás las etiquetas que agregamos. Las etiquetas y los logs agregan información contextual valiosa a tus rastreos de APM.

Explorar por tipo de etiqueta en APM de Elastic

Realmente eso es todo lo que hace falta para hacer una instrumentación personalizada: fácil pero potente. Para obtener más detalles, consulta la documentación de API.

Potentes visualizaciones de APM personalizadas con Kibana

El APM de Elastic ofrece una UI de APM curada y dashboards de APM integrados para visualizar todos los datos de APM capturados por los agentes de forma inmediata. También puedes crear tus propias visualizaciones personalizadas. Por ejemplo, los datos de IP de usuario y de agente de usuario capturados por el agente RUM representan información muy detallada sobre tus clientes. Con toda la información de la IP de usuario y el agente de usuario, es posible crear una visualización como esta para mostrar de dónde proviene el tráfico web en un mapa y qué sistemas operativos y navegadores están utilizando tus clientes. Puedes usar pipelines de ingest node para enriquecer y transformar tus datos de APM. Toda esta información te permite optimizar tu aplicación de manera más inteligente.

Visualizar los datos de APM de Elastic en el dashboard de Kibana

Obtén una visión general con el rastreo distribuido

Como punto de bonificación, también vamos a instrumentar nuestra aplicación de backend Spring Boot para que tengas una vista completa de la transacción general desde el navegador web hasta la base de datos de backend, todo en una sola vista. El rastreo distribuido de APM de Elastic te permite hacer esto.

Configurar el rastreo distribuido en agentes RUM

El rastreo distribuido está habilitado de manera predeterminada en el agente RUM. Sin embargo, solo incluye solicitudes realizadas al mismo origen. Para incluir solicitudes de origen cruzado, debes establecer la opción de configuración distributedTracingOrigins. También tendrás que configurar la política CORS en la aplicación de backend, como veremos en la siguiente sección.

Para nuestra aplicación, el frontend se toma desde http://localhost:3000. Para incluir las solicitudes realizadas a http://localhost:8080, debemos agregar la configuración distributedTracingOrigins a nuestra aplicación React. Esto se hace dentro de rum.js. El código ya está ahí. Simplemente descomentando la línea se logrará esto.

var apm = initApm({
  ...
  distributedTracingOrigins: ['http://localhost:8080']
})

Esto le dice al agente de forma eficaz que agregue el encabezado HTTP de rastreo distribuido (elastic-apm-traceparent) a las solicitudes realizadas a http://localhost:8080.

Para usar la instrumentación predeterminada lista para usarse en el lado del servidor, debes descargar el agente Java y ejecutar tu aplicación con este agente. Así es como configuré mi proyecto Eclipse para ejecutar la aplicación de backend Spring Boot. Deberás configurar esto usando tu propia URL de APM y token de APM.

-javaagent:/Users/aquan/Downloads/elastic-apm-agent-1.4.0.jar 
-Delastic.apm.service_name=cardatabase 
-Delastic.apm.application_packages=com.packt.cardatabase
-Delastic.apm.server_urls=https://aba7c3d90b0b4820b05b0a9df44c096d.apm.us-central1.gcp.cloud.es.io:443 
-Delastic.apm.secret_token=jeUWQhFtU9e5Jv836F

Configurar Eclipse para enviar datos de backend a APM de Elastic

Ahora, actualiza tu lista de automóviles desde el navegador para generar otra solicitud. Dirígete a la UI de APM de Kibana y consulta la última carga de la página “car list” (Lista de automóviles). Deberías ver algo como la siguiente captura de pantalla. Como puedes ver, tus datos de rendimiento del lado del cliente desde el navegador y tus datos de rendimiento del lado del servidor, incluido el acceso de JDBC, se muestran perfectamente en un solo rastreo distribuido. Observa los diferentes colores para las diferentes partes del rastreo distribuido. Ten en cuenta que este es el rastreo predeterminado que obtienes, sin tener que hacer ninguna instrumentación personalizada en el lado del servidor, aparte de iniciar tu aplicación con el agente. Siente el poder de APM de Elastic y el rastreo distribuido.

Rastreo distribuido (backend y frontend) en APM de Elastic

Para los lectores que realmente están prestando atención a la línea de visualizaciones anterior, es posible que se pregunten por qué la transacción de carga de página “Car List” (Lista de automóviles) finaliza en 193 ms, que es el tiempo de domInteractive, mientras que los datos aún se están tomando desde el backend. Gran pregunta. Esto se debe al hecho de que las llamadas de obtención son asíncronas de forma predeterminada. El navegador “cree” que terminó de parsear todo el HTML y que la construcción de DOM se completó a los 193 ms porque cargó todos los contenidos HTML “estáticos” tomados desde el servidor web. Por otro lado, React todavía está cargando datos del servidor de backend de forma asíncrona.

Intercambio de recursos de origen cruzado (CORS)

El agente RUM es solo una pieza del rompecabezas en un rastreo distribuido. Para usar el rastreo distribuido, también necesitamos configurar correctamente otros componentes. Una de las cosas que normalmente tendrás que configurar es el intercambio de recursos de origen cruzado, el “notorio” CORS. Esto se debe a que los servicios de frontend y backend generalmente se despliegan por separado. Con la política de mismo origen, tus solicitudes de frontend desde un origen diferente al backend fallarán sin un CORS configurado correctamente. Básicamente, CORS es una forma que le permite al lado del servidor revisar si las solicitudes que entran desde un origen diferente están permitidas. Para leer más sobre las solicitudes de origen cruzado y por qué este proceso es necesario, consulta la página de MDN sobre Intercambio de recursos de origen cruzado.

¿Qué significa eso para nosotros? Significa dos cosas:

  1. Debemos establecer la opción de configuración distributedTracingOrigins como lo hemos hecho.
  2. Con esa configuración, el agente RUM también envía una solicitud de HTTP OPTIONS (opciones de HTTP) antes de la solicitud de HTTP real para asegurarse de que todos los encabezados y métodos de HTTP sean compatibles y se permita el origen. Específicamente, http://localhost:8080 recibirá una solicitud de OPTIONS (opciones) con los siguientes encabezados:

    Access-Control-Request-Headers: elastic-apm-traceparent
    Access-Control-Request-Method: [request-method]
    Origin: [request-origin]
        
    Y el servidor de APM debería responder con estos encabezados y un código de estado 200:

    Access-Control-Allow-Headers: elastic-apm-traceparent
    Access-Control-Allow-Methods: [allowed-methods]
    Access-Control-Allow-Origin: [request-origin]
        

La clase MyCorsConfiguration en nuestra aplicación Spring Boot hace exactamente eso. Hay diferentes formas de configurar Spring Boot para que haga esto, pero aquí estamos usando un enfoque basado en filtros. Se trata de configurar nuestra aplicación Spring Boot del lado del servidor para permitir las solicitudes desde cualquier origen con cualquier encabezado de HTTP y cualquier método de HTTP. Posiblemente no desees ser así de abierto con tus aplicaciones de producción.

@Configuration
public class MyCorsConfiguration {
    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<CorsFilter> bean = new FilterRegistrationBean<CorsFilter>(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }
}

Cerremos el blog con una característica poderosa más del agente RUM: los mapas de origen. Los mapas de origen facilitan la depuración de errores en tu aplicación al decirte exactamente dónde ocurrió el error en tu código fuente original, en lugar del código minimizado críptico.

Depuración fácil con mapas de origen

Es una práctica común minimizar los paquetes de JavaScript para el despliegue de producción, por razones de rendimiento. Sin embargo, la depuración del código minimizado es inherentemente difícil. La siguiente captura de pantalla muestra un mensaje de error capturado por el agente RUM para una compilación de producción. Como puedes ver, el stack de excepciones no tiene mucho sentido, porque es un código minimizado. Todas las líneas de error muestran archivos javascript como 2.5e9f7401.chunk.js y siempre apunta a “line 1” (línea 1) debido a la forma en que se realizó la minimización. ¿No sería bueno si pudieras ver exactamente tu código fuente de la forma en que lo desarrollaste aquí?

El código minimizado en APM de Elastic se puede resolver con un mapa de origen

Los mapas de origen están aquí para ayudarte. Puedes generar mapas de origen para tus paquetes y cargarlos al servidor de APM. Luego, el servidor de APM podrá traducir los errores del código minimizado a tu código fuente original y proporcionarte un mensaje de error mucho más fácil de comprender.

Veamos cómo podemos hacer esto para nuestra aplicación de frontend React. Crearemos una compilación de producción para nuestra aplicación y cargaremos los mapas de origen. Puedes crear una compilación de producción con el siguiente comando:

npm run build

Deberías ver el siguiente mensaje al final de la compilación:

The build folder is ready to be deployed.
You may serve it with a static server:
  serve -s build

Puedes leer más detalles sobre la compilación de producción aquí: https://facebook.github.io/create-react-app/docs/production-build

Asegúrate de instalar el servidor si no lo has hecho:

npm install -g serve

Sirve tu aplicación React en modo de producción con este comando:

serve -s build

Cuando tu aplicación React esté en modo de producción, el icono de herramientas del desarrollador de React para Chrome tendrá un fondo oscuro. Cuando tu aplicación React esté en modo de desarrollo, el icono tendrá un fondo rojo. Asegúrate de estar ejecutando la compilación de producción.

Ahora, si haces clic en el botón de error para generar un error y lo revisas desde la UI de APM de Kibana, verás el stack de error minimizado al igual que la captura de pantalla anterior.

Carguemos nuestros mapas de origen y veamos la magia. Los mapas de origen se generan en el directorio $APP-PATH/carfront/build/static/js. Entra ahí y verás tres archivos de mapas de origen para los tres archivos de JavaScript. Ejecuta el siguiente comando para cargarlos en tu servidor de APM. Asegúrate de cambiar la URL, el nombre del archivo y otros parámetros para que coincidan con tu versión de aplicación, compilación y entorno. También asegúrate de usar el token de autorización de tu servidor de APM.

curl https://aba7c3d90b0b4820b05b0a9df44c096d.apm.us-central1.gcp.cloud.es.io:443/v1/rum/sourcemaps -X POST \
  -F sourcemap="@./main.b81677b7.chunk.js.map" \
  -F service_version="0.90" \
  -F bundle_filepath="http://localhost:5000/static/js/main.b81677b7.chunk.js" \
  -F service_name="carfront" \
  -H "Authorization: Bearer jeUWQhFtU9e5Jv836F"
curl https://aba7c3d90b0b4820b05b0a9df44c096d.apm.us-central1.gcp.cloud.es.io:443/v1/rum/sourcemaps -X POST \
  -F sourcemap="@./runtime~main.fdfcfda2.js.map" \
  -F service_version="0.90" \
  -F bundle_filepath="http://localhost:5000/static/js/runtime~main.fdfcfda2.js" \
  -F service_name="carfront" \
  -H "Authorization: Bearer jeUWQhFtU9e5Jv836F"
curl https://aba7c3d90b0b4820b05b0a9df44c096d.apm.us-central1.gcp.cloud.es.io:443/v1/rum/sourcemaps -X POST \
  -F sourcemap="@./2.5e9f7401.chunk.js.map" \
  -F service_version="0.90" \
  -F bundle_filepath="http://localhost:5000/static/js/2.5e9f7401.chunk.js" \
  -F service_name="carfront" \
  -H "Authorization: Bearer jeUWQhFtU9e5Jv836F"

Presta especial atención a que la versión de servicio sea un texto y coincida exactamente con la versión de servicio que configuraste en tu aplicación React. En este caso, estamos cargando con service_version="0.90" y la versión de servicio está configurada en "0.90" en la aplicación. Si cargas los mapas de origen con service_version="0.9" (y omites el último término 0), no funcionará.

Una vez que el mapa de servicio se carga en el servidor de APM, puedes encontrar todos los mapas de origen de esta solicitud en Herramientas de desarrollo (tu versión puede ser diferente):

GET apm-6.6.1-sourcemap/_search

Genera otro error y revisa nuevamente el rastreo de stack desde la pestaña de errores de la UI de APM. Verás el rastreo de stack como en la siguiente captura de pantalla, reflejando maravillosamente tu código fuente original. Ahora es mucho más fácil depurar e identificar problemas.

Después de implementar un mapa de origen, el código real ahora puede verse en APM de Elastic

Resumen

Esperemos que este blog deje en claro que instrumentar tus aplicaciones con RUM de Elastic es un proceso simple y fácil, pero extremadamente poderoso. Junto con otros agentes de APM para servicios de backend, RUM te ofrece una visión holística del rendimiento de la aplicación desde una perspectiva de usuario final a través del rastreo distribuido.

Una vez más, para comenzar con APM de Elastic, puedes descargar el servidor de APM de Elastic para ejecutarlo localmente o crear una cuenta de prueba de Elastic Cloud y tener un cluster listo en unos minutos.

Como siempre, accede al foro de Elastic APM si deseas abrir un debate o tienes alguna pregunta. ¡Feliz comienzo de RUM!