Instrumentation des vues d'extension web avec l'agent de navigateur New Relic.

L'agent de navigateur New Relic vous aide à effectuer le monitoring des performances, erreurs et expériences utilisateur de votre application ou site web. Elle collecte les données sur le temps de chargement de page, les requêtes Ajax, les erreurs JavaScript et les événements personnalisés, et les envoie à New Relic pour l'analyse et la visualisation. Mais saviez-vous que la vue rendue par une extension web opère de la même façon qu'une page web classique ? L'agent de navigateur New Relic peut être utilisé pour observer la même large gamme de données RUM (de l'anglais Real User Monitoring, ou monitoring des utilisateurs réels) directement dans les vues rendues par votre extension web.

Si vous voulez utiliser l'agent de navigateur New Relic dans une vue d'extension web, telle qu'une fenêtre automatique, une barre latérale, ou une page d'options, vous devez suivre quelques étapes pour l'installer et le configurer. Voici un guide qui vous explique comment procéder.

Installation de l’agent de navigateurs en tant que package NPM

La première étape consiste à installer l'agent de navigateur sur votre projet d'extensions web. Les exemples donnés dans cet article utilisent le package NPM de l'agent de navigateur. 

Vous pouvez installer le package NPM de l'agent de navigateur de New Relic en exécutant la commande suivante :

npm install @newrelic/browser-agent –save

Cette commande ajoute l'agent de navigateur en tant que dépendance dans votre fichier package.json et le télécharge dans le dossier node_modules.

En utilisant la bibliothèque d'agents NPM, les extrants du développement de votre application incluent directement le code de l'agent, ce qui peut simplifier la configuration des règles de sécurité du contenu (CSP, de l'anglais Content Security Rules) pour votre extension web. Si vous souhaitez adopter l'agent en copiant et collant notre snippet en tant que script intégré (« inline ») directement dans vos vues d'extension, vous devez vous assurer que votre extension dispose de l'autorisation nécessaire pour transférer des ressources externes à partir du réseau de diffusion de contenu (CDN) de New Relic.

Chargement de l'agent de navigateur dans la vue de votre extension

Pour pouvoir observer et enregistrer les données, l'agent de navigateur doit être inclus et initialisé dans le code exécuté dans vos vues. Pour ce faire, ajoutez l'agent au niveau le plus haut du code définissant la vue web. L'exemple suivant montre que l'agent est ajouté et initialisé au niveau le plus haut d'une vue d'extension web basée sur React.

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

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

// Renseigner la configuration en utilisant les valeurs du snippet JavaScript copié-collé dans l'interface NR1.

const options = {

   Init:{ … },
loader_config: { … }
Info: { … }

}
 

// Le code du chargeur d'agent est exécuté immédiatement lors de l'instanciation.

const browserAgent = new BrowserAgent(options)

// Passage de l'instance d'agent dans l'application React pour que les autres composants puissent y accéder si nécessaire

ReactDOM.render(

  <App 

    browserAgent={browserAgent} 

  />, 

  document.getElementById('root')

);

Une fois que l'agent est installé et exécuté dans vos vues d'extension web, il peut détecter toutes les données RUM qu'il détecterait normalement sur une page web standard. Pour configurer le comportement de votre agent de navigateur comme vous le voulez, veuillez voir le fichier readme du NPM pour des informations détaillées.

En suivant ces étapes, vous pouvez facilement ajouter l'agent de navigateur New Relic à votre vue d'extension Chrome et commencer le monitoring des performances et de l'expérience des utilisateurs réels des vues d'extension. Vous pouvez visualiser les données collectées par l'agent de navigateur dans le dashboard de votre compte New Relic et l'utiliser pour optimiser et résoudre les problèmes de votre extension. Installez l'agent de navigateur dès aujourd'hui pour mieux comprendre l'impact de l'extension sur l'expérience de vos clients.