Diagnose API errors with front-to-back tracing - Application Real-Time Monitoring Service

El monitoreo del navegador muestra el tiempo de respuesta de una solicitud de API, pero no ofrece visibilidad sobre el rendimiento de la red ni el rastro de invocación del backend, lo que dificulta la resolución de problemas de API. El rastreo de extremo a extremo soluciona esto al vincular las llamadas de API del frontend con sus rastros completos en el backend, lo que proporciona una vista integral del ciclo de vida de la solicitud.

Requisitos previos

Debe haber activado el monitoreo del navegador y el monitoreo de aplicaciones para Application Real-Time Monitoring Service (ARMS). Para obtener más información, consulte Activate ARMS. El monitoreo de aplicaciones de ARMS requiere la versión 2.4.5 o posterior. Para conocer los detalles de configuración, consulte What is application monitoring?.

Contexto

El monitoreo de aplicaciones revela el rendimiento de la API en el backend y el rastro de invocación, pero no la experiencia real del usuario. El monitoreo del navegador solo muestra el tiempo total y el estado de una solicitud de API, y omite los detalles del backend. El rastreo de extremo a extremo cierra esta brecha al vincular las acciones del usuario en el frontend con los servicios del backend, y crea una experiencia unificada de resolución de problemas de principio a fin.

Configuración del monitoreo del navegador de ARMS

Solicitudes de API del mismo origen

Compruebe que exista una asignación entre su sitio de frontend y la aplicación de backend.
Asegúrese de que el reporte automático de API esté habilitado.

Establezca el parámetro enableLinkTrace en true para habilitar el rastreo de extremo a extremo. El siguiente código muestra un ejemplo de configuración:

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", enableLinkTrace: true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

Solicitudes de API de origen cruzado

Compruebe que exista una asignación entre su sitio de frontend y la aplicación de backend.

Establezca los parámetros enableLinkTrace y enableApiCors en true.

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", 
enableLinkTrace: true, enableApiCors: true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

Importante

Si establece el parámetro enableApiCors en true, su servicio de backend también debe admitir solicitudes de origen cruzado y valores de encabezado personalizados. Asegúrese de que todas las solicitudes funcionen correctamente durante las pruebas de integración. De lo contrario, las solicitudes podrían fallar. El siguiente código muestra un ejemplo de configuración de Nginx:

upstream test {
        server 192.168.220.123:9099;
        server 192.168.220.123:58080;
    }
    server {
        listen    5800;
        server_name  192.168.220.123;
        root         /usr/share/nginx/html;
        include /etc/nginx/default.d/*.conf;
        location / {
            proxy_pass http://test;
            proxy_set_header Host $host:$server_port;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Real-PORT $remote_port;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   EagleEye-TraceID $eagleeye_traceid;
            proxy_set_header   EagleEye-SessionID $eagleEye_sessionid;
            proxy_set_header   EagleEye-pAppName $eagleeye_pappname;
        }

Para configurar la exclusión, consulte ignore. La configuración es la siguiente:

let whitelist = ['api.xxx','source3']; // Whitelist.
let blacklist = ['source2','source6']; // Blacklist.
// Choose between a whitelist or blacklist based on your needs by returning true or false in the function.
ignore: {
            ignoreApis: [
                function(str) {   // Function.
                    if (whitelist.includes(str)) {
                        return false;
                    }
                    return true; // Return true to ignore.
                }]
         }

Nota

El parámetro ignore actúa como lista de permitidos o lista de bloqueados. Evita la modificación de encabezados en solicitudes a recursos específicos de terceros, lo que ayuda a prevenir errores en las solicitudes.

Funcionamiento

Cuando el reporte automático de API está habilitado, el SDK agrega dos encabezados personalizados, EagleEye-TraceID y EagleEye-SessionID, a las solicitudes de API enviadas al mismo origen.
Si la solicitud de API se envía a un origen diferente, el SDK no agrega estos encabezados personalizados. Esto garantiza que la solicitud de origen cruzado se pueda enviar sin errores.
Para comprobar que la configuración de rastreo de extremo a extremo está activa, abra la consola de desarrollador de su navegador e inspeccione los encabezados de solicitud de una llamada de API. Si los encabezados EagleEye-TraceID y EagleEye-SessionID están presentes, la función está activa.

Aviso
Los valores de EagleEye-TraceID y EagleEye-SessionID tienen significados específicos y se generan automáticamente. No los genere manualmente.

Casos de uso y ejemplos

La línea de tiempo ayuda a determinar si la alta latencia proviene del transporte de red o del proceso de backend. Al hacer clic en la pila de métodos de la aplicación de backend, se muestra el rastro completo de invocación del backend para la solicitud.

Si una API devuelve un código de error o se produce un error de lógica de negocio, siga estos pasos para identificar la causa:
1. Inicie sesión en la consola de ARMS. En el panel de navegación izquierdo, elija Browser Monitoring > Browser Monitoring.
2. En la página Browser Monitoring, seleccione una región en la barra de navegación superior y haga clic en el nombre de la aplicación que desea gestionar.
3. En el panel de navegación izquierdo, haga clic en API request.
4. En la sección API link trace (TOP 20) de la derecha, busque la API relevante o el ID de rastro en la API failure list y haga clic en Managed Service for OpenTelemetry en la columna Actions. Esto abre una vista que muestra el tiempo general del frontend y una línea de tiempo de las llamadas al backend.
  
  Los resultados del rastro se muestran en una tabla en la pestaña Invocation trace. Las columnas incluyen Application name, Log time, Status, IP address, Invocation type, Service name, Method stack, Thread profiling y Timeline. En esta tabla, puede consultar el tipo de invocación (como Browser o HTTP Entry), el estado (un punto rojo indica un error, un punto verde indica éxito) y una comparación del tiempo empleado por cada tramo.
5. Utilice la línea de tiempo para determinar si la alta latencia se debe al transporte de red o al procesamiento del backend.
6. Para la aplicación de backend, haga clic en el icono de lupa en la columna Method Stack para ver el rastro completo de invocación del backend correspondiente a esta solicitud. Luego podrá identificar la causa del error de API según su lógica de negocio.
  
  El panel de detalles del rastro de invocación muestra una tabla con la jerarquía de llamadas, el número de línea, la información extendida y la línea de tiempo (en milisegundos) de cada método. Los nombres de métodos con latencia inusualmente alta se resaltan en rojo, y las barras azules de la derecha visualizan la proporción de tiempo de cada método, lo que le permite localizar rápidamente los cuellos de botella de rendimiento.
Si una solicitud de API presenta alta latencia, siga estos pasos para identificar la causa:
1. Inicie sesión en la consola de ARMS. En el panel de navegación izquierdo, elija Browser Monitoring > Browser Monitoring.
2. En la página Browser Monitoring, seleccione una región en la barra de navegación superior y haga clic en el nombre de la aplicación que desea gestionar.
3. En el panel de navegación izquierdo, haga clic en API request.
4. En la sección API link trace (TOP 20) de la derecha, ordene las API por duración de solicitud en orden descendente para encontrar la API o el ID de rastro con alta latencia.
5. Haga clic en el enlace Managed Service for OpenTelemetry en la columna Actions para ver el tiempo general del frontend y una línea de tiempo de las llamadas al backend.
  - Si un tiempo corto de procesamiento en el backend va acompañado de un tiempo de respuesta total largo, esto indica alta latencia de red. En este caso, haga clic en View details para inspeccionar los detalles de la sesión, incluidos red, región, navegador, dispositivo y sistema operativo.
  - Si el tiempo de procesamiento del backend es largo, indica un rendimiento deficiente. Haga clic en el icono de lupa en la columna Method Stack. En el cuadro de diálogo de pila de métodos local, examine el rastro del backend para encontrar la parte que consume más tiempo y precisar el problema.