顧客に提供する際に、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経由でインストールします。
最良の結果を得るには、Browserエージェントができるだけ早くページに読み込まれることが重要です。Browserエージェントはブラウザアプリケーションにバンドルされるため、早期に(できれば最初に)確実に実行される場所を選択する必要があります。ほとんどのブラウザアプリケーションには、エントリーポイントと呼ばれるJavaScriptまたはTypescriptファイルがあります。これは、サイトの読み込み時に実行される最初のファイルであり、Browserエージェントをインスタンス化するのに最適な場所です。
ブラウザアプリケーションのエントリポイントのソースファイルを変更します。おそらく、次の例と似たようになるかと思います。
New RelicのNREUMオブジェクトの値(init
、info
、loader_config
の値)でオプションオブジェクトを更新します。ブラウザアプリケーションを構築しデプロイして、変更を適用します。これで、コピー/ペーストやAPMインジェクション手法で得られるものと同じ、完全かつ自動のサイトインストルメンテーションを入手できます。
計装をカスタマイズする
BrowserAgent
クラスは、Browserエージェントの利用可能なすべての機能を含むユーティリティクラスです。npmパッケージには、含めたい機能の配列を渡すことができるAgent
クラスも含まれています。これにより、サイトに計装されるものや、New Relicへの報告内容をカスタマイズできます。
次のコードスニペットをご覧ください。この例には、Browserエージェントに対して有効にできる現在の機能がすべて含まれています。ただし、インポートしてfeatures
配列に含める機能を選択することはできます。
JavaScriptツールチェーンのサポート
多数のクライアント側のビルドツールがあり、これらのツールの多くは、Browserエージェントのnpmパッケージを統合およびカスタマイズする上で便利な機能を提供します。たとえば、webpackでは、Browserエージェントのnpmパッケージに変換を適用するように設定することで、ブラウザサポートマトリックスにないブラウザのサポートを提供できるようになります。例については、次のコードスニペットを確認してください。
このwebpack設定では、babelルールのexclude
プロパティが更新され、Browserエージェントのnpmパッケージもbabelによって変換されます。npmパッケージコードの変換に対する同様のサポートは、他の多くのJavaScriptビルドツールでも利用できます。
デモ動画:Reactアプリにカスタマイズ可能なBrowserエージェントを追加
これらのプロセスのチュートリアルを確認するには、Johnathan Potterの以下の動画をご覧ください。この例では、newrelic-browser-agentパッケージをReactアプリに追加します。
Nächste Schritte
Browserエージェントのnpmパッケージは、計装のニーズに合わせたカスタマイズオプションをさらに提供できます。古いブラウザを使用している顧客や、ゲームコンソールのブラウザ、スマートTVアプリケーションなどの固有のユースケースの顧客向けに計装のロックを解除できます。次のリソースを使用して、さらに解説します。
- New Relicコミュニティフォーラムで、ユースケースに関するフィードバックをぜひ共有してください
- エージェント設定の詳細については、パブリックオープンソースのnewrelic-browser-agentリポジトリにアクセスしてください
- ブラウザモニタリングの詳細については、New Relicのドキュメントをご覧ください
まだNew Relicをお使いではありませんか?無料のアカウントにサインアップしてください。アカウントには、毎月100GBの無料データ取込み、1名の無料フルプラットフォームユーザー、および無制限の無料ベーシックユーザーが含まれています。
Die in diesem Blog geäußerten Ansichten sind die des Autors und spiegeln nicht unbedingt die Ansichten von New Relic wider. Alle vom Autor angebotenen Lösungen sind umgebungsspezifisch und nicht Teil der kommerziellen Lösungen oder des Supports von New Relic. Bitte besuchen Sie uns exklusiv im Explorers Hub (discuss.newrelic.com) für Fragen und Unterstützung zu diesem Blogbeitrag. Dieser Blog kann Links zu Inhalten auf Websites Dritter enthalten. Durch die Bereitstellung solcher Links übernimmt, garantiert, genehmigt oder billigt New Relic die auf diesen Websites verfügbaren Informationen, Ansichten oder Produkte nicht.