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

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

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

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

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