Tutoriel NerdGraph : Exemples monitoring de l'agent de navigateur

Voici quelques exemples de différentes configurations de navigateur que vous pouvez réaliser avec GraphQL.

Créer une nouvelle application de navigateur

Vous pouvez créer une application de navigateur à l'aide de notre API NerdGraph au lieu d'utiliser l'UI. L’avantage de cela est que lorsqu’il est temps d’ instrument votre application de navigateur avec New Relic, vous pouvez créer et récupérer par programmation le snippet JavaScript à copier et coller dans votre application de navigateur.

Pour savoir comment utiliser npm pour configurer pour plusieurs applications, voir instrumenter plusieurs applications avec npm.

Voici un exemple de mutation pour créer une nouvelle application de navigateur avec des paramètres par défaut.

Mutation:

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

Récupérer le snippet JavaScript

Vous pouvez récupérer le snippet JavaScript à copier/coller dans votre application. Notez que le snippet renvoyé est une chaîne codée JSON qui devra être analysée avant de pouvoir être copiée/collée.

Qequête:

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

Variables:

{
  "guid": EntityGuid!
}

Exemples de configuration de monitoring des navigateurs

Les paramètres du navigateur peuvent être configurés via NerdGraph. Voici un exemple de mutation qui modifie l'apdex d'une application.

Mutation:

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

Pour plus d'informations sur les paramètres du navigateur qui peuvent être mis à jour via NerdGraph, reportez-vous à la mutation suivante. La documentation de chaque champ peut être trouvée dans l'explorateur NerdGraph.

Mutation:

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

Récupérer la configuration de l'application

Vous pouvez récupérer la configuration de l'application de navigateur à utiliser avec la méthode d'installation du package npm. Selon vos besoins, la configuration peut être restituée sous deux formats différents :

une chaîne codée JSON à injection dans l'élément head de votre page Web.
un objet qui peut être utilisé tel quel dans le code source de votre application.

Qequête:

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

Variables:

{
  "guid": EntityGuid!
}

Regroupez vos données avec des segments de navigateur

Vous pouvez regrouper vos résultats monitoring de navigateurs par segments de navigateur pour obtenir des données plus significatives. Au lieu de le faire dans l'UI, vous pouvez le faire avec GraphQL.

Liste des segments

Commencez par répertorier les segments existants :

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

Voici la réponse :

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

Créer des segments

Créer des segments de navigateur à l’aide de la mutation agentApplicationSegmentsReplaceAllBrowserSegmentAllowList :

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

Voici la réponse :

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

Créer des règles d’obfuscation

Vous pouvez masquer les données sensibles avant qu’elles ne soient récoltées en créant des règles d’obfuscation d’ingestion directement depuis la plateforme New Relic ou NerdGraph. Ces règles s’appliquent à tous les événements de navigateur. Les règles configurées via la plateforme ou NerdGraph s’appliquent aux applications injectées par l’APM, aux installations par copier-coller et aux installations NPM. Pour créer des règles via la plateforme ou JavaScript, consultez Obfuscate sensitive data in the browser agent.

Pour créer des règles d’obfuscation via NerdGraph :

Récupérez les règles d’obfuscation actuelles pour votre application de navigateur à l’aide de la requête suivante :

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

Important

Vous devez récupérer les règles actuelles avant de les mettre à jour, car la mutation agentApplicationSettingsUpdate écrasera toutes les règles existantes avec le nouvel ensemble de règles que vous fournissez. Si vous souhaitez conserver des règles existantes, assurez-vous de les inclure dans le nouvel ensemble de règles que vous envoyez dans la mutation.

Mettez à jour les règles d'obfuscation en utilisant la mutation agentApplicationSettingsUpdate. Vous pouvez ajouter de nouvelles règles ou modifier les règles existantes en définissant les propriétés suivantes :

regex: le motif d'expression régulière correspondant aux données que vous souhaitez obfusquer. Par exemple, vous pouvez utiliser \b\d{3}-?\d{2}-?\d{4}\b pour correspondre aux numéros de sécurité sociale.
replacement: la chaîne qui remplacera les données correspondantes. Par exemple, vous pouvez utiliser XXX-XX-XXXX pour masquer les numéros de sécurité sociale.

eventFilter: un éventail de types d'événements de navigateur auxquels la règle doit être appliquée. Par exemple, vous pouvez spécifier ["AjaxRequest"] pour appliquer la règle uniquement aux événements de requête 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
        }
      }
    }
  }
}

Configurer la capture de charge AJAX

Vous pouvez récupérer et mettre à jour le paramètre de capture de charge AJAX pour votre application de navigateur à l’aide de NerdGraph. Ce paramètre contrôle si les charges de requests et de réponses sont capturées pour les appels AJAX et correspond à l’ option de capture de charge dans les paramètres de votre application.

Vous pouvez activer les paramètres de capture de charge en deux étapes :

Paramètres pour récupérer la capture de charge actuelle.
Définissez le modecapturePayloads sur l’une des valeurs suivantes :
- none: Aucune donnée de charge ne sera capturée.
- failures: capture les charges uniquement pour les requests avec un code d’état de 0, un code de 400 ou supérieur, ou une signature d’erreur GraphQL dans le response body.
- all: Capture les charges pour toutes les requests.

Récupérez le paramètre actuel de capture de charge pour votre application de navigateur à l'aide de la requête suivante :

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

Mettez à jour le paramètre de capture de charge en utilisant la mutation agentApplicationSettingsUpdate :

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

Définissez les options guid et capturePayloads dans les Variables :

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

Épinglage de la version de l'agent de navigateur

L'API GraphQL de New Relic vous fournit une méthode pour « épingler » une version spécifique de l'agent de browser de New Relic, garantissant ainsi qu'elle reste cohérente au sein de votre plateforme. En épinglant une version, vous pouvez empêcher les mises à jour automatiques qui pourraient introduire des modifications ou des comportements inattendus. Les principaux avantages de cette fonctionnalité sont les suivants :

Control:Conservez votre autonomie sur le moment et la manière dont les mises à jour sont appliquées.
Confidence: Assurez-vous qu'une version testée et approuvée de l'agent est en cours d'exécution à tout moment.
Testability:Testez facilement de nouvelles versions dans des environnements isolés avant de décider de la mise à jour.
Stability:Minimisez les interruptions inattendues et maintenez un comportement cohérent application .
Efficiency: Réduire le temps de déploiement et atténuer les difficultés de déploiement.

Voici un aperçu de la façon d'utiliser l'API d'épinglage de version de l'agent de navigateur :

Utilisez cette requête NerdGraph pour déterminer quel type d'agent votre application de navigateur utilise ainsi que si une version spécifique est déjà épinglée.

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

Un exemple de réponse à la requête ci-dessus :

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

Dans cet exemple, le loader est de type SPA et le pinnedVersion est de null, ce qui indique qu'aucune version n'est épinglée.

Vous pouvez exécuter cette requête à tout moment pour vérifier votre combinaison de chargeur et de version épinglée.

Une fois que vous avez identifié la version que vous souhaitez épingler, utilisez la mutation GraphQL suivante pour la définir.

Conseil

Assurez-vous d’utiliser la version sémantique de l’agent de navigateur que vous souhaitez que votre application utilise. Laissez ce champ vide pour utiliser la version la plus récente. Utilisez 'x' à la place d'un chiffre numérique pour représenter la dernière sortie dans la plage de versions (par exemple, '1.x.x').

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

Notez que les champs de retour pour cette mutation contiendront la valeur pinnedVersion mise à jour, ainsi que la valeur jsLoaderScript mise à jour.

Changer la valeur loader en NONE supprimera toute version sémantique épinglée.

Pour une application utilisant la méthode copier/coller, remplacez le snippet JavaScript existant par le nouveau <script> décodé. Puis redéployez votre application.

Pour les applications qui les monitoring navigateurs via un backendinstallé en agent (tel que Ruby, Python, etc.), l'agent devra être redémarré afin de récupérer les nouvelles valeurs.

Dans les deux cas, la prochaine fois que votre application diffuse une page de navigateur, elle doit utiliser la version de l'agent épinglé pour signaler les données à votre compte New Relic.

N'oubliez pas que vous pouvez vérifier la version épinglée et le type de chargeur en utilisant la requête de la première étape.

Cette traduction automatique est fournie pour votre commodité.

Tutoriel NerdGraph : Exemples monitoring de l'agent de navigateur

Créer une nouvelle application de navigateur

Récupérer le snippet JavaScript

Exemples de configuration de monitoring des navigateurs

Récupérer la configuration de l'application

Regroupez vos données avec des segments de navigateur

Liste des segments

Créer des segments

Créer des règles d’obfuscation

Étape 1 : Récupérer les règles d’obfuscation

Important

Étape 2 : mettre à jour les règles d'obfuscation

Configurer la capture de charge AJAX

Requête du paramètre de capture de charge

Mettre à jour le paramètre de capture de charge

Épinglage de la version de l'agent de navigateur

Étape 1. Récupérer la version épinglée actuelle

Étape 2. Examinez les versions disponibles

Étape 3. Épinglez la version souhaitée

Conseil

Étape 4. Redéployer votre application ou redémarrer votre agent

Cette traduction automatique est fournie pour votre commodité.

Tutoriel NerdGraph : Exemples monitoring de l'agent de navigateur

Créer une nouvelle application de navigateur .css-21sua1{background:none;border:none;width:0;padding:0;}

Récupérer le snippet JavaScript

Exemples de configuration de monitoring des navigateurs

Récupérer la configuration de l'application

Regroupez vos données avec des segments de navigateur

Liste des segments

Créer des segments

Créer des règles d’obfuscation

Étape 2 : mettre à jour les règles d'obfuscation

Configurer la capture de charge AJAX

Requête du paramètre de capture de charge

Mettre à jour le paramètre de capture de charge

Épinglage de la version de l'agent de navigateur

Étape 1. Récupérer la version épinglée actuelle

Étape 2. Examinez les versions disponibles

Étape 3. Épinglez la version souhaitée

Étape 4. Redéployer votre application ou redémarrer votre agent

Créer une nouvelle application de navigateur