New Relic Browserを有効化する場合には、APM Agentを利用する方法Copy/Pasteによるタグを埋め込む方法の2通りがあります。また、APM Agentを利用する方法では、利用している環境によっては特にソースコードの修正なく利用できる場合と、ソースコードの修正が必要な場合の2パターンがあります。この記事では、いつどの方法が使える/使えないのか、どのようなメリットがあるのか、について説明したいと思います。

APM Agentを利用する方法

利用できるケース

  • 計測対象のページのHTMLを動的に生成しており、かつ、そのHTMLを生成するサーバーサイドアプリにAPM Agentを設定している場合

および、以下のどちらかを満たすケース

  • HTMLを生成する処理にNew Relic APM Agent APIを呼び出すコードを挿入できる場合
  • ソースコードの修正なしに有効化する機能がサポートしている言語・フレームワークの場合(詳細は以下で)

メリット

  • Browserの有効化・無効化を含めほぼすべての設定変更を、アプリの変更・再デプロイなしにNew RelicのBrowser UIから実行できる

インストール手順の概要

  1. APM AgentでBrowserの計測を有効化します。多くの言語のAgentではデフォルトで有効化しています。
  2. ソースコードの修正が不要な言語・フレームワークか確認します。サポートされるパターンは以下の通りです。これ以外のパターンの場合や、うまく動かない場合はAPM Agent APIを利用する方法が使えます。
  3. APM Agent APIを利用する場合、計測対象のページのHTMLコードのheadタグを生成する箇所で、APM Agent APIで取得したscriptタグを挿入します。具体的な利用方法は各言語 Agentのドキュメントを参考にしてください。以前の記事の通り、このAPIはリクエストごとに呼び出す必要があり、Webサーバー起動時に実行してキャッシュするような使い方はできません。
  4. 有効化したWebページにブラウザからアクセスすると計測が始まります。すると、New RelicのBrowserのページにアプリが表示されます。これ以降、Browserの設定を変更する場合は、UIから変更することができます。

 

Copy/Pasteを利用する方法

利用できるケース

  • 静的にHTMLを提供している場合やバックエンドのアプリにAPM Agentを設定していない場合を含むほぼすべてのケース

メリット

  • ほぼすべてのケースに対応していること

インストール手順の概要

  1. New Relic BrowserのUIにアクセスし、新規Browserアプリケーションを「add more」から作成する
  2. UIの表示に従いアプリ名などを入力する。バックエンドのアプリにAPM Agentをインストールしている場合は対応するアプリ名を入力する。
  3. 表示されたscriptタグをコピーし、計測するページのHTMLのheadタグに挿入する。
  4. 挿入したHTMLを公開し、アクセスされると計測が始まります。

この方法のデメリットは、Browserの設定変更時にscriptタグを再生成し、HTMLコードを修正し再デプロイする必要があることです。もし、CI/CDなどをご利用の場合はその手間を削減する方法としてscriptタグをREST APIで取得する方法があります。Browser ApplicationsのListもしくはCreate APIでscriptタグを取得できるため、CI/CDプロセスに組み込むことで手動でのコード変更が不要にできます。