Monitoring des navigateurs et de l'agent Node.js

Avec l'agent Node.js, vous pouvez ajouter une instrumentation de navigateur à vos pages Web. Pour utiliser avec votre agent Node.js, assurez-vous de disposer de la dernière version de l'agent Node.js.

Pour activer monitoring des navigateurs dans l'interface utilisateur, suivez les procédures pour installer l'agent de navigateur. Suivez ensuite les procédures de cette section pour configurer l’agent Node.js.

Insérer l'en-tête JavaScript

L'instrumentation de l'agent Node.js peut continuer au-delà application de votre dans le navigateur de l'utilisateur final. Le module newrelic peut générer des en-têtes script qui, une fois insérés dans vos modèles HTML, captureront le temps final de chargement de la page de l'utilisateur. Les en-têtes doivent être injectés manuellement, mais aucune configuration supplémentaire n'est nécessaire.

Au début de tag head de votre page HTML, insérez les résultats de newrelic.getBrowserTimingHeader() après n'importe quelle balise méta CHARSET.
Exception : pour une compatibilité Internet Explorer maximale, insérez les résultats de newrelic.getBrowserTimingHeader() après n'importe quelle balise méta X-UA-COMPATIBLE HTTP-EQUIV .
Appelez l'en-tête une fois pour chaque demande. Ne pas mettre en cache l'en-tête.

La génération d'en-têtes est rapide et ne nécessite pas que votre application fasse requests supplémentaires à New Relic.

Exemples de cadres

Voici quelques exemples de la façon de configurer monitoring des navigateurs avec différents frameworks et modèles.

Cet exemple utilise Express, un framework d'application Web, et jade, un module de modèle. Bien que les spécificités soient différentes avec d’autres cadres, cette approche générale devrait fonctionner dans la plupart des cas.

La manière la plus simple d'insérer des en-têtes de synchronisation de navigateur est de transmettre le module newrelic dans votre modèle, puis d'appeler newrelic.getBrowserTimingHeader() à partir du modèle.

Dans votre app.js:

const newrelic = require('newrelic');
const app = require('express')();
// in express, this lets you call newrelic from within a template
app.locals.newrelic = newrelic;

app.get('/user/:id', function (req, res) {
  res.render('user');
});
app.listen(process.env.PORT);

Dans votre layout.jade:

doctype html
html
head
  != newrelic.getBrowserTimingHeader()
  title= title
  link(rel='stylesheet', href='stylesheets/style.css')
body
  block content

Cet exemple utilise Express avec Swig.

Dans votre app.js:

const newrelic = require('newrelic');

const http = require('http')
const path = require('path')
const swig = require('swig')

const app = require('express')();

app.locals.newrelic = newrelic;

//taken from http://paularmstrong.github.io/swig/docs/#express
app.engine('html', swig.renderFile);
app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get('/user/:id', function (req, res) {
  res.render('user');
});

app.listen(process.env.PORT);

Dans votre views/user.html:

<!DOCTYPE html>
<html>
  <head>
    {{ newrelic.getBrowserTimingHeader() }}
    <title>Hello</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Cet exemple utilise hapi.js et handlebars. D'autres langages de création de modèles similaires nécessitent généralement des crochets triples ; par exemple, l'utilisation de moustache avec hogan-express. Cela permet d’éviter que le contenu du script ne s’échappe.

En utilisant hapi, dans votre app.js:

const newrelic = require('newrelic');
const Hapi = require('hapi');
const server = new Hapi.Server(parseInt(PORT), '0.0.0.0', {
  views: {
    engines : {html: 'handlebars' },
    path : __dirname + '/templates'
  }
});

function homepage(request, reply) {
  const context = {
    // pass in the header each request
    nreum : newrelic.getBrowserTimingHeader(),
    content : ...
  };

  reply.view('homepage', context);
};

server.route({
  method : 'GET',
  path : '/',
  handler : homepage
});

server.start();

Dans votre templates/homepage.html:

<!DOCTYPE html>
<html>
  <head>
    {{{ nreum }}}
    <title>Hello</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

Désactiver la génération d'en-tête

Par défaut, les appels à newrelic.getBrowserTimingHeader() doivent renvoyer des en-têtes valides. Pour désactiver la génération d'en-tête sans supprimer votre code de modèle : Dans votre fichier newrelic.js , ajoutez :

browser_monitoring : {
    enable : false
}

Vous pouvez également définir la variable d’environnement NEW_RELIC_BROWSER_MONITOR_ENABLE=false.

Prudence

Laissez toujours ssl entre l'agent et le collecteur New Relic lors de l'utilisation monitoring des navigateurs.

Vous pouvez laisser l'appel d'API en place en toute sécurité même si vous n'utilisez pas monitoring des navigateurs ou le module newrelic.

Si monitoring des navigateurs est désactivée, ou s'il y a une erreur empêchant la génération d'en-têtes fonctionnels, le module newrelic génère un commentaire HTML inoffensif.
Si vous désactivez complètement le module newrelic , aucun contenu ne sera généré.

Cette traduction automatique est fournie pour votre commodité.

Monitoring des navigateurs et de l'agent Node.js

Insérer l'en-tête JavaScript

Exemples de cadres

Express et jade

Express et Swig

Hapi.js et handlebars

Désactiver la génération d'en-tête

Prudence

Cette traduction automatique est fournie pour votre commodité.

Monitoring des navigateurs et de l'agent Node.js

Insérer l'en-tête JavaScript .css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples de cadres

Express et Swig

Hapi.js et handlebars

Désactiver la génération d'en-tête

Prudence

Insérer l'en-tête JavaScript