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プロセスに組み込むことで手動でのコード変更が不要にできます。

ソフトウェアエンジニア、インフラエンジニアなど自社開発や自社運用の現場で経験を積んだのち外資系ソフトウェアベンダーでのテクニカルサポートを経て現職。New Relicユーザーだった経験あり。コミュニティでの登壇活動も多く、Microsoft MVPを7年連続受賞中。Microsoft Certified Azure Solutions Architect Expert。得意分野はC#をはじめとするソフトウェア開発、Kubernetes関連技術およびパブリッククラウド。 View posts by .