• EnglishEspañol日本語한국어Português
  • EntrarComeçar agora

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

Caso haja alguma divergência entre a versão em inglês e a traduzida, a versão em inglês prevalece. Acesse esta página para mais informações.

Criar um problema

Tutorial NerdGraph: instrumentar vários aplicativos com npm e NerdGraph

Você pode usar nossa API NerdGraph para criar um novo aplicativo de browser e recuperar os valores de configuração. Isso pode ser combinado com o pacote npm do browser agente para incorporar a configuração do browser agente como parte do processo de construção do seu aplicativo ou separar a configuração do agente da implementação do agente dentro do seu aplicativo.

Se você nunca usou o NerdGraph para criar ou configurar um aplicativo de browser, leia primeiro este tutorial do NerdGraph.

Configurar o agente

Abra seu IDE e um terminal na raiz do seu projeto ou onde suas dependências de frontend são gerenciadas. Este é o local onde você executará npm install --save @newrelic/browser-agent para instalar o pacote npm. Depois de instalado, localize o arquivo do ponto de entrada principal do seu site. Pode ser <project_root>/src/index.js ou <project_root>/src/index.ts , mas pode ser diferente em seu aplicativo. Se você tiver vários pontos de entrada, selecione aquele que carrega mais rápido no browser e de preferência não está usando o elemento de script async ou defer atributo.

Depois de localizar onde deseja adicionar o agente do browser, adicione este trecho de código nesse arquivo.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements
// Populate using values from NerdGraph
const options = {
init: { ... },
info: { ... },
loader_config: { ...}
}
// The agent loader code executes immediately on instantiation.
new BrowserAgent(options)
// Remaining code

A instrução import para o agente do browser deve ser a primeira coisa no seu arquivo de origem. Após as instruções import restantes, instancie e configure imediatamente o agente do browser. Certifique-se de fazer isso antes de qualquer outro código para que o agente do browser tenha a chance de carregar e capturar dados o mais cedo possível.

Recuperar a configuração

O objeto options no trecho anterior precisa ser preenchido com informações de configuração sobre o aplicativo de browser da New Relic. Para os fins deste tutorial, usaremos a interface New Relic com um aplicativo de browser existente e o NerdGraph Explorer para completar a chamada de API.

Obtenha o GUID da entidade do aplicativo do browser

Para usar a API NerdGraph, você precisará obter o GUID da entidade para o aplicativo de browser que você está usando.

Recuperar configuração do aplicativo do browser

Abra o NerdGraph Explorer em api.newrelic.com/graphiql e use a consulta abaixo para recuperar os valores de configuração do aplicativo do browser. Se sua conta New Relic usa um data center da UE, acesse api.eu.newrelic.com/graphiql.

query {
actor {
entity(guid: '<guid>') {
... on BrowserApplicationEntity {
guid
name
browserProperties {
jsConfig
}
}
}
}
}

Substitua a parte <guid> da consulta pelo GUID da entidade recuperada anteriormente. Execute a consulta e você deverá receber um resultado como o mostrado aqui:

{
"data": {
"actor": {
"entity": {
"browserProperties": {
"jsConfig": {
"info": {
"applicationID": 1234567,
"beacon": "bam.nr-data.net",
"errorBeacon": "bam.nr-data.net",
"licenseKey": 123456789,
"sa": 1
},
"init": {
"ajax": {
"deny_list": [
"bam-cell.nr-data.net"
]
},
"distributed_tracing": {
"allowed_origins": [],
"cors_enabled": false,
"cors_use_newrelic_header": false,
"cors_use_tracecontext_headers": false,
"enabled": true,
"exclude_newrelic_header": false
},
"privacy": {
"cookies_enabled": true
}
},
"loader_config": {
"accountID": <redacted>,
"agentID": <redacted>,
"applicationID": <redacted>,
"licenseKey": "<redacted>",
"trustKey": 1672072
}
}
}
}
}
}
}

Dica

Precisa de mais informações sobre como usar o NerdGraph? Consulte Introdução ao NerdGraph.

Instale a configuração

Copie o conteúdo da propriedade jsConfig e substitua o conteúdo do objeto options em seu arquivo de origem.

Implantar usando o pacote npm

Com o pacote npm instalado e configurado corretamente, agora você pode construir e implantar seu aplicativo de browser. Carregue seu site em um browser e verifique se há chamadas de rede sendo feitas para o URI beacon da configuração.

Injetar configuração do aplicativo do browser em HTML

Como alternativa a colocar a configuração do aplicativo do browser em seu código-fonte, você pode querer injetar a configuração no HTML do seu site. Isso é especialmente útil quando seu código-fonte é reutilizado em vários sites.

Modificar trecho de código-fonte

Modifique o primeiro trecho em seu código-fonte para import e instancie a classe BrowserAgent sem nenhum parâmetro.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements
// The agent loader code executes immediately on instantiation.
new BrowserAgent()
// Remaining code

Modificar consulta NerdGraph

Modifique a consulta NerdGraph para recuperar a configuração do aplicativo do browser como uma string de script codificada em JSON. Execute a nova consulta lembrando-se de substituir <guid> pelo GUID da entidade do aplicativo do browser recuperado anteriormente.

query {
actor {
entity(guid: '<guid>') {
... on BrowserApplicationEntity {
guid
name
browserProperties {
jsConfigScript
}
}
}
}
}

Isso retornará um resultado como:

{
"data": {
"actor": {
"entity": {
"browserProperties": {
"jsConfigScript": "<script type=\"text/javascript\">\n;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:[\"bam-cell.nr-data.net\"]}};\n\n;NREUM.loader_config={accountID:\"<redacted>\",trustKey:\"<redacted>\",agentID:\"<redacted>\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\"};\n;NREUM.info={beacon:\"bam.nr-data.net\",errorBeacon:\"bam.nr-data.net\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\",sa:1};\n</script>\n"
}
}
}
}
}

Instale a configuração

Copie o conteúdo da propriedade jsConfigScript . Você precisará executar os resultados por meio de um analisador JSON ou substituir os valores de \" por ". O resultado será uma string contendo um elemento <script> com todas as informações de configuração do aplicativo do browser. Coloque o elemento <script> na parte superior do elemento <head> , mas abaixo de qualquer elemento <meta> , do HTML do seu site.

Próximos passos

Este tutorial apenas mostra como você pode usar nossa API NerdGraph e o pacote npm do browser agente. Algumas ideias para os próximos passos:

  • Integre o agente do browser ao seu aplicativo construtor de sites e use o NerdGraph para recuperar a configuração do aplicativo do browser para cada um de seus clientes quando eles ativarem o monitoramento do New Relic em seu dashboard gerenciamento.
  • Crie um componente de browser de agente compartilhado na biblioteca de componentes da sua organização e injete automaticamente a configuração no HTML usando uma função de borda CDN que chama NerdGraph.
  • Modifique seu pipeline de CI/CD para preencher o código-fonte com diferentes configurações de aplicativos de browser do NerdGraph com base no ambiente em que está sendo implantado.
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.