Tutoriel NerdGraph : instrumenter plusieurs applications avec npm et NerdGraph

Vous pouvez utiliser notre API NerdGraph pour créer une nouvelle application de navigateur et récupérer les valeurs de configuration. Cela peut être combiné avec le package npm de l'agent de navigateur pour intégrer la configuration de l'agent de navigateur dans le cadre de votre processus de création d'application ou séparer la configuration de l'agent de l'implémentation de l'agent dans votre application.

Si vous n'avez jamais utilisé NerdGraph pour créer ou configurer une application de navigateur, lisez d'abord ce didacticiel NerdGraph.

Configurer l'agent

Ouvrez votre IDE et un terminal à la racine de votre projet ou là où vos dépendances frontend sont gérées. Il s'agit de l'emplacement où vous exécuterez npm install --save @newrelic/browser-agent pour installer le package npm. Une fois installé, recherchez le fichier de point d'entrée principal de votre site Web. Cela peut être <project_root>/src/index.js ou <project_root>/src/index.ts , mais cela peut être différent dans votre application. Si vous avez plusieurs points d'entrée, sélectionnez celui qui se charge le plus rapidement dans le navigateur et, de préférence, n'utilise pas l'attribut d'élément script async ou defer.

Une fois que vous avez localisé l'endroit où vous souhaitez ajouter l'agent de navigateur, ajoutez cet snippet de code dans ce fichier.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// Populate using values from NerdGraph
const options = {
  init: { ... },
  info: { ... },
  loader_config: { ...}
}

// The agent loader code executes immediately on instantiation.
new BrowserAgent(options)

// Remaining code

L'instruction import pour l'agent de navigateur doit être la première chose dans votre fichier source. Après les import instructions restantes, instanciez et configurez immédiatement l'agent de navigateur. Assurez-vous de faire cela avant tout autre code afin que l'agent de navigateur ait une chance de charger et de capturer les données le plus tôt possible.

Récupérer la configuration

L'objet options du snippet précédent doit être renseigné avec les informations configuration sur l'application du navigateur de New Relic. Pour les besoins de ce tutoriel, nous utiliserons l'UI de New Relic avec une de navigateur existante application et l'explorateur NerdGraph pour compléter l'appel d'API.

query {
  actor {
    entity(guid: '<guid>') {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfig
        }
      }
    }
  }
}

{
  "data": {
    "actor": {
      "entity": {
        "browserProperties": {
          "jsConfig": {
            "info": {
              "applicationID": 1234567,
              "beacon": "bam.nr-data.net",
              "errorBeacon": "bam.nr-data.net",
              "licenseKey": 123456789,
              "sa": 1
            },
            "init": {
              "ajax": {
                "deny_list": [
                  "bam-cell.nr-data.net"
                ]
              },
              "distributed_tracing": {
                "allowed_origins": [],
                "cors_enabled": false,
                "cors_use_newrelic_header": false,
                "cors_use_tracecontext_headers": false,
                "enabled": true,
                "exclude_newrelic_header": false
              },
              "privacy": {
                "cookies_enabled": true
              }
            },
            "loader_config": {
              "accountID": <redacted>,
              "agentID": <redacted>,
              "applicationID": <redacted>,
              "licenseKey": "<redacted>",
              "trustKey": 1672072
            }
          }
        }
      }
    }
  }
}

débloquer en utilisant le packagenpm

Avec le package npm installé et correctement configuré, vous pouvez désormais créer et déployer votre application de navigateur. Chargez votre site Web dans un navigateur et vérifiez que des appels réseau sont effectués vers l'URI beacon à partir de la configuration.

Injecter la configuration de l'application du navigateur dans HTML

Au lieu de placer la configuration de l'application du navigateur dans votre code source, vous pouvez également injecter la configuration dans le code HTML de votre site Web. Cela est particulièrement utile lorsque votre code source est réutilisé sur plusieurs sites Web.

import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// Remaining import statements

// The agent loader code executes immediately on instantiation.
new BrowserAgent()

// Remaining code

query {
  actor {
    entity(guid: '<guid>') {
      ... on BrowserApplicationEntity {
        guid
        name
        browserProperties {
          jsConfigScript
        }
      }
    }
  }
}

{
  "data": {
    "actor": {
      "entity": {
        "browserProperties": {
          "jsConfigScript": "<script type=\"text/javascript\">\n;window.NREUM||(NREUM={});NREUM.init={distributed_tracing:{enabled:true},privacy:{cookies_enabled:true},ajax:{deny_list:[\"bam-cell.nr-data.net\"]}};\n\n;NREUM.loader_config={accountID:\"<redacted>\",trustKey:\"<redacted>\",agentID:\"<redacted>\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\"};\n;NREUM.info={beacon:\"bam.nr-data.net\",errorBeacon:\"bam.nr-data.net\",licenseKey:\"<redacted>\",applicationID:\"<redacted>\",sa:1};\n</script>\n"
        }
      }
    }
  }
}

Prochaines étapes

Ce tutoriel n'effleure qu'une partie de la manière dont vous pourriez utiliser notre API NerdGraph et le package npm de l'agent de navigateur. Quelques idées pour les prochaines étapes :

• Intégrez l'agent de navigateur dans votre de création de site Web application et utilisez NerdGraph pour récupérer la configuration de de navigateur application pour chacun de vos clients lorsqu'ils activent New Relic monitoring dans votre de dashboard gestion.
• Créez un composant d'agent de navigateur partagé dans la bibliothèque de composants de votre organisation et injectez automatiquement la configuration dans le HTML à l'aide d'une fonction de périphérie CDN qui appelle NerdGraph.
• Modifiez votre pipeline CI/CD pour remplir la source de code avec une configuration application de navigateur différente de NerdGraph en fonction de l'environnement déployé.