Instrumentierung von Weberweiterungsansichten mit dem New Relic Browser-Agent

Der New Relic Browser-Agent erleichtert Ihnen das Monitoring von Performance, Fehlern und UX Ihrer Webanwendung oder Website. Er sammelt Daten zu Seitenladezeit, Ajax-Anfragen, JavaScript-Fehlern sowie Custom-Events und sendet diese zur Analyse und grafischen Darstellung an New Relic. Aber wussten Sie, dass die von einer Weberweiterung gerenderte Ansicht dem gleichen Muster folgt wie eine herkömmliche Webseite? Deshalb können Sie den New Relic Browser-Agent direkt in den Ansichten Ihrer Weberweiterung zum Monitoring derselben breiten Palette an Real-User-Monitoring(RUM)-Daten nutzen.

Um den New Relic Browser-Agent in einer Ansicht Ihrer Weberweiterung zu verwenden (z. B. einem Pop-up-Fenster, einer Seitenleiste oder einer Optionsseite), sind zur korrekten Installation und Konfiguration die nachstehenden Schritte notwendig.

Installieren Sie den Browser-Agent als NPM-Paket

Als Erstes müssen Sie den Browser-Agent in Ihrem Weberweiterungsprojekt installieren. Für die Beispiele in diesem Artikel wurde das NPM-Paket für den New Relic Browser-Agent verwendet. 

Das NPM-Paket für den New Relic Browser-Agent installieren Sie mit dem folgenden Befehl:

npm install @newrelic/browser-agent –save

Dadurch wird der Browser-Agent als Abhängigkeit in Ihrer package.json-Datei hinzugefügt und in den Ordner node_modules heruntergeladen.

Durch die Verwendung der NPM-Agent-Bibliothek umfasst der Output beim Erstellen Ihrer App den Agent-Code, wodurch sich die Regeln für die Content Security Policy (CSP) Ihrer Weberweiterung leichter konfigurieren lassen. Wenn Sie den Agent durch Kopieren und Einfügen unseres Snippets als Inline-Skript in Ihre Erweiterungsansichten implementieren möchten, müssen Sie sicherstellen, dass die Erweiterung zum Laden externer Ressourcen aus dem New Relic Content Delivery Network (CDN) berechtigt ist.

Laden Sie den Browser-Agent in Ihrer Erweiterungsansicht

Um Daten zu erfassen, muss der Browser-Agent im Code, der in Ihren Ansichten ausgeführt wird, enthalten und initialisiert sein. Fügen Sie den Agent dazu der höchsten Ebene des Codes hinzu, der Ihre Webansicht definiert. Dieses Beispiel zeigt, wie der Agent der höchsten Ebene einer React-basierten Weberweiterungsansicht hinzugefügt und initialisiert wird.

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';

// Populieren Sie Ihre Konfiguration mit den Werten durch Kopieren und Einfügen des JavaScript-Snippets in der New Relic UI.

const options = {

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

}
 

// Der Agent-Loader-Code wird nach der Instanziierung sofort ausgeführt.

const browserAgent = new BrowserAgent(options)

// Agent-Instanz wird an die React-Anwendung weitergeleitet, damit andere Komponenten bei Bedarf darauf zugreifen können

ReactDOM.render(

  <App 

    browserAgent={browserAgent} 

  />, 

  document.getElementById('root')

);

Sobald der Agent in Ihren Weberweiterungsansichten installiert ist und ausgeführt wird, kann er die gleichen RUM-Daten erfassen wie auf einer herkömmlichen Webseite. Eine detaillierte Anleitung zur individuellen Konfiguration Ihres Browser-Agent finden Sie in der NPM-Readme-Datei.

Mit diesen Schritten fügen Sie den New Relic Browser-Agent Ihrer Chrome-Erweiterungsansicht hinzu und können ihn zum Monitoring von Performance und Benutzererlebnis Ihrer Erweiterungsansichten einsetzen. Die vom Browser-Agent erfassten Daten sehen Sie in Ihrem New Relic Dashboard, das Sie dann zur Optimierung und zum Troubleshooting Ihrer Erweiterung nutzen können. Installieren Sie den Browser-Agent gleich heute, um zu sehen, wie sich Ihre Weberweiterung auf das Benutzererlebnis auswirkt.