Application Real-Time Monitoring Service:Diagnosticar erros de API com rastreamento de ponta a ponta

Pré-requisitos

Ative o monitoramento de navegador e o monitoramento de aplicativos para o Application Real-Time Monitoring Service (ARMS). Para mais informações, consulte Ativar o ARMS. O monitoramento de aplicativos do ARMS requer a versão 2.4.5 ou posterior. Para detalhes de configuração, consulte O que é monitoramento de aplicativos?.

Contexto

O monitoramento de aplicativos revela o desempenho da API no backend e o rastro de invocação, mas não reflete a experiência real do usuário. Já o monitoramento de navegador mostra apenas o tempo total e o status de uma requisição de API, sem detalhes do backend. O rastreamento de ponta a ponta preenche essa lacuna ao conectar as ações do usuário no frontend aos serviços de backend, criando uma experiência unificada de solução de problemas de ponta a ponta.

Configure o monitoramento de navegador do ARMS

Requisições de API de mesma origem

1. Verifique se existe um mapeamento entre seu site de frontend e o aplicativo de backend.

2. Confirme se o relatório automático de API está ativado.

3. Defina o parâmetro enableLinkTrace como true para ativar o rastreamento de ponta a ponta. O código a seguir mostra um exemplo de configuração:

   <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>                         

Requisições de API de origem cruzada

1. Verifique se existe um mapeamento entre seu site de frontend e o aplicativo de backend.

2. Defina os parâmetros enableLinkTrace e enableApiCors como 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

   Se você definir o parâmetro enableApiCors como true, seu serviço de backend também precisará oferecer suporte a requisições de origem cruzada e valores de cabeçalho personalizados. Garanta que todas as requisições funcionem corretamente durante os testes de integração. Caso contrário, as requisições poderão falhar. O código a seguir mostra um exemplo de configuração do 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;
           }

3. Para configurar a exclusão, consulte ignore. A configuração é a seguinte:

   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

   O parâmetro ignore funciona como uma lista de permissões ou uma lista de bloqueios. Ele impede modificações de cabeçalho em requisições para recursos específicos de terceiros, ajudando a evitar erros de requisição.

Como funciona

• Quando o relatório automático de API está ativado, o SDK adiciona dois cabeçalhos personalizados, EagleEye-TraceID e EagleEye-SessionID, às requisições de API enviadas para a mesma origem.

• Caso a requisição de API seja enviada para uma origem diferente, o SDK não adiciona esses cabeçalhos personalizados. Isso garante que a requisição de origem cruzada seja enviada sem erros.

• Para verificar se a configuração de rastreamento de ponta a ponta está ativa, abra o console de desenvolvedor do navegador e inspecione os cabeçalhos de requisição de uma chamada de API. Se os cabeçalhos EagleEye-TraceID e EagleEye-SessionID estiverem presentes, o recurso estará ativo.

  Aviso

  Os valores para EagleEye-TraceID e EagleEye-SessionID têm significados específicos e são gerados automaticamente. Não os gere manualmente.

Casos de uso e exemplos

A linha do tempo ajuda a determinar se a alta latência tem origem no transporte de rede ou no processamento do backend. Ao clicar na pilha de métodos do aplicativo de backend, você visualiza o rastro completo de invocação da requisição.

• Se uma API retornar um código de erro ou ocorrer um erro de lógica de negócios, siga estas etapas para identificar a causa:

  1. Faça login no console do ARMS. No painel de navegação à esquerda, escolha Browser Monitoring > Browser Monitoring.

  2. Na página Browser Monitoring, selecione uma região na barra de navegação superior e clique em no nome do aplicativo que deseja gerencie.

  3. No painel de navegação à esquerda, clique em API request.

  4. Na seção API link trace (TOP 20) à direita, localize a API relevante ou o ID de rastro na API failure list e clique em Managed Service for OpenTelemetry na coluna Actions. Essa ação abre uma visualização que mostra o tempo geral do frontend e uma linha do tempo das chamadas de backend.

     Os resultados do rastro aparecem em uma tabela na aba Invocation trace. As colunas incluem Application name, Log time, Status, IP address, Invocation type, Service name, Method stack, Thread profiling e Timeline. Nessa tabela, é possível visualizar o tipo de invocação (como Browser ou HTTP Entry), o status (um ponto vermelho indica erro; um ponto verde, sucesso) e uma comparação do tempo gasto por cada span.

  5. Utilize a linha do tempo para determinar se a alta latência foi causada pelo transporte de rede ou pelo processamento do backend.

  6. Para o aplicativo de backend, clique em no ícone de lupa na coluna Method Stack para visualizar o rastro completo de invocação desta requisição. Em seguida, identifique a causa do erro da API com base na sua lógica de negócios.

     O painel de detalhes do rastro de invocação exibe uma tabela com a hierarquia de chamadas, número da linha, informações estendidas e linha do tempo (em milissegundos) para cada método. Nomes de métodos com latência anormalmente alta são destacados em vermelho, e as barras azuis à direita visualizam a proporção de tempo de cada método, ajudando a localizar rapidamente gargalos de desempenho.

• Caso uma requisição de API apresente alta latência, siga estas etapas para identificar a causa:

  1. Faça login no console do ARMS. No painel de navegação à esquerda, escolha Browser Monitoring > Browser Monitoring.

  2. Na página Browser Monitoring, selecione uma região na barra de navegação superior e clique em no nome do aplicativo que deseja gerencie.

  3. No painel de navegação à esquerda, clique em API request.

  4. Na seção API link trace (TOP 20) à direita, ordene as APIs pela duração da requisição em ordem decrescente para encontrar a API ou o ID de rastro com alta latência.

  5. Clique em no link Managed Service for OpenTelemetry na coluna Actions para visualizar o tempo geral do frontend e uma linha do tempo das chamadas de backend.

     • Se um curto tempo de processamento do backend acompanhar um longo tempo de resposta geral, isso indica alta latência de rede. Nesse caso, clique em View details para inspecionar os detalhes da sessão, incluindo rede, região, navegador, dispositivo e sistema operacional.

     • Quando o tempo de processamento do backend for longo, isso indica baixo desempenho. Clique em no ícone de lupa na coluna Method Stack. Na caixa de diálogo da pilha de métodos locais, examine o rastro do backend para encontrar a parte que consome mais tempo e identificar o problema.