Tutorial NerdGraph: exemplos de monitoramento de browser de agente

Aqui estão alguns exemplos de várias configurações de browser que você pode fazer com GraphQL.

Crie um novo aplicativo de browser

Você pode criar um aplicativo de browser usando nossa API NerdGraph em vez de usar a interface. A vantagem disso é que, quando chegar a hora de instrumentar seu aplicativo de browser com o New Relic, você poderá criar e recuperar programaticamente o trecho JavaScript para copiar e colar em seu aplicativo de browser.

Para saber como usar o npm para configurar para vários aplicativos, consulte Instrumentar vários aplicativos com npm.

Aqui está um exemplo de mutação para criar um novo aplicativo de browser com configurações padrão.

Mutação:

mutation CreateExampleBrowserApplication(
  $accountId: Int!
  $name: String!
  $settings: AgentApplicationBrowserSettingsInput
) {
  agentApplicationCreateBrowser(
    accountId: $accountId
    name: $name
    settings: $settings
  ) {
    guid
    name
    settings {
      cookiesEnabled
      distributedTracingEnabled
      loaderScript
      loaderType
    }
  }
}

Variáveis:

{
  "accountId": Int!,
  "name": String!,
  "settings": {
    "cookiesEnabled": Boolean,
    "distributedTracingEnabled": Boolean,
    "loaderType": AgentApplicationBrowserLoader
  }
}

Recuperar o trecho JavaScript

Você pode recuperar o trecho JavaScript para copiar/colar em seu aplicativo. Observe que o trecho retornado é uma string codificada em JSON que precisará ser analisada antes de ser copiada/colada.

Consulte:

query FetchBrowserJavaScriptSnippet($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsLoaderScript
        }
      }
    }
  }
}

Variáveis:

{
  "guid": EntityGuid!
}

Exemplos de configuração de monitoramento de Browser

As configurações do browser podem ser definidas através do NerdGraph. Aqui está um exemplo de mutação que altera o apdex de um aplicativo.

Mutação:

mutation UpdateBrowserApdexTarget(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

Variáveis:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    }
  }
}

Para obter mais informações sobre quais configurações do browser podem ser atualizadas via NerdGraph, consulte a seguinte mutação. A documentação para cada campo pode ser encontrada no explorador NerdGraph.

Mutação:

mutation UpdateBrowserSettingsExample(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserConfig {
        apdexTarget
      }
      browserMonitoring {
        ajax {
          denyList
        }
        distributedTracing {
          allowedOrigins
          corsEnabled
          corsUseNewrelicHeader
          corsUseTracecontextHeaders
          enabled
          excludeNewrelicHeader
        }
        loader
        privacy {
          cookiesEnabled
        }
      }
      dataManagement {
        sendTransactionEventsToInternalStream
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

Variáveis:

{
  "guid": EntityGuid!,
  "settings": {
    "browserConfig": {
      "apdexTarget": Float
    },
    "browserMonitoring": {
      "ajax": {
        "denyList": [String!]
      },
      "distributedTracing": {
        "allowedOrigins": [String!],
        "corsEnabled": Boolean,
        "corsUseNewrelicHeader": Boolean,
        "corsUseTracecontextHeaders": Boolean,
        "enabled": Boolean,
        "excludeNewrelicHeader": Boolean
      }
      "loader": AgentApplicationSettingsBrowserLoaderInput,
      "privacy": {
        "cookiesEnabled": Boolean
      }
    }
    "dataManagement": {
      "sendTransactionEventsToInternalStream": Boolean
    }
  }
}

Recuperar a configuração do aplicativo

Você pode recuperar a configuração do aplicativo do browser para usar com o método de instalação do pacote npm. Dependendo das suas necessidades, a configuração pode ser retornada em dois formatos diferentes:

uma string codificada em JSON para injeção no elemento head da sua página da web.
um objeto que pode ser usado como está no código-fonte do seu aplicativo.

Consulte:

query FetchBrowserConfiguration($guid: EntityGuid!) {
  actor {
    entity(guid: $guid) {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
          jsConfigScript
        }
      }
    }
  }
}

Variáveis:

{
  "guid": EntityGuid!
}

Agrupe seus dados com segmentos do browser

Você pode agrupar os resultados do monitoramento do browser por segmentos do browser para obter dados mais significativos. Em vez de fazer isso na interface, você pode fazer isso com GraphQL.

Listar segmentos

Comece listando os segmentos existentes:

{
  actor {
    entity(guid: "YOUR_GUID") {
      ... on BrowserApplicationEntity {
        segmentAllowListAggregate {
          segments
        }
      }
    }
  }
}

Aqui está a resposta:

{
  "data": {
    "actor": {
      "entity": {
        "segmentAllowListAggregate": {
          "segments": ["urlsegment1", "urlsegment2"]
        }
      }
    }
  }
}

Criar segmentos

Crie segmentos de browser usando a mutação agentApplicationSegmentsReplaceAllBrowserSegmentAllowList :

mutation {
  agentApplicationSegmentsReplaceAllBrowserSegmentAllowList(
    entityGuid: "YOUR_GUID"
    allowList: { segments: ["urlsegment1", "urlsegment2", "urlsegment3"] }
  ) {
    segments
  }
}

Aqui está a resposta:

{
  "data": {
    "agentApplicationSegmentsReplaceAllBrowserSegmentAllowList": {
      "segments": ["urlsegment3", "urlsegment2", "urlsegment1"]
    }
  }
}

Crie regras de ofuscação

Você pode mascarar dados confidenciais antes que sejam coletados criando regras de ofuscação de ingestão diretamente da plataforma New Relic ou do NerdGraph. Essas regras se aplicam a todos os eventos do browser. As regras configuradas por meio da plataforma ou do NerdGraph se aplicam a aplicativos injetados pelo APM, instalações de copiar/colar e instalações do NPM. Para criar regras por meio da plataforma ou JavaScript, consulte Ofuscar Dados Confidenciais no Agente do Browser.

Para criar regras de ofuscação via NerdGraph:

Recupere as regras de ofuscação atuais para o seu aplicativo de navegador usando a seguinte consulta:

actor {
      entities(guids: "YOUR_BROWSER_APP_GUID") {
        ... on BrowserApplicationEntity {
          browserSettings {
            browserObfuscation {
              rules {
                regex
                replacement
                eventFilter
              }
            }
          }
        }
      }
    }

Importante

Você deve recuperar as regras atuais antes de atualizá-las, pois a mutação agentApplicationSettingsUpdate substituirá quaisquer regras existentes pelo novo conjunto de regras que você fornecer. Se você quiser manter quaisquer regras existentes, certifique-se de incluí-las no novo conjunto de regras que você enviar na mutação.

Atualize as regras de ofuscação usando a mutação agentApplicationSettingsUpdate. Você pode adicionar novas regras ou modificar as existentes definindo as seguintes propriedades:

regex: o padrão de expressão regular para corresponder aos dados que você deseja ofuscar. Por exemplo, você pode usar \b\d{3}-?\d{2}-?\d{4}\b para corresponder a números do Seguro Social.
replacement: a string que substituirá os dados correspondentes. Por exemplo, você pode usar XXX-XX-XXXX para mascarar números de Seguro Social.

eventFilter: uma matriz de tipos de evento de navegador aos quais a regra deve ser aplicada. Por exemplo, você pode especificar ["AjaxRequest"] para aplicar a regra apenas a eventos de solicitação AJAX.

mutation {
  agentApplicationSettingsUpdate(
    guid: "YOUR_BROWSER_APP_GUID"
    settings: {
      browserObfuscation: {
        rules: [
          {
            regex: "YOUR_REGEX_HERE"
            replacement: "XXX-XX-XXXX"
            eventFilter: ["AjaxRequest"]
          }
        ]
      }
    }
  ) {
    browserSettings {
      browserObfuscation {
        rules {
          regex
          replacement
          eventFilter
        }
      }
    }
  }
}

Configurar a captura de carga AJAX

Você pode recuperar e atualizar a configuração de captura de carga AJAX para o seu aplicativo de navegador usando o NerdGraph. Essa configuração controla se a carga de solicitação e resposta é capturada para chamadas AJAX e corresponde à opção de captura de carga nas configurações do seu aplicativo.

Você pode habilitar as configurações de captura de carga em duas etapas:

Recupere as configurações da captura de carga atual.
Defina o modocapturePayloads para um dos seguintes valores:
- none: nenhum dado de carga será capturado.
- failures: captura carga apenas para requests com um código de status de 0, um código de 400 ou superior, ou uma assinatura de erro do GraphQL no response body.
- all: captura carga para todos os requests.

Recupere a configuração de captura de carga atual para o seu aplicativo de navegador usando a seguinte consulta:

query FetchBrowserAjaxPayloadCapture {
  actor {
    user {
      name
    }
    entity(guid: "YOUR_ENTITY_GUID") {
      ... on BrowserApplicationEntity {
        guid
        name
        browserSettings {
          browserMonitoring {
            ajax {
              capturePayloads
            }
          }
        }
      }
    }
  }
}

Atualize a configuração de captura de carga usando a mutação agentApplicationSettingsUpdate:

mutation UpdateBrowserAjaxPayloadCapture(
  $guid: EntityGuid!
  $settings: AgentApplicationSettingsUpdateInput!
) {
  agentApplicationSettingsUpdate(guid: $guid, settings: $settings) {
    browserSettings {
      browserMonitoring {
        ajax {
          capturePayloads
        }
      }
    }
    errors {
      description
      errorClass
      field
    }
  }
}

Defina as opções guid e capturePayloads nas Variáveis:

{
  "guid": "YOUR_BROWSER_APP_GUID",
  "settings": {
    "browserMonitoring": {
      "ajax": {
        "capturePayloads": "failures"
      }
    }
  }
}

Fixação da versão do agente do browser

A API GraphQL da New Relic fornece um método para "fixar" uma versão específica do agente New Relic Browser, garantindo que ela permaneça consistente em sua plataforma. Ao fixar uma versão, você pode evitar atualizações automáticas que possam introduzir alterações ou comportamentos inesperados. Os principais benefícios desse recurso incluem:

Control: mantenha autonomia sobre quando e como as atualizações serão aplicadas.
Confidence: certifique-se de que uma versão testada e aprovada do agente esteja sempre em execução.
Testability: teste facilmente novas versões em ambientes isolados antes de decidir atualizar.
Stability: minimize interrupções inesperadas e mantenha um comportamento consistente do aplicativo.
Efficiency: Reduza o tempo de implantação e mitigue as dificuldades de implantação.

Aqui está uma visão geral de como usar a API de fixação de versão do browser agente:

Use esta consulta NerdGraph para determinar qual tipo de agente seu aplicativo de browser usa, bem como se uma versão específica já está fixada.

query FetchBrowserMonitoringAgentSettings {
  actor {
    entity(guid: "YOUR_BROWSER_APP_GUID") {
      ... on BrowserApplicationEntity {
        guid
        name
        browserSettings {
          browserMonitoring {
            loader
            pinnedVersion
          }
        }
      }
    }
  }
}

Um exemplo de resposta à consulta acima:

{
  "data": {
    "actor": {
      "entity": {
        "browserSettings": {
          "browserMonitoring": {
            "loader": "SPA",
            "pinnedVersion": null
          }
        },
        "guid": "YOUR_BROWSER_APP_GUID",
        "name": "Example Single Page App"
      }
    }
  }
}

Neste exemplo, loader é do tipo SPA e pinnedVersion é null, o que indica que não há versão fixada.

Você pode executar esta consulta a qualquer momento para verificar sua combinação de carregador e versão fixada.

Depois de identificar a versão que deseja fixar, use a seguinte mutação GraphQL para defini-la.

Dica

Certifique-se de usar a versão semântica do agente do browser que você gostaria que seu aplicativo usasse. Deixe em branco para usar a versão mais recente. Use 'x' no lugar de um dígito numérico para representar a versão mais recente dentro do intervalo de versões (por exemplo, '1.x.x').

mutation {
  agentApplicationSettingsUpdate(
    guid: "YOUR_BROWSER_APP_GUID"
    settings: { browserMonitoring: { pinnedVersion: "1.229.0" } }
  ) {
    browserProperties {
      jsLoaderScript
    }
    browserSettings {
      browserMonitoring {
        loader
        pinnedVersion
      }
    }
  }
}

Observe que os campos de retorno para esta mutação conterão o valor pinnedVersion atualizado, bem como o jsLoaderScript atualizado.

Alterar o valor loader para NONE removerá qualquer versão semântica fixada.

Para aplicativos que usam o método copiar/colar, substitua o trecho JavaScript existente pelo novo e decodificado <script>. Em seguida, reimplante sua aplicação.

Para aplicativos que possuem monitoramento de Browser através de um agente instalado no backend (como Ruby, Python, etc.), o agente precisará ser reiniciado para buscar os novos valores.

Em ambos os casos, na próxima vez que seu aplicativo exibir uma página do browser, ele deverá usar a versão do agente fixada para relatar dados à sua conta New Relic.

Lembre-se de que você pode verificar a versão fixada e o tipo de carregador usando a consulta na primeira etapa.

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

Tutorial NerdGraph: exemplos de monitoramento de browser de agente

Crie um novo aplicativo de browser

Recuperar o trecho JavaScript

Exemplos de configuração de monitoramento de Browser

Recuperar a configuração do aplicativo

Agrupe seus dados com segmentos do browser

Listar segmentos

Criar segmentos

Crie regras de ofuscação

Etapa 1: recuperar regras de ofuscação

Importante

Etapa 2: atualizar regras de ofuscação

Configurar a captura de carga AJAX

Consultar a configuração de captura de carga

Atualizar a configuração de captura de carga

Fixação da versão do agente do browser

Passo 1. Recuperar a versão fixada atual

Passo 2. Revise as versões disponíveis

Passo 3. Fixe a versão desejada

Dica

Etapa 4. Reimplante seu aplicativo ou reinicie seu agente

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

Tutorial NerdGraph: exemplos de monitoramento de browser de agente

Crie um novo aplicativo de browser .css-21sua1{background:none;border:none;width:0;padding:0;}

Recuperar o trecho JavaScript

Exemplos de configuração de monitoramento de Browser

Recuperar a configuração do aplicativo

Agrupe seus dados com segmentos do browser

Listar segmentos

Criar segmentos

Crie regras de ofuscação

Etapa 2: atualizar regras de ofuscação

Configurar a captura de carga AJAX

Consultar a configuração de captura de carga

Atualizar a configuração de captura de carga

Fixação da versão do agente do browser

Passo 1. Recuperar a versão fixada atual

Passo 2. Revise as versões disponíveis

Passo 3. Fixe a versão desejada

Etapa 4. Reimplante seu aplicativo ou reinicie seu agente

Crie um novo aplicativo de browser