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

É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

É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

Épinglage de la version de l'agent de navigateur

É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