Node.js におけるページ読み込みタイミング

New Relic の Node.js エージェントでページ読み込みタイミング（リアルユーザー監視や RUM とも呼ばれる）を使用する場合は、Node.js エージェントの最新リリースを使用してください。

UI からページ読み込みタイミングを有効にするには、Browser の設定を使用します。このページの手順に従って、New Relic の Node.js エージェントでページ読み込みタイミングを設定します。

JavaScript ヘッダーを追加

Node.js エージェントの計測は、アプリケーションを超えてエンドユーザーのブラウザに継続することができます。newrelic モジュールは、HTML テンプレートに挿入するとエンドユーザーのページ読み込み時間を取得する script ヘッダーを生成できます。ヘッダーは手動で注入する必要がありますが、特に設定は必要ありません。

ページの head タグの先頭に、CHARSET メタタグの後にnewrelic.getBrowserTimingHeader() の結果を挿入します。

例外:
インターネットエクスプローラーの互換性を最大限に活用するには、X-UA-COMPATIBLE HTTP-EQUIV メタタグの後に newrelic.getBrowserTimingHeader() の結果を挿入します。
リクエストごとにヘッダーを1回呼び出します。ヘッダーをキャッシュしないでください。

ヘッダーの生成は高速です。生成時にアプリケーションが New Relic にさらにリクエストを行うことはありません。

フレームワークの例

以下は、対応しているフレームワークとテンプレートの組み合わせで、ページ読み込みタイミングを設定する例をいくつか紹介します。

Express と jade

この例では、ウェブアプリケーションフレームワークとして、Express、テンプレートモジュールとして jade を使っています。細かい点は他のフレームワークとは異なりますが、このアプローチはほとんどのフレームワークでも機能します。

ブラウザタイミング用の JS を挿入する最も簡単な方法は、newrelic モジュールをテンプレートに渡し、テンプレート内から newrelic.getBrowsertimingHeader() を呼び出すことです。

app.js の内容:

    var newrelic = require('newrelic');
    var 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);

layout.jade の内容:

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

Express と Swig

Express と Swig を使った場合の例です。

app.js の内容:

    var newrelic = require('newrelic');

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

    var 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);

views/user.html の内容:

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

Hapi.js と handlebars

hapi.js と handlebars を使った例です。その他の似たようなテンプレート言語では、通常、３つの括弧({{{)が必要です。例えば、hogan-express と mustache を使っている場合はそうです。これを使うと、スクリプト内のエスケープを防ぐことができます。

hapi を使った app.js の内容:

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

    function homepage(request, reply) {
      var context = {

        // pass in the header each request
        nreum : newrelic.getBrowserTimingHeader(),
        content : ...
    };

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

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

    server.start();

templates/homepage.html の内容:

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

ヘッダーの生成を無効にする

デフォルトでは、newrelic.getBrowserTimingHeader() を呼び出すと有効なヘッダーを取得できます。テンプレートコードを削除せずにヘッダーの生成を無効にするには、newrelic.js ファイルに以下の行を追加します。

    browser_monitoring : {
      enable : false
    }

環境変数 NEW_RELIC_BROWSER_MONITOR_ENABLE=false を設定することもできます。

ブラウザ監視を使用する場合は、常にエージェントと New Relic サーバーの間の通信で ssl を利用できる状態を維持してください。

ページ読み込みタイミングや newrelic モジュールを使用していなくても、API 呼び出しを残しておいても問題ありません。

ページ読み込みタイミングが無効になっている場合、また、動作中のヘッダーを生成できないエラーが発生している場合、newrelic モジュールは無害な HTML のコメントを生成します。
newrelic モジュールを完全に無効にすると、コンテンツは生成されなくなります。

目次

JavaScript ヘッダーを追加

フレームワークの例

ヘッダーの生成を無効にする

関連情報