Para começar a usar , você precisará adicionar nosso browser agente ao HTML das visualizações que deseja monitor. O browser agente é um trecho de código JavaScript que monitora o desempenho do seu aplicativo/site e envia esses dados para a New Relic. Você pode adicionar esse código manualmente ao seu site ou usar nosso agente APM para injetar esse código para você.
Antes de você começar
Antes de começar, você pode verificar se o aplicativo do seu browser atende aos nossos requisitos de compatibilidade.
Quer usar nossa API para monitor programaticamente seu aplicativo? Veja monitoramento de Browser com NerdGraph.
Instale o agente
Para instalar o browser agente: Acesse one.newrelic.com > Add data > Browser and mobile > Browser monitoring e siga as instruções.
Se você tiver dúvidas sobre o processo de instalação, consulte Métodos de instalação.
Procure seus dados no New Relic
Ao finalizar a instalação do agente browser, aguarde alguns minutos e procure os dados em nossa interface de monitoramento de Browser.
Se já se passaram mais de 15 minutos e você não está vendo os dados, consulte resolução de problemas.
Qual é o próximo?
Ideias para os próximos passos:
- Visualize os dados do seu aplicativo na página Resumo.
- Agora que você já conhece o agente browser, aprofunde seus dados com nosso tutorial Melhore seu site.
- Aprenda como otimizar sua experiência de monitoramento de browser com nosso guia de melhores práticas para monitoramento de browser.
Métodos de instalação
Quando se trata de adicionar o browser agente às suas páginas da web, você tem dois métodos de implantação:
- APM + monitoramento de Browser: Utilize um de nossos agentes APM para auto-instrumento de monitoramento de Browser
- Somente monitoramento de browser: Adicione nosso browser agente manualmente como um trecho JavaScript ao HTML do seu frontend
Aqui estão algumas orientações sobre esses dois métodos.
APM + monitoramento de browser
Se você estiver usando um agente APM (monitoramento de desempenho de aplicativos (APM)) para monitor o backend do seu aplicativo de browser, recomendamos usar este método. Recomendamos esta opção para aplicativos nãoSPA porque o agente APM implantará automaticamente o agente browser em todas as páginas do seu site e você obterá automaticamente a versão mais recente do agente browser sempre que reiniciar o agente APM.
Se quiser personalizar o comportamento do agente APM, você pode usar nossa API APM do agente. Aqui estão esses documentos:
Monitoramento apenas do browser
Use este método se você não puder usar o APM por qualquer motivo, como se o seu agente APM não tiver suporte para injeção automática (como acontece com Node.js e alguns aplicativos Java). Se você usar este método, a interface fornece um trecho de JavaScript personalizado no final do processo de instalação que você pode adicionar ao HTML de qualquer página que deseja monitor em seu site.
Cole o trecho JavaScript na tag HTML <head> da sua página. A tag head normalmente lida com scripts, fontes e outros elementos de terceiros que são carregados em todas as páginas do seu aplicativo, portanto, você só precisa colá-los em um só lugar. Cole-o o mais próximo possível do topo de <head> , mas depois de qualquer tag META sensível à posição (como X-UA-Compatible e charset). Para obter mais informações sobre o posicionamento do trecho, consulte Requisitos de posicionamento do JavaScript.
Como alternativa, e embora recomendemos FORTEMENTE o caminho do script embutido, você também pode usar um script src para inserir o agente de maneira async ou defer . Para advertências e detalhes, continue abaixo.
Atrasando monitoramento do Browser
Cuidado
Atrasar a instanciação faz com que o agente perca informações até que seja totalmente carregado e inicializado. A ordem de execução desses scripts leva a alguma perda nos dados de instrumentação desde o início das visualizações de página.
Por possível desempenho ou outros motivos, você pode atrasar a inicialização do agente browser desde o início do ciclo de carregamento da página. Você não poderá usar a API newrelic até que o agente seja totalmente inicializado. Esse atraso também cria dados incompletos na interface de monitoramento do seu browser.
Depois que o agente estiver totalmente inicializado, ele funcionará conforme o esperado. Qualquer atraso também afeta quando o agente encapsula globais ou assina um evento relativo a outra biblioteca ou código que afeta os dados capturados.
Você pode atrasar a inicialização do agente destas maneiras:
- Adicione uma tag
script-srccom o atributoasync. - Adicione uma tag
script-srccom o atributodefer. - Use importação dinâmica ou posicionamento cronologicamente atrasado do código do carregador.
src da sua página deve apontar para uma versão válida do carregador de agente em nosso CDN. Por exemplo, o URL que sempre contém nossa versão atual do agente Pro+SPA é https://js-agent.newrelic.com/nr-loader-spa-current.min.js. O CSP é necessário para carregar scripts externos de terceiros.
Para determinar quando você pode começar a chamar a API newrelic , inscreva-se em um evento no escopo global:
window.addEventListener('newrelic', (evt) => { if (evt.detail.loaded) { // you can start using newrelic.interaction(), etc. now }})