Browserエージェントのカスタマイズ

顧客に提供する際に、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名の無料フルプラットフォームユーザー、および無制限の無料ベーシックユーザーが含まれています。

By Patrick Housley, 上級ソフトウェアエンジニア

Patrick HousleyはNew Relicの上級ソフトウェアエンジニアであり、ウェブ開発とソフトウェアエンジニアリングの業界で8年の経験があります。Patrickは現在、ブラウザ内で実際のユーザーを監視し、顧客によるウェブアプリケーションの監視支援に注力しています。

By 松川晋士, シニアテクニカルサポートエンジニア

New Relic株式会社　シニアテクニカルサポートエンジニア。大手電機メーカーでソフトウェアエンジニアとして、携帯電話の開発に従事。フィーチャーフォンに始まり、Android搭載のスマートフォンの開発に携わる。その後、創業して間もないベンチャー企業で新規のWebサービス及びモバイルSDKの開発から運用、サポートを経て現職。

本ブログに掲載されている見解は著者に所属するものであり、必ずしも New Relic 株式会社の公式見解であるわけではありません。また、本ブログには、外部サイトにアクセスするリンクが含まれる場合があります。それらリンク先の内容について、New Relic がいかなる保証も提供することはありません。

750+ インテグレーションを導入し、スタック監視を無料で開始しましょう

詳細を見る詳細を見る

この記事で

New Relic Browserエージェントを使用した計装のカスタマイズ

npmパッケージを使用する方法について

ブラウザアプリを作成し、設定値を取得

npmパッケージを使用した、計装のセットアップ

計装をカスタマイズする

JavaScriptツールチェーンのサポート

デモ動画：Reactアプリにカスタマイズ可能なBrowserエージェントを追加

次のステップ

New Relic Browserエージェントを使用した計装のカスタマイズ

npmパッケージを使用する方法について

ブラウザアプリを作成し、設定値を取得

npmパッケージを使用した、計装のセットアップ

計装をカスタマイズする

JavaScriptツールチェーンのサポート

デモ動画：Reactアプリにカスタマイズ可能なBrowserエージェントを追加

次のステップ

関連記事