Este documento explica como o browser coleta e armazena dados do seu aplicativo assíncrono de página única (SPA). Isso lhe dará uma melhor compreensão dos dados do SPA que você vê na interface do browser. Isso também ajudará você a adicionar monitoramento personalizado com mais facilidade com a API SPA.
Interação do browser
No centro do monitoramento do SPA está o conceito de browser interaction. New Relic define uma interação do navegador, também chamada de navegação suave, como a seguinte sequência de eventos, extraída da heurística do Google:
- Ocorre uma interação do usuário. Buscamos especificamente por eventos
click,keydownousubmit. O eventopopstateda API do Histórico também iniciará uma interação. - A URL muda de alguma forma, seja o caminho ou o hash aplicado.
- Quaisquer alterações, incluindo no atributo do nó ou no texto, ocorrem em qualquer lugar na árvore DOM do documento.
Seguindo essas etapas, a interação do navegador será considerada concluída no próximo quadro de repintura. Eles também associarão XHR e buscarão requests iniciadas dentro de seu intervalo. A v2.1 introduziu outra etapa:
- Para a versão 2.1 e posteriores do SPA, o monitor verifica retorno de chamada de longa duração por no máximo 5 segundos. Se um retorno de chamada de longa duração for identificado, o sistema estende a interação atual e executa novamente o monitor.
a interação será concluída completamente quando houver um período de 5 segundos sem nenhuma tarefa longa. Durante o período de extensão que antecede o final da última tarefa longa observada, qualquer AjaxRequest e JavascriptError que ocorrer também será associado à interação. É importante ressaltar que a duração da interação não incluirá os últimos 5 segundos de inatividade.
Observe que a etapa quatro pode ser interrompida ou ignorada em certos cenários.
Dica
O gatilho de evento popstate é gerenciado exclusivamente em comparação a outros gatilhos de evento de interface devido ao seu comportamento específico em navegadores. Quando um evento popstate ocorre dentro de 500 milissegundos após outro evento de interface, como um clique, ele será mesclado à interação existente iniciada por esse evento, sem alterar o gatilho original da interação (por exemplo, 'clique'). Entretanto, dois eventos popstate consecutivos nunca serão mesclados dessa maneira.
A interação com popstate como gatilho geralmente se origina de ações do navegador, como usar o botão voltar ou avançar, ou de ações relacionadas ao código, como alterar programaticamente o URL.
Tipos de SPA relatório de dados
@@ -39,54 +38,39 @@ Três categorias principais de dados de aplicativos de página única podem ser relatadas ao New Relic:
Cada um deles cria um evento BrowserInteraction . Se uma ou mais solicitações AJAX fizerem parte de uma interação, então o evento AjaxRequest associado também será criado. Estes eventos e seus atributos podem ser consultados no criador de consulta.
Importante
A interação padrão ou não personalizada não aguarda a conclusão requests de rede. Elas são associadas à interação no estado em que se encontram, o que significa que somente requests concluídas antes da interação ser coletada pelo agendador são vinculadas a ela. Se uma solicitação de rede tiver uma duração lenta ou longa e começar como parte de uma interação, ela poderá ficar fora dessa janela de tempo e não ser associada à interação.
Como alternativa, você pode estender manualmente a duração de uma interação para garantir que ela permaneça aberta até que qualquer solicitação de rede importante retorne usando a API.
Carregamento inicial da página
Um initial page load é uma alteração de URL tradicional, decorrente de um carregamento ou recarregamento completo de uma URL. Isso é indicado no navegador quando um evento de carregamento de página é disparado (o evento window.onload ) e também é chamado de navegação difícil. Os carregamentos iniciais da página aparecem junto com as alterações de rota na interface do navegador.
Mudanças de rota
A rota dinâmica da experiência do usuário do SPA muda de maneira semelhante aos carregamentos de páginas. Os visitantes de um site ou aplicativo geralmente não se importam how uma nova visualização tenha sido entregue; eles simplesmente sabem que quando realizam uma ação, uma nova visão aparece. Por esse motivo, tratamos as alterações de rota de maneira semelhante aos carregamentos de páginas na interface.
Para monitorar de forma otimizada o aplicativo de página única, começamos a monitorar qualquer interação que possa teoricamente levar a alterações de rota.
- Se essas interações não completarem as etapas heurísticas definidas acima, o agente inicia o monitoramento, mas depois as descarta.
- Se essas interações do seguirem todos os passos, o agente salva a sequência como um evento
BrowserInteractionconcluído.
Uma interação é considerada uma alteração de rota e salva como um evento BrowserInteraction se a URL mudar entre o início e o fim. As alterações de URL são rastreadas de duas maneiras:
- O evento
popstate. Alterar a URL programaticamente, como definirwindow.location.hash, acionará esse evento. pushStateoureplaceStateé chamado. Os SPAs geralmente usam esses métodos da API de histórico para atualizar a URL.
As alterações de rota aparecem junto com os carregamentos iniciais da página na interface do browser.
Observe que os relatórios do agente aplicam fragmentos de hash de URLs de alteração de rota. Se você usar aplicar hash para passar dados privados ou confidenciais, esses dados poderão ficar visíveis para o usuário da sua conta New Relic. Para obter mais informações sobre coleta e relatórios de dados, consulte Segurança do navegador.
Monitoramento personalizado
Todos os aplicativos são diferentes e têm necessidades de monitoramento diferentes. Você pode usar a APIdo SPA para personalizar a interação do seu navegador ou definir a maneira como ela é capturada.
evento personalizado são salvos como BrowserInteraction evento e têm a seguinte diferença em atributo:
- O atributo
categoryterá o valorCustom. - O atributo
triggerterá o valorapi. (Este é o valor padrão, mas pode ser alterado com a API.)
A API permite que você determine quando iniciar e parar essa interação personalizada, caso a heurística acima não se ajuste à sua base de usuários ou aplicativo.
Evento e atributo
Salvamos interações do navegador que levam a alterações de rota e carregamentos de página, ou são criadas por meio de API, como evento BrowserInteraction, e requests AJAX como evento AjaxRequest. Você pode consultar estes eventos no criador de consulta.