Installez l’agent de navigateurs

Pour commencer avec , ajoutez notre agent de navigateur au HTML des vues que vous souhaitez monitorer. L'agent de navigateur est un snippet de code JavaScript qui monitore les performances de votre site et envoie ces données à New Relic.

Avant de commencer

Si vous ne l'avez pas encore fait, vous souhaiterez peut-être vérifier que votre application de navigateur répond à notre compatibilité et à nos exigences.

Il existe quatre façons d’installer l’agent du navigateur. En fonction de vos besoins spécifiques, vous pouvez :

Accédez à one.newrelic.com > Integrations & Agents > Browser and mobile > Browser monitoring et suivez les instructions pour générer le snippet JavaScript du navigateur dans l’ UI.

Obtenez le snippet de votre navigateur

Une fois que vous avez le snippet, collez-le aussi près que possible du haut de votre tag <head>, mais après toute balise META sensible à la position (comme X-UA-Compatible et charset).

Pour des informations plus détaillées sur le placement de le snippet, voir Exigences de placement JavaScript.

(Si vous souhaitez installer l'agent de navigateur via npm, consultez notre package@newrelic/browser-agent .)

Prudence

Le retard de l'instanciation entraîne la perte d'informations par l'agent jusqu'à ce qu'il soit entièrement chargé et initialisé. L'ordre d'exécution de ces scripts entraîne une certaine perte de données instrumentation dès le début des pages vues.

Pour des raisons de performances ou autres, vous souhaiterez peut-être retarder l'initialisation de l'agent du navigateur dès le début du cycle de chargement de la page. Vous ne pourrez pas utiliser l'API newrelic tant que l'agent ne sera pas entièrement initialisé. Ce délai crée également des données incomplètes dans monitoring de votre navigateur de UI.

Une fois l’agent entièrement initialisé, il fonctionne comme prévu. Tout retard affecte également le moment où l'agent encapsule les variables globales ou s'abonne à un événement relatif à une autre bibliothèque ou à un autre code qui affecte les données capturées.

Vous pouvez retarder l’initialisation de l’agent de ces manières :

Ajoutez une tag script-src avec l'attribut async.
Ajoutez une tag script-src avec l'attribut defer.
Utilisez l'importation dynamique ou le placement chronologiquement tardif du code du chargeur.
src de votre page doit pointer vers une version valide du chargeur d'agent dans notre CDN. Par exemple, l'URL qui contient toujours notre sortie d'agent Pro+SPA actuelle est https://js-agent.newrelic.com/nr-loader-spa-current.min.js. CSP est requis pour charger un script tiers externe.
Pour déterminer quand vous pouvez commencer à appeler l'API newrelic , abonnez-vous à un événement au niveau global :
```
window.addEventListener("newrelic", (evt) => {
  if (evt.detail.loaded) {
    // you can start using newrelic.interaction(), etc. now
  }
});
```

Avec un agent APM, vous pouvez afficher monitoring des navigateurs sans ajouter manuellement le snippet à votre code. Lorsque vous redémarrez l'agent, il utilise automatiquement la dernière version de l'agent du navigateur.

Si vous utilisez un agent APM (monitoring des performances des applications) pour monitorer le backend de votre application de navigateur et que vous disposez d'une application nonSPA , nous vous recommandons d'utiliser cette méthode.

Il existe des étapes spécifiques pour chaque agent APM :

Si vous préférez créer votre snippet de navigateur par programmation, vous pouvez le faire via notre NerdGraph, notre API GraphQL .

Pour en savoir plus, consultez notre tutoriel NerdGraph pour créer un snippet de navigateur et le configurer.

Une fois que vous avez le snippet, ajoutez-le à la tag <head> de votre application.

Si vous souhaitez automatiser monitoring du déploiement des navigateurs sur plusieurs applications Web, vous pouvez utiliser NerdGraph et notre package npm d'agent de navigateur pour configurer et déployer l'agent dans le cadre de votre processus de création d'application.

Pour en savoir plus, consultez instrumenter plusieurs applications avec npm et NerdGraph.

Quelle est la prochaine étape ?

Une fois l'agent du navigateur installé, attendez quelques minutes et recherchez les données dans notre UI de monitoring des navigateurs.

Si cela fait plus de 15 minutes et que vous ne voyez pas de données, consultez Résoudre les problèmes d'installation de votre navigateur.

Une fois que vous voyez les données du navigateur dans l'UI, voici quelques étapes à suivre pour tirer le meilleur parti de ces données :

Cette traduction automatique est fournie pour votre commodité.

Installez l’agent de navigateurs

Avant de commencer