Importante
Estamos implementando esse recurso em fases usando um sinalizador de recurso para substituir a experiência SPA do navegador existente por padrão. Não haverá a opção de escolher qual nova versão do SPA você receberá; você sempre receberá a versão mais recente automaticamente.
SPA 2.1
A consideração de tarefas longas foi introduzida para substituir o extenso rastreamento de retorno de chamada usado em aplicativos de página única (SPA) mais antigos. Ele também serve para preencher os atributos jsDuration, timeToSettle e timeToLastCallbackEnd do(s) evento(s) AjaxRequest associados a um BrowserInteraction.
Para objetos selecionados do navegador nativo encapsulados pelo nrWrapper do agente, seu retorno de chamada será cronometrado. Aqueles com duração superior a 50 ms (tarefa longa) podem estender uma BrowserInteraction. Na versão 2.0, o recurso seguia uma heurística de navegação suave para determinar quando uma interação ocorria naturalmente. Agora, a interação também aguardará e estenderá sua duração até um período sem tarefa longa de 5 segundos, e seu tempo de término será reajustado de acordo.
Anteriormente, na versão 2.0, o AjaxRequest associado à interação não relatava ou rastreava o tempo de retorno de chamada, resultando em valores anulados para os três atributos mencionados acima. Com a atualização atual, XMLHttpRequest (mas não fetch) que faz parte de uma interação e inclui ouvintes de eventos que causam tarefas longas terão os atributos jsDuration, timeToSettle e timeToLastCallbackEnd atualizados para refletir o tempo de retorno de chamada longo.
SPA 2.0
Para clientes de monitoramento de browser de página única (SPA), temos o prazer de anunciar uma reformulação da nossa funcionalidade de monitoramento de SPA, destinada a resolver vários pontos problemáticos:
- Versões mais recentes inutilizáveis: conflitos frequentes com bibliotecas de terceiros e captura de interação não confiável afetavam o agente existente, muitas vezes tornando a versão mais recente inutilizável.
- Soluções fragmentadas: resolver um problema com patches do SPA geralmente introduzia outro, criando um ciclo frustrante de correções e regressões.
- Conflitos com bibliotecas de terceiros: o encapsulamento global, principalmente em torno de Promises, frequentemente interrompia a funcionalidade do código devido a conflitos com outras bibliotecas.
- desempenho gargalo: Conflitos com código usando temporizadores, RAF e cadeia de promessas levaram a problemas de desempenho, variando de lentidão a travamentos.
A experiência de monitoramento do SPA atualizada foi projetada para eliminar esses problemas e fornecer uma experiência de monitoramento significativamente melhorada. As principais mudanças incluem:
- Execução desembrulhada: ao não envolver globais principais, a nova experiência SPA libera aumentos de velocidade de execução para seu aplicativo. 
- Alinhado com a heurística de navegação suave: a nova experiência adota a navegação suave do Google Chrome, proporcionando rastreamento de interação mais preciso e alinhamento aprimorado com o comportamento do browser. 
- Determinação de interação simplificada: as interações agora são definidas como um evento de interface (clique/pressione a tecla/envie -> alteração de rota -> modificação DOM ), oferecendo uma abordagem de captura mais clara e eficiente. - Possível dissociação de eventos: você pode observar eventos AjaxRequesteJavascriptErrorpreviamente associados se dissociando da interação, refletindo o foco na interação orientada pela interface.
 
- Possível dissociação de eventos: você pode observar eventos 
- Foco na métrica principal: embora os dados relatados permaneçam praticamente inalterados, a nova experiência não rastreia mais a execução do JavaScript nem a duração do retorno de chamada dentro da interação, simplificando as informações relatadas. 
- Durações de interação reduzidas: espere durações de interação significativamente mais curtas, principalmente para mudanças de rota. Os carregamentos iniciais das páginas sofrerão uma ligeira redução. 
- Atualizações da API: - Novo argumento opcional .interaction({waitForEnd: true})adicionado à função.interaction(): permite a personalização do horário de término da interação do usuário. A funcionalidade.interaction()existente permanece inalterada.
- API obsoleta: A função createTracer: Embora ainda funcional, a funçãocreateTracerestá obsoleta, pois não mantém mais a interação aberta ou retorno de chamada. Observação: se você continuar a usarcreateTracercom a nova experiência do SPA, o eventoBrowserTimingnão será criado.
 
- Novo argumento opcional 
Experimente a nova experiência de monitoramento de SPA do browser
Revise os requisitos
Este recurso é testado e suportado de acordo com nossa declaração padrão de suporte ao browser.
Adicione o sinalizador de recurso
Se o seu agente foi instalado com o método APM, entre em contato com nossa equipe de suporte e habilitaremos o sinalizador de recurso em sua conta.
Se o seu agente foi instalado com o NPM ou o método de copiar/colar baseado em interface, adicione o seguinte sinalizador de recurso ao código do agente do browser:
- Encontre o código do agente do New Relic Browser no HTML da sua página da web. 
- No objeto de configuração - init, adicione o sinalizador de recurso- soft_nav. Aqui está um exemplo:<script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, feature_flags: ['soft_nav'] }:
- Implantar seu aplicativo. - Precisa desabilitar esse recurso? Basta remover o sinalizador de recurso. 
Confirme se os dados estão sendo enviados para o New Relic
Primeiro, verifique se sua interação segue a heurística: clicar/pressionar tecla/enviar -> alteração de rota -> modificação DOM .
Em seguida, verifique a aba de rede nas ferramentas de desenvolvimento do seu browser. Filtrar solicitações indo para /events/1/. Deve haver aqueles cuja carga começa com bel.7;1, indicando que sua interação está sendo capturada e enviada.
Por fim, os dados de interação devem continuar a fluir para o painel e gráficos do seu browser.
Problemas conhecidos
- Uso da API: - newrelic.interaction().end()Solução alternativa: se você usou isso anteriormente para resolver problemas de fechamento de interação, agora poderá ver interação extra e desnecessária. Revise seu uso para garantir resultados ideais.
- createTracer()alteração de funcionalidade:- createTracer()não mantém mais a interação aberta nem cronometra o retorno de chamada. Se você confiou nisso para rastrear código JavaScript, explore abordagens alternativas.
 
- AjaxRequestassociação:- Possível exclusão da interação: solicitações Ajax iniciadas perto do final da interação anterior agora podem ser excluídas devido à duração reduzida da interação.
- Extensão manual: se você precisar que uma solicitação seja atribuída a uma interação específica, use o argumento .interaction({waitForEnd: true})adicionado à função.interaction()para manter a interação aberta até que a solicitação seja disparada e, em seguida,.end()a interação. Isso associará a solicitação à interação.
 
Deixar feedback
Envie um problema no GitHub para relatar quaisquer bugs, solicitações de recursos ou melhorias de desempenho.
Para qualquer outro feedback, compartilhe suas ideias e sugestões enviando um e-mail para browser-agent@newrelic.com com um assunto começando com [SoftNav]: .