顧客に提供する際に、New Relic Browserエージェントの機能をカスタマイズしたいと思ったことはありませんか？もしかしたら、Browserエージェントが ブラウザサポートマトリックスでサポートしているものとは異なるブラウザや、古いブラウザをサポートする必要があるかもしれません。オープンソースのBrowserエージェントには、リポジトリをフォーク（複製）したり、コードを変更したり、独自のカスタムBrowserエージェントを構築したりするオプションがあります。ただし、このプロセスには、コードの学習、システムの構築、ツールのテストなど、フォークされたリポジトリの管理という追加のオーバーヘッドが伴います。さらに、主要なブラウザエージェントリポジトリに加えられた変更を常に最新の状態に保つ必要があるため、フォークを管理するこの作業には労力がかかります。
Browserエージェントでは、解決策として、代わりにnpmパッケージを使用します。npmパッケージを使用すると、クライアント側アプリケーションにBrowserエージェントをインポートし、デプロイする機能を選択して、既に使用しているのと同じJavaScriptビルドプロセスにエージェントを含めることができます。このブログでは、例を用いて上記を実行する方法と、詳細を確認するにはどこにアクセスすればよいかについてご説明します。
なぜnpmパッケージを利用するのでしょう？それは、以下のユースケースにおいて、簡単にカスタマイズすることができるからです。
- Browserエージェントに含まれる機能のサブセットをリリースする
- Browserエージェントがネイティブにサポートしていないブラウザをサポートする
- アプリケーションで使用するBrowserエージェントのバージョンと、バージョンの変更タイミングを制御する
- アプリのインスタンス（複数の環境または顧客）ごとに異なる設定でBrowserAgentを挿入する
- オープンソースBrowserエージェントからフォークしたリポジトリを維持・メンテナンスするための、各種コスト(TCO)を削減する
ブラウザアプリを作成し、設定値を取得
まず初めに、New Relicで新しいブラウザアプリを作成するか、npmパッケージで使用する既存のブラウザアプリを見つける必要があります。これは、対応するAPMエージェントの有無にかかわらず実行できます。アプリを作成するには、次の手順に従います。
- New Relicを開き、ナビゲーションパネルからAdd Dataを選択します
- [Browser & mobile]を選択し、Browser monitoringデータソースを選択します
- デプロイメント手法として、APMまたはコピー/ペーストを選択します
- APMで監視されている既存のアプリを選択するか、新しいアプリに名前を付けて[有効にする]をクリックします
次に、npmパッケージ経由でエージェントをインスタンス化する際のオプションの定義のため、ブラウザアプリの設定値を取得する必要があります。
- New Relicのナビゲーションパネルから[Browser]を選択して、ブラウザアプリを表示します
- 目的のアプリを選択し、Applicatoin settingsページに移動します
- Copy/Paste JavaScriptボックスから、NREUMオブジェクトに割り当てられた設定値（
init、info、loader_config）をコピーします。これらの設定値は、npmパッケージを使用してエージェントをインスタンス化するときに使用します
npmパッケージを使用した、計装のセットアップ
アプリケーションでエージェントを使用できるようにするには、NPMまたはYarn経由でインストールします。
$ npm install @newrelic/browser-agent --save
$ yarn add @newrelic/browser-agent最良の結果を得るには、Browserエージェントができるだけ早くページに読み込まれることが重要です。Browserエージェントはブラウザアプリケーションにバンドルされるため、早期に（できれば最初に）確実に実行される場所を選択する必要があります。ほとんどのブラウザアプリケーションには、エントリーポイントと呼ばれるJavaScriptまたはTypescriptファイルがあります。これは、サイトの読み込み時に実行される最初のファイルであり、Browserエージェントをインスタンス化するのに最適な場所です。
ブラウザアプリケーションのエントリポイントのソースファイルを変更します。おそらく、次の例と似たようになるかと思います。
import { BrowserAgent } from '@newrelic/browser-agent/loaders/browser-agent'
// 残りのクライアント側アプリケーションはインポート
// コピー＆ペーストしたJavaScriptスニペットの値を使用してデータを入力。
const options = {
init: { ... }, // NREUM.init
info: { ... }, // NREUM.info
loader_config: { ... } // NREUM.loader_config
}
// エージェントローダーコードは、インスタンス化時にすぐに実行。
new BrowserAgent(options)
// クライアント側アプリケーションの残りのコードNew RelicのNREUMオブジェクトの値（init、info、loader_configの値）でオプションオブジェクトを更新します。ブラウザアプリケーションを構築しデプロイして、変更を適用します。これで、コピー/ペーストやAPMインジェクション手法で得られるものと同じ、完全かつ自動のサイトインストルメンテーションを入手できます。
計装をカスタマイズする
BrowserAgentクラスは、Browserエージェントの利用可能なすべての機能を含むユーティリティクラスです。npmパッケージには、含めたい機能の配列を渡すことができるAgentクラスも含まれています。これにより、サイトに計装されるものや、New Relicへの報告内容をカスタマイズできます。
次のコードスニペットをご覧ください。この例には、Browserエージェントに対して有効にできる現在の機能がすべて含まれています。ただし、インポートしてfeatures配列に含める機能を選択することはできます。
import { Agent } from '@newrelic/browser-agent/loaders/agent'
import { Ajax } from '@newrelic/browser-agent/features/ajax';
import { JSErrors } from '@newrelic/browser-agent/features/jserrors';
import { Metrics } from '@newrelic/browser-agent/features/metrics';
import { PageAction } from '@newrelic/browser-agent/features/page_action';
import { PageViewEvent } from '@newrelic/browser-agent/features/page_view_event';
import { PageViewTiming } from '@newrelic/browser-agent/features/page_view_timing';
import { SessionTrace } from '@newrelic/browser-agent/features/session_trace';
import { Spa } from '@newrelic/browser-agent/features/spa';
// 残りのクライアント側アプリケーションはインポート
// コピー＆ペーストしたJavaScriptスニペットの値を使用してデータを入力
const options = {
init: { ... }, // NREUM.init
info: { ... }, // NREUM.info
loader_config: { ... }, // NREUM.loader_config
features: [
Ajax,
JSErrors,
Metrics,
PageAction,
PageViewEvent,
PageViewTiming,
SessionTrace,
Spa
]
}
// エージェントローダーコードはインスタンス化時にすぐに実行。
new Agent(options)
// ブラウザアプリケーションコードの残りの部分JavaScriptツールチェーンのサポート
多数のクライアント側のビルドツールがあり、これらのツールの多くは、Browserエージェントのnpmパッケージを統合およびカスタマイズする上で便利な機能を提供します。たとえば、webpackでは、Browserエージェントのnpmパッケージに変換を適用するように設定することで、ブラウザサポートマトリックスにないブラウザのサポートを提供できるようになります。例については、次のコードスニペットを確認してください。
{
... // その他のwebpack構成設定
rules: [{
test: /\.(js|jsx)$/i,
exclude: /node_modules\/(?!@newrelic\/browser-agent).*/,
use: 'babel-loader'
}],
... // その他のwebpack構成設定
}このwebpack設定では、babelルールのexcludeプロパティが更新され、Browserエージェントのnpmパッケージもbabelによって変換されます。npmパッケージコードの変換に対する同様のサポートは、他の多くのJavaScriptビルドツールでも利用できます。
デモ動画：Reactアプリにカスタマイズ可能なBrowserエージェントを追加
これらのプロセスのチュートリアルを確認するには、Johnathan Potterの以下の動画をご覧ください。この例では、newrelic-browser-agentパッケージをReactアプリに追加します。
次のステップ
Browserエージェントのnpmパッケージは、計装のニーズに合わせたカスタマイズオプションをさらに提供できます。古いブラウザを使用している顧客や、ゲームコンソールのブラウザ、スマートTVアプリケーションなどの固有のユースケースの顧客向けに計装のロックを解除できます。次のリソースを使用して、さらに解説します。
- New Relicコミュニティフォーラムで、ユースケースに関するフィードバックをぜひ共有してください
- エージェント設定の詳細については、パブリックオープンソースのnewrelic-browser-agentリポジトリにアクセスしてください
- ブラウザモニタリングの詳細については、New Relicのドキュメントをご覧ください
まだNew Relicをお使いではありませんか？無料のアカウントにサインアップしてください。アカウントには、毎月100GBの無料データ取込み、1名の無料フルプラットフォームユーザー、および無制限の無料ベーシックユーザーが含まれています。
本ブログに掲載されている見解は著者に所属するものであり、必ずしも New Relic 株式会社の公式見解であるわけではありません。また、本ブログには、外部サイトにアクセスするリンクが含まれる場合があります。それらリンク先の内容について、New Relic がいかなる保証も提供することはありません。
