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.

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

{
  "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
            }
          }
        }
      }
    }
  }
}

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.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// The agent loader code executes immediately on instantiation.
new BrowserAgent()

// Remaining code

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

{
  "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"
        }
      }
    }
  }
}

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.