Tutorial de NerdGraph: ejemplos de monitoreo del agente del navegador

A continuación se muestran algunos ejemplos de diversas configuraciones browser que puede realizar con GraphQL.

Crear una nueva aplicación browser

Puede crear una aplicación browser utilizando nuestra API NerdGraph en lugar de utilizar la UI. La ventaja de esto es que cuando llega el momento de instrumentar la aplicación de su browser con New Relic, puede crear y recuperar mediante programación el fragmento de JavaScript para copiarlo y pegarlo en la aplicación de su browser .

Para saber cómo usar npm para configurar para múltiples aplicaciones, consulte instrumentar múltiples aplicaciones con npm.

A continuación se muestra un ejemplo de mutación para crear una nueva aplicación browser con la configuración predeterminada.

Mutación:

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

Variables:

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

Recuperar el fragmento de JavaScript

Puede recuperar el fragmento de JavaScript para copiarlo y pegarlo en su aplicación. Tenga en cuenta que el fragmento devuelto es una cadena codificada en JSON que deberá analizarse antes de poder copiarlo y pegarlo.

Consultar:

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

Variables:

{
  "guid": EntityGuid!
}

Ejemplos de configuración del monitoreo de navegador

La configuración browser se puede configurar a través de NerdGraph. A continuación se muestra un ejemplo de mutación que cambia el ápice de una aplicación.

Mutación:

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

Variables:

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

Para obtener más información sobre qué configuraciones browser se pueden actualizar a través de NerdGraph, consulte la siguiente mutación. La documentación para cada campo se puede encontrar en el explorador NerdGraph.

Mutación:

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

Variables:

{
  "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 la configuración de la aplicación.

Puede recuperar la configuración de la aplicación del navegador para usarla con el método de instalación del paquete npm. Dependiendo de sus necesidades, la configuración se puede devolver en dos formatos diferentes:

una cadena codificada en JSON para insertar en el elemento head de su página web.
un objeto que se puede utilizar tal cual en el código fuente de su aplicación.

Consultar:

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

Variables:

{
  "guid": EntityGuid!
}

Agrupa tus datos con segmentos browser

Puede agrupar los resultados del monitoreo del navegador por segmentos browser para obtener datos más significativos. En lugar de hacer esto en la UI, puedes hacerlo con GraphQL.

Segmentos de lista

Comience enumerando los segmentos existentes:

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

Aquí está la respuesta:

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

Crear segmentos

Cree segmentos browser utilizando la mutación agentApplicationSegmentsReplaceAllBrowserSegmentAllowList:

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

Aquí está la respuesta:

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

Crear reglas de ofuscación

Puede enmascarar datos confidenciales antes de que se recopilen creando reglas de ofuscación de ingesta directamente desde la plataforma de New Relic o NerdGraph. Estas reglas se aplican a todos los eventos del navegador. Las reglas configuradas a través de la plataforma o NerdGraph se aplican a aplicaciones inyectadas por APM, instalaciones de copiar y pegar e instalaciones de NPM. Para crear reglas a través de la plataforma o JavaScript, consulte Ofuscar datos confidenciales en el agente del browser.

Para crear reglas de ofuscación a través de NerdGraph:

Recupere las reglas de ofuscación actuales para su aplicación de navegador utilizando la siguiente consulta:

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

Importante

Debe recuperar las reglas actuales antes de actualizarlas, ya que la mutación agentApplicationSettingsUpdate sobrescribirá cualquier regla existente con el nuevo conjunto de reglas que proporcione. Si desea conservar alguna regla existente, asegúrese de incluirla en el nuevo conjunto de reglas que envíe en la mutación.

Actualice las reglas de ofuscación usando la mutación agentApplicationSettingsUpdate. Puede agregar nuevas reglas o modificar las existentes definiendo las siguientes propiedades:

regex: el patrón de expresión regular que coincida con los datos que desea ofuscar. Por ejemplo, puede usar \b\d{3}-?\d{2}-?\d{4}\b para buscar coincidencias con números de Seguro Social.
replacement: la cadena que reemplazará los datos coincidentes. Por ejemplo, puede usar XXX-XX-XXXX para enmascarar los números de Seguro Social.

eventFilter: una matriz de tipos de evento de navegador a los que se debe aplicar la regla. Por ejemplo, puede especificar ["AjaxRequest"] para aplicar la regla solo a los eventos de solicitud 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 la captura de carga de AJAX

Puede recuperar y actualizar la configuración de captura de carga de AJAX para su aplicación de navegador utilizando NerdGraph. Esta configuración controla si se capturan las cargas de request y respuesta para las llamadas AJAX y corresponde a la opción de captura de carga en la configuración de su aplicación.

Puede habilitar la configuración de captura de carga en dos pasos:

Configuración para recuperar la captura de carga actual.
Establezca el modocapturePayloads en uno de los siguientes valores:
- none: no se capturarán datos de carga.
- failures: captura cargas solo para requests con un código de estado de 0, un código de 400 o superior, o una firma de error de GraphQL en el response body.
- all: captura cargas para todas las requests.

Recupere la configuración actual de captura de carga para su aplicación de navegador utilizando la siguiente consulta:

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

Actualice la configuración de captura de carga usando la mutación agentApplicationSettingsUpdate:

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

Configure las opciones guid y capturePayloads en las Variables:

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

Fijación de versión del agente del navegador

La API GraphQL de New Relic le proporciona un método para "fijar" una versión específica del agente New Relic Browser , asegurando que permanezca consistente dentro de su plataforma. Al fijar una versión, puede evitar actualizaciones automáticas que podrían introducir cambios o comportamientos inesperados. Los beneficios clave de esta característica incluyen los siguientes:

Control: Conserve autonomía sobre cuándo y cómo se aplican las actualizaciones.
Confidence: Asegúrese de que se esté ejecutando una versión probada y aprobada del agente en todo momento.
Testability: Pruebe fácilmente nuevas versiones en entornos aislados antes de decidir actualizar.
Stability: Minimice las interrupciones inesperadas y mantenga un comportamiento constante de la aplicación.
Efficiency: Reduzca el tiempo de despliegue y mitigue las dificultades de despliegue.

A continuación se ofrece una descripción general de cómo utilizar la API de fijación de versiones del agente del navegador:

Utilice esta consulta de NerdGraph para determinar qué tipo de agente utiliza su aplicación browser , así como si ya está fijada una versión específica.

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

Un ejemplo de respuesta a la consulta anterior:

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

En este ejemplo, loader es de tipo SPA y pinnedVersion es null, lo que indica que no hay ninguna versión fijada.

Puede ejecutar esta consulta en cualquier momento para verificar su combinación de cargador y versión fijada.

Una vez que haya identificado la versión que desea anclar, use la siguiente mutación GraphQL para configurarla.

Sugerencia

Asegúrese de utilizar la versión semántica del agente del navegador que desea que utilice su aplicación. Deje este espacio en blanco para utilizar la versión más reciente. Utilice 'x' en lugar de un dígito numérico para representar la última versión dentro del rango de versiones (por ejemplo, '1.x.x').

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

Tenga en cuenta que los campos de retorno para esta mutación contendrán el valor pinnedVersion actualizado, así como el jsLoaderScript actualizado.

Cambiar el valor loader a NONE eliminará cualquier versión semántica fijada.

Para aplicaciones que utilizan el método copiar/pegar, reemplace el fragmento de JavaScript existente con el nuevo <script> decodificado. Luego vuelva a desaplegar su aplicación.

Para aplicaciones que tienen monitoreo del navegador a través de un agente instalado en el backend (como Ruby, Python, etc.), será necesario reiniciar el agente para recuperar los nuevos valores.

En cualquier caso, la próxima vez que su aplicación muestre una página browser , debería utilizar la versión del agente anclado para informar datos a su cuenta de New Relic.

Recuerde que puede verificar la versión fijada y el tipo de cargador utilizando la consulta en el primer paso.

Te ofrecemos esta traducción automática para facilitar la lectura.

Tutorial de NerdGraph: ejemplos de monitoreo del agente del navegador

Crear una nueva aplicación browser

Recuperar el fragmento de JavaScript

Ejemplos de configuración del monitoreo de navegador

Recuperar la configuración de la aplicación.

Agrupa tus datos con segmentos browser

Segmentos de lista

Crear segmentos

Crear reglas de ofuscación

Paso 1: recuperar reglas de ofuscación

Importante

Paso 2: actualizar regla de ofuscación

Configurar la captura de carga de AJAX

Consultar la configuración de captura de carga

Actualizar la configuración de captura de carga

Fijación de versión del agente del navegador

Paso 1. Recupera la versión fijada actual

Paso 2. Revisa las versiones disponibles

Paso 3. Fija la versión deseada

Sugerencia

Paso 4. Vuelva a desplegar su aplicación o reinicie su agente

Te ofrecemos esta traducción automática para facilitar la lectura.

Tutorial de NerdGraph: ejemplos de monitoreo del agente del navegador

Crear una nueva aplicación browser .css-21sua1{background:none;border:none;width:0;padding:0;}

Recuperar el fragmento de JavaScript

Ejemplos de configuración del monitoreo de navegador

Recuperar la configuración de la aplicación.

Agrupa tus datos con segmentos browser

Segmentos de lista

Crear segmentos

Crear reglas de ofuscación

Paso 2: actualizar regla de ofuscación

Configurar la captura de carga de AJAX

Consultar la configuración de captura de carga

Actualizar la configuración de captura de carga

Fijación de versión del agente del navegador

Paso 1. Recupera la versión fijada actual

Paso 2. Revisa las versiones disponibles

Paso 3. Fija la versión deseada

Paso 4. Vuelva a desplegar su aplicación o reinicie su agente

Crear una nueva aplicación browser