Diagnosticar falhas de AJAX é difícil quando você tem apenas metadados como URL, código de status e duração. Frameworks modernos como o GraphQL tornam isso ainda mais difícil — os erros podem se esconder dentro do corpo da resposta mesmo quando um request parece bem-sucedido.
Nossa interface AJAX oferece visibilidade total dos requests AJAX de browsers para endpoint HTTP ou HTTPS externo. Você pode identificar chamadas demoradas ou com falha, capturar a carga completa de request e resposta e fazer o trace de problemas em toda a sua stack. Você também pode analisar problemas por tipo de dispositivo, incluindo browser de desktop, dispositivos móveis e tablets.
O que solucionar
Aqui estão algumas dicas de resolução de problemas para identificar problemas de desempenho em seu aplicativo:
Resolução de problemas chamadas AJAX
Exemplos
Problemas em toda a solicitação
Se você não tiver certeza de onde está o problema ou quiser trace suas solicitações do início ao fim, clique no link distributed tracing na interface AJAX.
Problemas de tempo
As porcentagens de tempo total, as taxas de transferência de solicitações por minuto (rpm) e as taxas médias de transferência de dados por solicitação podem ajudar a identificar problemas de tempo.
Procure picos grandes no gráfico Average data transfer per request da página de resumo AJAX .
Analise as tendências dos seus dados usando a lista suspensa Group By para avaliar o desempenho do AJAX por URL de solicitação, nomes de operações do GraphQL e muitos outros campos.
Na guia AJAX performance da chamada individual, procure correlações entre valores altos de tempo de retorno de chamada e taxas de transferência de dados.
Problemas de endpoint
Procure qualquer endpoint outlier e investigue as solicitações individuais feitas a partir deles.
O gráfico Status codes na página de resumo AJAX fornece informações sobre o comportamento de retorno da chamada. Se você vir um grande número de códigos de status fora do intervalo 200 , isso pode indicar um problema com seu endpoint AJAX.
Problemas específicos de localização de páginas da web
Examine possíveis problemas de AJAX no contexto da página onde eles são carregados. Selecione uma transação AJAX e selecione qualquer trace da tabela Session traces with AJAX .
Investigar requests AJAX
Para solucionar problemas com solicitações AJAX para seu aplicativo:
Selecione o tipo de dispositivo: desktop (padrão), mobile e tablet.
Clique em uma solicitação AJAX.
Depois de se concentrar em um request AJAX, é hora de investigar. Tente algumas destas estratégias:
A página de resumo fornece vários gráficos para ajudá-lo a solucionar problemas de chamadas AJAX.
Página de resumo AJAX
Comentários
Grupos e filtros
Use qualquer uma das opções de Sort by disponíveis na interface. Todos os requests AJAX que demoram mais de dois minutos são filtrados automaticamente.
Use a opção Group by para selecionar requestUrl ou groupedRequestUrl para obter mais flexibilidade na visualização de seus dados.
Ponto final
O gráfico Throughput mostra os cinco endpoints com as maiores taxas de transferência. Se a chamada tiver mais de cinco endpoints, eles serão consolidados no gráfico como Other.
Chamadas da New Relic
Você pode ver nosso próprio monitoramento de chamadas AJAX do browser para seu aplicativo. Isso é normal porque toda a atividade é capturada durante a sessão do browser.
Faltando dados do browser
Os detalhes de tempo do AJAX não estão disponíveis no browser IE 7, IE 8 ou Chrome para iOS. Caso você não veja os dados esperados de outro browser, siga nossos procedimentos de resolução de problemas AJAX.
Depois de selecionar uma chamada específica na página de resumo AJAX , você poderá detalhar informações detalhadas com o link AJAX performance . Isso inclui um link direto para rastrear detalhes da sessão.
A partir daqui você também pode selecionar a guia para obter dados de desempenho por visualizações de página. (Se as solicitações do servidor do seu aplicativo superam em muito a transação do seu browser PageView, isso ocorre porque algumas solicitações ao seu backend são feitas por meio de AJAX. Para obter mais informações, consulte nossos procedimentos de resolução de problemas.)
one.newrelic.com > All capabilities > Browser > (select an app) > AJAX > (select an AJAX call): este exemplo mostra detalhes de desempenho para uma chamada AJAX específica. Você também pode visualizar detalhes de desempenho por visualizações de página.
Quatro períodos de tempo (Application time, Queue time, Network time e Callback time): Essas chamadas AJAX são feitas em aplicativos monitorados pelo agente que fornece cabeçalhos de rastreamento multiaplicativo.
Dois períodos de tempo (Response time e Callback time): Essas chamadas AJAX são feitas em aplicativos que não são monitorados pelo agente APM ou são monitorados por agentes que não fornecem cabeçalhos de rastreamento multiaplicativo.
Importante
A captura de carga requer o agente do browser versão 1.317.0 ou superior.
Quando metadados como URL, código de status e duração não são suficientes para diagnosticar uma falha, a opção de captura de carga fornece o quadro completo. Ele adiciona quatro novos atributos a cada evento AjaxRequest, cada um truncado em 4KB e consultável em NRQL. Você também pode usar o botão View payload para ver a carga na interface de detalhes do AJAX:
one.newrelic.com > All capabilities > Browser > (select an app) > AJAX > (select an AJAX call): Este exemplo mostra detalhes da solicitação para uma chamada AJAX específica. Você também pode visualizar detalhes da solicitação por visualizações de página.
Como a captura de carga interage com a lista de negação
Se o URL estiver na lista de negação, o evento é totalmente descartado e não são capturados metadados ou carga.
Se o URL não estiver na lista de negação, com base nas suas configurações de captura de carga, o agente captura a carga de solicitação e resposta e aplica regra de ofuscação antes de enviar os dados para a New Relic.
Proteção de PII
O agente do browser ofusca automaticamente padrões comuns de dados confidenciais em cargas capturadas antes da ingestão, incluindo números de cartão de crédito, números de Seguro Social e chaves comuns como password e token. Você também pode configurar regras regex personalizadas para mascarar dados confidenciais específicos do negócio. Para obter mais informações, consulte Ofuscar dados do navegador.
Para trace suas solicitações do início ao fim, você também pode clicar no link distributed tracing na interface AJAX.
Para visualizar uma lista de rastreamentos distribuídos, clique no link na interface AJAX no nível de resumo AJAX.
Para visualizar todos os rastreamentos filtrados pelo seu aplicativo e um tipo de solicitação específico, clique no link distributed tracing da solicitação selecionada na interface AJAX.
Quando você classifica a lista de categorias AJAX por Total time percentage, a lista mostra a porcentagem para cada categoria AJAX. Além disso, o gráfico mostra as principais solicitações com as maiores porcentagens de tempo.
Para apresentar essas informações, o browser pega o tempo de solicitação cumulativo para cada categoria AJAX e o divide pelo tempo de solicitação cumulativo para todas as solicitações AJAX. Isto ajuda a identificar onde otimizar o tempo de resposta, porque os pedidos de taxas de transferência elevadas serão favorecidos em detrimento dos pedidos de taxas de transferência baixas.
Example: Calculating time percentages for two AJAX categories
Este exemplo usa duas categorias AJAX: api1.example.com e api2.example.com.
Seu api1.example.com é atingido 1 vez e leva 1 segundo (1000 ms) para responder (1 x 1 segundo = 1 segundo).
Seu api2.example.com é atingido 500 vezes e leva 1 ms para responder (500 x 1 ms = 500 ms ou 0,5 segundo).
O tempo de solicitação cumulativo para todas as suas categorias AJAX é de 1.500 ms ou 1,5 segundos. Para obter as porcentagens de tempo, divida cada categoria AJAX pelo tempo de solicitação cumulativo e multiplique por 100 para obter a porcentagem.
Portanto, api1.example.com é 67% (1.000 dividido por 1.500, vezes 100) e api2.example.com é 33% (500 dividido por 1.500, vezes 100) da porcentagem de tempo total.
Time calculations
api1
api2
Número de acessos
1
500
Hora de responder
1 segundo (1000ms)
1 acerto x 1000ms = 1000ms (1 segundo)
1 milissegundo (1ms)
500 acertos x 1 ms = 500 ms (0,5 segundo)
Tempo de solicitação cumulativo para todas as categorias AJAX
1000ms + 500ms = 1500ms (1,5 segundos)
1000ms + 500ms = 1500ms (1,5 segundos)
Porcentagem de tempo = categoria/tempo de solicitação cumulativo de 1.500 ms x 100 para porcentagem
1000 ms/1500 x 100 = 67%
500ms/1500 x 100 = 33%
Qual é o próximo
Além da interface AJAX , você também pode usar estes recursos:
Ajude a evitar a ocorrência de problemas usando alertas para seus principais indicadores de desempenho.
