Instale o agente do browser

Para começar a usar , adicione nosso navegador agente ao HTML das visualizações que você deseja monitor. O agente navegador é um trecho de código JavaScript que monitora o desempenho do seu site e envia esses dados para New Relic.

Antes de você começar

Caso ainda não tenha feito isso, verifique se o aplicativo do seu navegador atende aos nossos requisitos e compatibilidade.

Existem quatro maneiras de instalar o navegador agente. Dependendo de suas necessidades específicas, você pode:

Acesse one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoring e siga as instruções para gerar o trecho JavaScript do navegador na interface.

Obtenha seu trecho do navegador

Depois de obter o trecho, cole-o o mais próximo possível do topo da tag <head>, mas depois de qualquer tag META sensível à posição (como X-UA-Compatible e charset).

Para obter informações mais detalhadas sobre a colocação do trecho, consulte Requisitos de posicionamento do JavaScript.

(Se desejar instalar o navegador agente via npm, consulte nosso pacote@newrelic/browser-agent .)

Cuidado

Atrasar a instanciação faz com que o agente perca informações até que esteja totalmente carregado e inicializado. A ordem de execução desses scripts leva a alguma perda de 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-src com o atributo async .
Adicione uma tag script-src com o atributo defer .
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
  }
})
```

Com um agente APM, você pode implantar monitoramento de Browser sem adicionar manualmente o trecho ao seu código. Ao reiniciar o agente, ele usa automaticamente a versão mais recente do navegador do agente.

Se você estiver usando um agente APM (monitoramento de desempenho de aplicativos) para monitor o backend do seu aplicativo de navegador e tiver um aplicativo nãoSPA , recomendamos usar este método.

Existem etapas específicas para cada agente APM:

Se preferir criar seu navegador trecho de forma programática, você pode fazê-lo através do nosso NerdGraph, nossa API GraphQL.

Para saber mais sobre isso, consulte nosso tutorial do NerdGraph para criar um trecho do navegador e configurá-lo.

Assim que tiver o trecho, adicione-o à tag <head> do seu aplicativo.

Se você deseja automatizar o monitoramento da implantação do navegador em vários aplicativos da web, você pode usar o NerdGraph e nosso pacote npm do navegador do agente para configurar e implantar o agente como parte do processo de construção do seu aplicativo.

Para saber mais sobre isso, consulte Instrumento múltiplos aplicativos com npm e NerdGraph.

Qual é o próximo?

Após instalar o 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 dados, consulte solucionar problemas de instalação do Browser.

Depois de ver os dados do navegador na interface, aqui estão alguns próximos passos sobre como você pode aproveitar ao máximo esses dados:

Esta tradução de máquina é fornecida para sua comodidade.

Instale o agente do browser

Antes de você começar