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.
Instale o agente do browser
Existem quatro maneiras de instalar o navegador agente. Dependendo de suas necessidades específicas, você pode:
Vá para one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoring e siga as instruções para gerar o trecho npm do browser na interface.
Depois de ter o trecho, cole-o na primeira linha do seu arquivo de origem, antes de qualquer outro código. Isso garante que o navegador do browser seja carregado antes de qualquer outro script ser executado.
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.
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.
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 para monitorar o backend do seu aplicativo de browser 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.
Importante
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 mais informações sobre isso, consulte Instrumento vários 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:
- Veja um resumo de alto nível dos dados do seu aplicativo.
- Monitor seus core web vitals.
- Aprenda como otimizar sua experiência de monitoramento de Browser.