Application Real-Time Monitoring Service:Diagnóstico de erros de JS

Acesse o recurso

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 nome da aplicação que deseja gerenciar.

3. No painel de navegação à esquerda, escolha Application > JS Error Diagnostics.

   Selecione um intervalo de tempo no canto superior direito da página JS Error Diagnostics.

Visão geral dos erros

A seção Error Overview exibe estatísticas principais e tendências de erros de JS no intervalo de tempo selecionado, incluindo as seguintes métricas:

• Errors: Quantidade total de erros de JS no intervalo de tempo selecionado.

• JS Error Rate: Percentual de visualizações de página com erro em relação ao total de visualizações no período escolhido.

• Affected Users: Número e percentual de usuários afetados por erros de JS.

Na seção Error Overview, é possível:

• Passar o mouse sobre o gráfico para exibir uma dica de ferramenta com a quantidade de erros, taxa de erro e usuários afetados naquele momento específico.

• Posicionar o cursor sobre um ponto de dados no gráfico até que ele se transforme em um ícone de mão e clique em ponto para abrir a caixa de diálogo Exception Insight. Para mais informações, consulte Visualize Exception Insight.

• Clique e arraste o mouse por uma seção do gráfico para ampliar um período específico. Para restaurar a visualização original, clique em Reset Zoom no canto superior direito.

Exception insight

A caixa de diálogo Exception Insight apresenta detalhes sobre erros de JS em um ponto específico no tempo, abrangendo as seguintes métricas:

• Errors: Total de erros de JS registrados no instante correspondente.

• JS Error Rate: Proporção de visualizações de página com falhas em relação ao total de acessos naquele momento.

• Affected Users: Contagem e percentual de usuários afetados pelos erros de JS.

• High frequency error Top 5: Os cinco erros de JS mais frequentes no ponto temporal analisado, contendo a mensagem capturada pelo ARMS, a quantidade de ocorrências e o número de usuários afetados.

• Page Error Rate Top 5: As cinco páginas com maiores taxas de erro de JS no instante avaliado, listando nome da página, taxa de erro e volume de visualizações.

Na caixa de diálogo Exception Insight, é possível:

• Clique em aba High frequency error Top 5. Na coluna Actions, clique em Diagnosis para acessar a página Error details. Consulte também Visualize detalhes do erro.

• Selecione a aba Page Error Rate Top 5. Na coluna Actions da página desejada, clique em Analyze para ver a visão geral dos erros dessa página.

Páginas por taxa de erro

A aba Page Ranked by Error Rate relaciona as páginas onde ocorreram erros de JS, ordenadas pela taxa de erro em ordem decrescente para o intervalo de tempo selecionado. A lista contém as seguintes métricas:

• Page: Página onde o erro de JS foi registrado.

• Error Rate: Percentual de visualizações com erro em relação ao total de acessos da página no período definido.

• Views: Volume de visualizações da página.

Na coluna Actions, clique em Analyze para visualizar a visão geral dos erros daquela página específica.

Erros frequentes

A aba Frequent Errors lista os erros de JS ocorridos no intervalo de tempo selecionado, classificados pelo número de ocorrências em ordem decrescente. Esta lista inclui as seguintes métricas:

• Error Message: Mensagem do erro de JS capturada pelo ARMS.

• Page: Página onde o erro de JS aconteceu.

• Errors: Quantidade de vezes que o erro de JS ocorreu.

• Affected Users: Número e percentual de usuários afetados pelo erro de JS.

Na coluna Actions, clique em Diagnosis para ir até a aba Error details. Para mais detalhes, veja Visualize detalhes do erro.

Detalhes do erro

A aba Error details apresenta as seguintes informações:

• Summary

  • Name

  • Type

  • Time (Momento em que o erro de JS foi detectado)

  • Device

  • Operating System

  • Browser

  • IP

  • Network Type

  • Region

  • Lines

  • Column

  • URL

  • File (Caminho do arquivo onde o erro de JS ocorreu)

  • App Version

• Stack Information: Sequência de chamadas de função que resultaram no erro.

• User Behavior Backtracking: Rastreamento das ações do usuário para auxiliar na reprodução do erro.

Na aba Error details, realize as seguintes operações:

• Para identificar a localização exata de um erro de JS, expanda uma entrada na seção Stack Information e clique em Select SourceMap File. Na caixa de diálogo SourceMap File, selecione um source map existente ou faça upload de um novo e clique em OK.

  Em seguida, o ARMS utiliza o source map para correlacionar o código minificado ao código-fonte original, revelando a localização precisa do erro.

• Para acompanhar a jornada do usuário, consulte a seção Rastreamento de comportamento do usuário.

• Para analisar a distribuição do erro, clique em aba Error Distribution.

Rastreamento de comportamento do usuário

A seção User Behavior Backtracking na aba Error details mostra a jornada do usuário para ajudar a reproduzir o contexto de um erro.

A seção stack trace exibe a mensagem de erro específica, como Error Request failed with status code 504, além da pilha de chamadas detalhada. O log de comportamento inclui tipos de eventos como API request, click event e page navigation, organizados cronologicamente. Clique em View Session para visualizar a sessão completa.

Distribuição de erros

A aba Error Distribution na página de diagnóstico de erros de JS demonstra como um erro específico se distribui nas seguintes dimensões:

• Time View: Suportado apenas para distribuição de erros no nível da página.

• Browser View

• Operating System Distribution

• Device Distribution

• Version View

• Geographical View: As estatísticas são agregadas por província, município ou região autônoma na visualização da China e por país/região na visualização mundial.

Na aba Error Distribution, é possível:

• Na seção Time View, passe o mouse sobre o gráfico de distribuição para ver a contagem específica de erros.

• Nas seções Operating System Distribution, Device Distribution, Version View e Browser View, posicione o cursor sobre o gráfico de distribuição para visualizar a contagem exata de erros e sua porcentagem.

• Na seção Geographical View, dentro da aba China ou World, clique em seta no cabeçalho da coluna Errors para ordenar a tabela em ordem crescente ou decrescente.

Perguntas frequentes

• Como ativar ou desativar o recurso de rastreamento de comportamento do usuário?

  Esse recurso vem ativado por padrão. Para desativá-lo, adicione o item de configuração do SDK behavior: false ao objeto config. Para obter mais informações sobre configurações do SDK, consulte Referência do SDK.

• Após ativar o rastreamento de comportamento do usuário, as mensagens impressas por console.log durante a depuração apontam para o arquivo bl.js do SDK do ARMS em vez de sua localização no código-fonte. Como resolver isso?

  Isso acontece porque o ARMS monitora a saída no console do navegador sobrescrevendo métodos do objeto console, como log. A solução é a seguinte:

  • Método 1 (Recomendado): Configure o blackboxing no Chrome.

    1. Abra o Chrome. Pressione Ctrl+Shift+I para abrir o DevTools e clique em ícone de configurações.

    2. No painel de navegação à esquerda do painel Settings, clique em Blackboxing. Clique em Add pattern. No campo Pattern, insira /bl.*\.js$ e clique em Add.

  • Método 2: Desative o rastreamento de comportamento do usuário usando o item de configuração do SDK behavior: false.

    <script>
        ! (function ( c , b, d, a ) {
            c [a] || ( c[a] = {});
            c [a].config = {
                pid: "xxxxx",
                imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
                sendResource: true,
                enableLinkTrace: true,
                behavior: false
            };
            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>

  Depois de seguir as etapas acima, as mensagens impressas por console.log apontarão para a localização correspondente no código-fonte.

Tópicos relacionados