Report data and events with the Browser agent API
Report data and events with the Browser agent API

Report data and events with the Browser agent API

“https://docs.newrelic.com/docs/browser/new-relic-browser/browser-agent-apis/report-data-events-browser-agent-api\n【ブラウザーエージェントAPIを利用してデータとイベントをレポート】

New RelicにはエージェントAPIがあり、このAPIを使って追加データやイベントをNew Relic Browserや《New Relic Insights》にレポートできます。例えば、以下のようなことが可能になります。

ページ内で《カスタムイベントを記録する》
《ページの名前を変更し》、New Relic UIにおいて異なった名前で表示されるようにする
《ページ読み込みが完了したと思われる》時間についてデフォルトの時間ではその詳細が十分に分からない場合に時間情報を追加でレポートする
《セッショントレース》でアクションやエラー、イベントの詳細情報を入手する
《さまざまな例外事項》を通知するまたはログに残す
PageViewやPageActionイベントに対し、《カスタマイズした名前や値》を追加する
\n【要件】
ブラウザーエージェントAPIはブラウザーエージェントにより自動的に定義されるnewrelicと呼ばれるオブジェクトに依存します。アプリケーション内のページでこのAPIを使うには、ブラウザーエージェントが必要です。アプリケーションの計測レベル設定はブラウザーエージェントAPI機能の可用性には影響しません。特定のサブスクリプションレベルが必要なコールに対してはサブスクリプションレベル要件に注意が必要です。

APIの機能を最大限利用するには、ブラウザーのバージョンが974またはそれ以降である必要があります。《この説明》に従いバージョンとアップグレードを確認してください。
\n【メソッド】
これらのNew Relic BrowerエージェントAPIコールを追加すると以下のことが可能になります。
セッショントレースで詳細を閲覧できる
Insightsの中でイベントを作成すると、クエリによりアプリケーション内で特定のユーザーアクションの利用率や利用時間を知ることが可能になる
アプリケーションがキャッチしたエラーの詳細をレポートできる

ブラウザーエージェントAPIは以下のメソッドを含みます。

【全て表示】【全て非表示】

【newrelic.addPageAction (string NAME, JSON object ATTEIBUTES)】

バージョンnr-593またはそれ以降

『この機能を利用するには、Insights Pro TrialまたはInsights Pro Annualサブスクリプションが必要です。』

ユーザー定義された名前や属性を使ってPageActionイベントをNew Relic Insightsにレポートします。この機能を使うと、サブスクリプションボタンのクリックやチュートリアルへのアクセスなど、Browser agentにより現在自動的に追跡されていないすべてのイベントを追跡できます。また、この機能はシングルページまたは 別のAJAXに依存したアプリケーションにおけるルート変更にも利用できます。
このAPIコールは《さまざまなデフォルト属性》に加えて『PageAction』と呼ばれるイベントをInsightsに送信し、Insightsからクエリできるようにします。PageActionイベントは1つのブラウザーあたりで10秒ごとにInsightsへ送信され、10秒間の収穫サイクルごとに最大で20個のイベントを上限としています。上限である20個のイベントに達すると、それ以上のイベントは取り込まれません。もっと詳しく知りたい人は《JavaScript Browser APIを介してカスタムイベントを挿入する》、を参照してください。

【パラメーター】

【パラメーター】 【データタイプ】 【説明】
『name』 文字列 アクションの名前またはカテゴリ。Insightsには『actionName』属性としてレポートされる。属性または値に名前を付ける場合に《予約語のNRQL》を使うのは避けてください。

『attribute』   JSONオブジェクト  1つ以上のキーまたは値のペアを持つJSONオブジェクト。例えば、『{key: “value”}』。Insightsにはこのキーは所定の値を持つ独自のPageAction属性としてレポートされる。属性または値に名前を付ける場合に《予約語のNRQL》を使うのは避けてください。

【例】

【全て表示】 【全て非表示】

【リンクのクリック数の記録(javascript)】

この例はユーザーが【Try Me!】リンクを選択した場合のPageActionイベントを記録するコードを示したものです。イベントは『clickedTryMe』の『actionName』を使って記録されます。

Try Me!

次のNRQLクエリを使って【Try Me!】ボタンのクリック数をクエリできます

『SELECT count(*) FROM PageAction WHERE actionName=’clickedTryMe’ SINCE 1 hour ago』

【リンクのクリック数を記録する(jQuery)】
この例はユーザーが『copy-text』クラスを持つ要素をクリックした場合にPageActionイベントを送信するコードを示したものです。『actionName』は『copy-text-button』となり、その値は『Result』と呼ばれる別の属性としてレポートされます。Resultは結果を処理する『success』や『error』という名前の付いたメソッドに対応します。

『$(‘.copy-text’).click(function (){
var clipboard = new Clipboard (‘.copy-text’);
clipboard.on(‘success’, function(event) {
// 作業を行う
// Insightsへデータをリポート
if (typeof newrelic == ‘object’) {
newrelic.addPageAction(‘copy-text-button’, {result: ‘success’});
}
});
clipboard.on(‘error’, function(event) {
// 作業をする
// Insightsへデータをリポート
if (typeof newrelic == ‘object’) {
newrelic.addPageAction(‘copy-text-button’, {result: ‘error’});
}
});
});』

次に、Insightsで過去30日間におけるsuccessとerrorをそれぞれ発生させたボタンクリック数を確認するために円グラフを作成します。

『SELECT count(*) AS ‘Clicks’ FROM PageAction WHERE actionName = ‘copy-text-button’ FACET result SINCE 30 days ago』

または過去30日でどのページのボタンがもっともクリックされたかを確認するためのクエリを作成することも可能です。

『SELECT count(*) AS ‘Clicks’ FROM PageAction WHERE actionName = ‘copy-text-button’ FACET currentUrl SINCE 30 days ago』

【フォーム入力のキャプチャ】

この例は【Signup】と呼ばれるフォームからのユーザーが入力した内容(Eメールアドレス)をキャプチャするコードを示したものです。このイベントは『userSignup』の『actionName』を使って記録されます。



次のNRQLクエリを使って集めたEメールを確認できます。

『SELECT uniques(email) FROM PageAction WHERE actionName=’userSignup’ SINCE 1 hour ago』

【newrelic.addToTrace(JavaScript object OBJECT】

バージョンnr-593またはそれ以降

《ブラウザーセッショントレース》が進行中の場合に以下に記載のユーザーが定義した名前や開始時間、その他の任意のフィールドを持つオブジェクトを追加します。トレースがまだ始まって【いない】場合は、コールしてもトレースは実行されません。

セッショントレースのカスタムイベントを閲覧すると、トレース内でその他のユーザーアクションやエラー、デフォルトイベントのコンテキストが分かります。このイベントは《ブラウザーセッショントレースの詳細》に表示されます。

『同一のイベントオブジェクトをPageActionとしてNew Relic Insightsに送信する場合は、『type』属性を省略してください。type属性を含めると、イベントタイプに上書きされ、PageActionイベントが正しく送信されません。代わりにイベント情報には『name』属性を使用してください。』

【パラメーター】
【パラメーター】  【データタイプ】 【説明】
『obj』 JavaScriptオブジェクト 必要な名前または値のペア 『name』、 『start』
任意の名前または値のペア 『end』、『origin』、『type』
もっと詳しく知りたい人は《オブジェクトの例》を参照してください。

【例】

『var obj = {
// 必須
name: ‘Event Name’,
start: 1417044274239, // エポック後のミリ秒時間

// 任意
end: 1417044274252,
// エポック後のミリ秒時間。開始すると継続時間が0のトレースオブジェクトが発生する時間のデフォルト値
origin: ‘Origin of event’,
//空の文字列のデフォルト値
type: ‘What type of event was this’
// 空の文字列のデフォルト値
}』

【newrelic.finished(time TIME)】

バージョンnr-593またはそれ以降

このコールは2つのことをします。

ブラウザーセッションが進行中の場合は『finished』イベントを進行中の《ブラウザーセッショントレース》に追加する。

finishedと名前の付いたPageActionイベントをNew Relic Insightsに送信する。(Insights ProまたはInsights Pro Annualサブスクリプションが必要です。)

1回のページ読み込みにつき1度この機能をコールでき、その読み込みで記録されるその他のページ読み込みタイミングメトリクスには影響しません。このAPIコールの目的はページ読み込みイベントの前または後に、カスタマイズされた基準に従ってページ(例えば、非同期で読み込まれるコンポーネントをたくさん持つページなど)の読み込みが完了する時点を追加的に記録することです。

【パラメーター】
【パラメーター】  【データタイプ】  【説明】
『time』  『整数』(UNIXエポック後のミリ秒とされる) 任意。コールの現在時間のデフォルト値 独自の基準に従ってページの読み込みが「完了」する時間を記録する
\n【newrelic.noticeError(error object ERROR)】

『NREUM.noticeError()』にはバージョンnr-411またはそれ以降
『Newrelic.noticeError()』にはバージョンnr-499またはそれ以降

『アプリケーションが以下の要件を満たすことを確認します。
ブラウザーモニタリングが《有効》になっている。
JavaScriptエラーモニタリングが《有効》になっている。』

このコールを利用してアプリが処理するエラーやその他のさまざまなエラーを通知または記録します。エラーをキャッチし、処理する場合で、アプリケーションの動作を阻害することなくエラーを特定したいときにこのコールが役立ちます。

また、このAPIを使ってエラーを通知できます。このAPIを使わなかった場合は、エラーの詳細はレポートされません。例えば、スクリプトの初期化またはインラインイベントハンドラーの処理中に起こるエラーなどが一例です。このエラーはNew Relicが通常検知するその他のエラーとともに《【JavaScriptエラー】ページ》に表示されます。

【全て表示】 【全て非表示】

【パラメーター】
【パラメーター】  【データタイプ】  【説明】
『error』  エラーオブジェクト  《【JavaScriptエラー】ページ》上でデータを解析する場合に利用できる意味のあるエラーメッセージを提供する。
以下にコードを示します。

var err = new Error(‘Report caught error to New Relic’);

newrelic.noticeError(err);

【例】

【全て表示】 【全て非表示】

【重要度の低いエラーをキャプチャする】

この例は、エラーをキャッチし、そのエラーによりアプリケーションの動作を阻害したくない場合に、エラーをレポートするための、newrelic.noticeError APIの使い方を示したものです。エラーの重要度が低く、ユーザー・エクスペリエンスに対する影響は小さいが、それでも開発者にエラーをレポートしておきたい場合に役立ちます。
このコード例は、JSONに問題がある場合、安全を期してデフォルトの『foo』オブジェクトを使用します。

『var foo;

try {
foo = JSON.parse(‘{ “”bar””‘);
} catch (err) {
//キャッチしたエラーを New Relicにレポート
newrelic.noticeError(err);

foo = {bar: ‘default value’};
}

alert(foo.bar);』

【任意のエラー例を使ったコールバック】

この例は、Node.jsやBrowserify開発で一般的に利用されているエラーおよびレスポンスのパターンを使ってエラーをNew Relicにレポートする方法を示しています。『alert(body);』を独自の関連したメッセージと置換できます。

『var xhr = require(‘xhr’);

xhr(‘http://localhost:8080’, function (err, resp, body) {
//(間違って)newrelic.noticeError(err)を返した場合に、返されていないエラーをNew Relicにレポート
if (err) return newrelic.noticeError(err);
//レスポンスアラート(ボディ)の処理に成功
});』

【PromiseをベースにしたAPIの例】

Promisesは非同期のインタラクションを1つのパターンで処理し、これによって非同期エラーの処理を容易にしています。しかし、Promisesによりエラーが完全に無視されやすくもなり、アプリケーションに障害があっても開発者に分かりません。この例は非同期エラーが見落とされることがないように非同期エラーをNew Relicにレポートするコードを示しています。

『var rest = require(‘rest’);

rest(‘/’).then(function (res) {
//レスポンスのアラートの処理に成功
alert(res.entity);
}, function (err) {
//返されていないエラーをNew Relic
newrelic.noticeError(err)にレポート
});』

【ブラウザーの制約(SafariおよびInternet Explorerのみ)】

エラーが返されない場合、スタックトレースは生成されません。すべてのブラウザーでnewrelic.noticeError APIにスタックトレースをレポートさせたいなら、エラーをAPIに渡す前に手動でエラーを返させキャッチする必要があります。

『try {
throw errorObject
} catch (err) {
newrelic.noticeError(err)
}』

【newrelic.setCustomAttribute(string NAME、string VALUE)】

バージョンnr-593またはそれ以降

ページ上で次に起こるイベントに対してユーザー定義した属性名や値を追加します。属性をPageViewイベントに入れるために、ウィンドウ読み込みイベントが作動する(データが送信されるとき)前にこれをコールします。属性が設定されると、ページがリロードされるまたは属性が手動で設定解除されるまで属性は全てのPageActionイベントにより記録されます(PageActionイベントを利用するにはInsights Pro TrialまたはInsights Pro Annualサブスクリプションが必要です)。

互換性のあるエージェントバージョンで《SPAモニタリング》を利用している場合、このコールで設定した属性もBrowserinteractionイベントに入ります。しかし、この《SPA API》を使って設定した属性はこれらの属性よりも優先します。

【パラメーター】
【パラメーター】 【データタイプ】  【説明】
『name』 文字列 属性の名前。PageViewイベントの列に表示される。nameを利用している場合、PageActionイベントの列にも表示される。

属性または値に名前を付ける場合、《NRQLの予約語》を使用するのは避けてください。
『value』  文字列 属性の値。PageViewイベントの名前を付けた属性の列に値として表示される。valueを利用している場合、PageActionイベントの列として表示される。カスタム属性値は複雑なオブジェクトになることはなく、文字列や数列などシンプルな形式である。

属性または値に名前を付ける場合、《NRQLの予約語》を使用するのは避けてください。

【例】

この例はjavascriptおよびjQueryを使ってDrupalが生成したページ上で次のHTML要素の値を取得し、その値をカスタム属性としてInsightsにレポートするコードを示したものです。PageViewおよびPageActionイベントをクエリする場合に利用できます。

• 『
• 『

Using NRQL


『var node_id = ”;
node_id= jQuery(“”link[rel=’shortlink’]””).attr(“”href””);
var node_title = ”;
node_title= jQuery(‘h1’).text();

if (typeof newrelic == ‘object’) {
newrelic.setCustomAttribute(‘nodeId’, node_id);
newrelic.setCustomAttribute(‘title’, node_title);
}』

【newrelic.setErrorHandler(error object ERROR)】

バージョンnr-974またはそれ以降

『この機能の利用はサブスクリプションレベルに依存します。』

『newrelic.setErrorHandler』をコールすると、公知のエラーを選択的に無視できます。コールするには1つのエラーハンドラー関数が必要です。この関数はエージェントがエラーをキャプチャするごとにコールされます。ハンドラーが真を返すと、エラーはNew Relicに記録されません。そうでない場合は、通常通り処理されます。

【全て表示】 【全て非表示】

【パラメーター】
【パラメーター】  【データタイプ】  【説明】
『error』  エラーオブジェクト 通常はエラーオブジェクトであるが、その他のデータタイプになる可能性もある。

【例】

この例はエラーを無視するためにnewrelic.setErrorHandlerのコールを利用するコードを示したものです。

『newrelic.setErrorHandler(function (err) {
if (shouldIgnoreError(err)) {
return true
} else {
return false
}
})』

【newrelic.setPageViewName (string NAME, string HOST)】

バージョンnr-593またはそれ以降

URL構造からグループ分けがよく分からない場合またはNew Relicがルート情報の保存されているURLの箇所をキャプチャできない場合、カスタマイズしたページ名を利用すればページビューをより効率的にグループ化できます。ページビューに付けた名前はNew Relic BrowserやNew Relic Insightsで利用できます。

ページURLの代わりにカスタマイズした《ページビュー名》を使用するには、名前のフォーマットをスラッシュで区切られた文字列に変更します。この名前が正しく表示されるようにするためにはloadイベントが作動する前にこのコールをしてください。

【パラメーター】
【パラメーター】  【データタイプ】  【説明】
『name』 文字列 New Relic BrowserまたはInsightsで閲覧する場合に利用したいページ名

『host』  文字列 任意 デフォルトでは『http://custom.transaction』

これらのカスタムトランザクションをさらにグループ化するには、hostをカスタマイズします。そうしない場合は、ページビューにデフォルトドメインである『custom.transaction』が割り当てられます。名前のセグメントは、すでに表示されている場合を除き、《ホワイトリスト設定》のURLのホワイトリストセグメントにはっきりと分かるように追加される必要があります。

通常、WebサイトのドメインURLにhostを設定したいと考えます。
\n【SPA API】

『この機能の利用は《サブスクリプションレベル》に依存します。SPAモニタリングは【New Relic Browser Pro】でのみ利用できます。』

Browserの《シングルページアプリケーション(SPA)モニタリング》を利用している場合、SPA APIを使って特定のブラウザーインタラクションのモニタリングをカスタマイズできます。New Relicが自動的に記録しないインタラクションを監視するのに役立ちます。その理由は、結果としてルート変更をしないからです(例えば、動的に更新されるウィジェットが一例です)。また、このAPIを使うと、監視するほど重要ではないと思われるインタラクションのデフォルトのモニタリグ機能をオフにできます。New Relic SPAモニタリングがどうように機能するかをもっと詳しく知りたい人は、《SPAデータコレクションを理解する》を見てください。

【全て表示】 【全て非表示】

【newrelic.interaction()】

『newrelic.interaction()』は利用中のインタラクションと結びついた新規のAPIオブジェクトを返します。New Relicがインタラクションを監視していない時にnewrelic.interactionがコールされると、新規のインタラクションが作成されます。同一のインタラクションの中で再度コールされると、利用中のインタラクションを参照する新規のオブジェクトが作成されます。

SPA APIメソッドは『newrelic.interaction()』で利用できます。また、このメソッドは変数に割り当てたハンドルでも利用できます。以下は例です。

『myInteraction = newrelic.interaction()

myInteraction.save()』

名前を付けたハンドルを保存し、インタラクションの外部から利用できますが、インタラクションが終了するとメソッドは機能しなくなります。

【全て表示】  【全て非表示】

【処理結果】

このメソッドは特定の『BrowserInteraction』に結びついたAPIオブジェクトを返します。同一の『BrowserInteraction』に対してこのメソッドがコールされるたびに新規のオブジェクトが作成されますが、その場合でも同一のインタラクションを参照します。

【newrelic.interaction().setName(string NAME, string TRIGGER)】

エージェントバージョン963またはそれ以降

このメソッドはブラウザーインタラクションの名前やトリガーの設定に使用されます。この名前は『BrowserInteraction』イベントの中で『browserInteractionName』属性として公開され、UIにおけるグループ化に利用されます。

デフォルトでは、『browserInteractionName』は紐づいたURLやルートにちなんで名付けられます。ルート変更やURL変更ではないインタラクションを記録したいと考えている場合は、『setName』を使用してください。

《setCurrentRouteName API》は利用中のルートに名前を付けます。『setName』および『setCurrentRouteName』 の両方を使用する場合、インタラクションの名前としては『setName』が優先します。しかし、『previousRouteName』や『targetRouteName』属性は『setCurentRouteName』に渡された値を利用して設定されます。

これらのメソッドを組み合わせて利用すると、UIにおいてフィルタリングやグループ化をする場合にさまざまな興味深い選択肢が取れます。一例として、『LikeButtonClick』など特定のタイプのインタラクションまでフィルタリングし、『targetRouteName』によりグループ化し、どのルートがもっとも『LikeButtonClick』インタラクション数が多いかを確認できます。

【処理結果】

このメソッドは『newrelic.interaction()』により作成された同一のAPIオブジェクトを返します。

【パラメーター】
【パラメーター】 【データタイプ】  【説明】
NAME  文字列 ヌルでない場合、このパラメーターは『BrowserInteraction』イベントの中の『browserInteractionName』属性を設定します。名前が設定されていない場合、名前は『targetGroupUrl』属性を使って設定されます。

TRIGGER  文字列 ヌルでない場合、『BrowserInteraction』イベント上でtrigger属性を設定します。

【例】

インタラクションへのカスタム名の追加の例

『document.getElementById(‘subscribe’).addEventListener(‘submit’, () => {
newrelic.interaction().setName(‘createSubscription’)
createSubscription()
})』

【newrelic.setCurrentRouteName(string ROUTE NAME)】

バージョンnr-998またはそれ以降

『このメソッドは現在、SPA 『BrowserInteraction』イベントにのみ適用されています。』

このメソッドは利用中のルートに名前を付けます。このメソッドは以下のような場合、役立ちます。ルートにデフォルトよりも正確な名前を付ける場合
デフォルトでは別のルートを使ってグループ化されうるルートを監視する場合

『setCurrentRouteName』と『setName』は別のものです。後者はルートではなくブラウザーインタラクションに名前を付けるものです。これらがどのように組み合わせて利用されるかについては、《setName APIエントリー》を参照してください。

このAPIを使うと、以前のルートやターゲットルートを追跡する2つの新規のカスタム属性を作成できます。ルートはそれぞれ、『previousRouteName』と『targetRouteName』が対応します。このAPIを利用する場合、『browserInteractionName』属性は『targetRouteName』の値を取ります。ブラウザーインタラクション名を設定するために『setName』が利用される場合、setNameが優先します。

このAPIは『BrowserInteraction』イベントの名前属性を決定するのに利用されるため、『BrowserInteraction』イベントが必ず正しい属性になるように、【ルート変更があるたびに毎回呼び出される必要があります】。この方法を取らずにデフォルトの命名方法に戻す場合は『newrelic.setCurrentRouteName(ヌル)』をコールします。

『setCurrentRouteName』に渡されるルート名はどのような文字列でも問題ありませんが、特定のリソースよりもルートパターンを表すものが推奨されます。例えば、『/users/123』よりも『/users/;id』のほうが好ましいです。

【全て表示】  【全て非表示】

【パラメーター】
【パラメーター】  【データタイプ】  【説明】
『name』  文字列  ページの現在のルート名

【例】

以下のコードは利用中のルート名の設定の例です。

『router.onChange(function (route) {
newrelic.setCurrentRouteName(route.name)
})
********』

【newrelic.interaction().save()】

エージェントバージョン963またはそれ以降

このメソッドはインタラクションが終了すると、インタラクションが必ず保存されるようにするものです。初めてページを読み込む場合またはURLもしくはハッシュが変更される場合、インタラクションは通常、保存されNew Relicに送信されるだけです。このビヘイビアーを上書きし、インタラクションを確実に記録するにはこのメソッドをコールする必要があります。

【全て表示】 【全て非表示】

【処理結果】

このメソッドは『BrowserInteraction』イベントと紐づいた『newrelic.interaction()』により作成された同一のAPIオブジェクトを返します。

【例】

以下はカスタムインタラクションを保存するコード例です。

『window.addEventListener(‘scroll’, () => {
if (atBottomOfPage()) {
newrelic.interaction() // このインタラクションの監視を開始
.setName(‘loadNextPage’) //インタラクションの名前を設定
.save(); // 終了する場合にこのインタラクションをBrowserInteractionイベントとして必ず保存する
loadNextPage() //次のページのロードを開始
}
})
********』

【newrelic.interaction().ignore()】

エージェントバージョン963またはそれ以降

このメソッドを利用すると、インタラクションが無視されます。つまり、データが保存されたり、New Relicに送信されないことを意味します。また、このメソッドは『save』に対する過去のまたは未来のコールを無視します。

【全て表示】 【全て非表示】

【処理結果】

このメソッドは『newrelic.interaction()』が作成する同一のAPIオブジェクト
を返します。

【例】

インタラクションを無視するコード例

『router.addRoute(‘/uninteresting-route’, () => {
newrelic.interaction() //現在のインタラクションのハンドルを取得
.ignore() // このインタラクションが確実に保存されないようにするためこのインタラクションを無視
renderUninterestingRoute() // ルートを変更する
})
********』

【newrelic.interaction().end()】

エージェントバージョン963またはそれ以降

このメソッドは現在進行中のインタラクションを終了させます。その後に起こるコールバックやリクエストはインタラクションに含まれません。

【全て表示】 【全て非表示】

【処理結果】

このメソッドは『newrelic.interaction()』が作成する同一のAPIオブジェクトを返します。

【例】

インタラクションを早期に終了するコードの例

『router.addRoute(‘/profile’, () => {
startSlowBackgroundAjax() //インタラクションの終了後に継続する作業を開始する
renderProfileComponents().then(() => { // インタラクションの一部となっている作業をする
newrelic.interaction().end() //ページの持つ重要なコンポーネントがレンダリングを完了したらインタラクションを終了させる
})
})
********』

【newrelic.interaction().setAttribute(string KEY, any VALUE)】

エージェントバージョン963またはそれ以降

このメソッドはインタラクションにカスタム属性を追加します。インタラクションが保存された場合、この属性は結果として生じる『BrowserInteraction』イベント上で新規のプロパティとして表示されます。『newrelic.setCustomAttribute(…)』を使って追加される属性とは違い、インタラクションに追加される属性は現在利用中のインタラクションにのみ適用され、『PageAction』イベントには追加されません。

このメソッドを利用して設定されたカスタム属性は『newrelic.setCustomAttribute(…)』をコールすることにより設定されるカスタム属性およびサーバーサイドエージェントにより設定されるカスタム属性とマージされます。SPA APIを使って設定された『BrowserInteraction』属性の優先度はもっとも高く、別の2つの方法で設定される属性よりも優先します。『newrelic.setCustomAttribute(…)』により設定される属性はその次に優先し、サーバーサイドのカスタム属性よりも優先されます。サーバーサイドを設定するカスタム属性の優先度はもっとも低いです。

【全て表示】【全て非表示】

【処理結果】

このメソッドは『newrelic.interaction()』が作成する同一のAPIオブジェクトを返します。

【パラメーター】
【パラメーター】  【データタイプ】 【説明】
KEY 文字列  このパラメーターは『BrowserInteraction』イベント上で属性名として利用されます。
VALUE Any このパラメーターは『BrowserInteraction』イベント上で属性の値として利用されます。文字列や数字、ブール値、またはオブジェクトになる可能性があります。オブジェクトである場合は、JSON文字列としてシリアル化されます。

【例】

カスタム属性を設定するコード例

『router.addRoute(‘/profile’, () => {
const user = getCurrentUser()
newrelic.interaction()
.setAttribute(‘username’, user.username)
.setAttribute(‘userId’, user.id)
renderProfile(user)
})
********』
\n【newrelic.interaction().getContext(function CALLBACK)】

エージェントバージョン963またはそれ以降

このメソッドは利用中のインタラクションと紐づいたコンテキストオブジェクトを使って非同期に呼び出されるコールバックを利用します。このオブジェクトは利用中のインタラクションと紐づいた値を保存するために利用されます。また、このオブジェクトはインタラクション全体で共有され、複数の場所で利用される可能性がありますが、この仕組みによりインタラクション全体のデータを集計できます。

【全て表示】 【全て非表示】

【処理結果】

このメソッドは『newrelic.interaction()』が作成する同一のAPIオブジェクトを返します。

【パラメーター】
【パラメーター】  【データタイプ】 【説明】
CALLBACK  関数  インタラクションコンテキストオブジェクトだけを引数として受け取る関数。

【例】

インタラクションコンテキストを利用してデータを伝達するコード例

『router.addRoute(‘/products/{productId}’, params => {
newrelic.interaction().getContext(ctx => ctx.productId = params.productId)
renderProduct(params.productId)
updateHash()
})

window.addEventListener(‘hashchange’, (ev) => {
const interaction = newrelic.interaction()
interaction.getContext(ctx => {
if (ctx.productId) {
interaction.setAttribute(‘productId’, ctx.productId)
}
})
})
********』

【newrelic.interaction().onEnd(function CALLBACK)】

エージェントバージョン963またはそれ以降

このメソッドは『getContext』メソッドと機能が似ています。インタラクションが終了すると呼び出されるコールバックを利用します。このコールバックには『getContext』に与えられるコールバックに渡されるのと同一のオブジェクトが渡されます。このコールバックを利用すると、関数の最後の部分にあるイベントを変更できます。例えば、イベントにカスタム属性を追加できます。

インタラクションを修正するためのメソッド(『setName』や『save』、『ignore』、『setAttribute』)を呼び出す場合もあるでしょう。しかし、非同期のデメリットがあるメソッド(『getContext』や『onEnd』、『createTracer』)を利用しても問題にはなりません。

【全て表示】 【全て非表示】

【処理結果】

このメソッドは『newrelic.interaction()』が作成する同一のAPIオブジェクトを返します。

【パラメーター】
【パラメーター】  【データタイプ】 【説明】
CALLBACK  関数  インタラクションコンテキストオブジェクトだけを引数として受け取る関数。

【例】

インタラクションの末尾に属性を設定する例

『// router.js
router.addRoute(‘/dashboard’, () => {
const interaction = newrelic.interaction().onEnd(ctx => {
interaction.setAttribute(
‘averageChartLoadTime’,
ctx.totalChartLoadTime / ctx.chartLoadCount
)
})
getCharts().forEach(loadChart)
})

// chart-loader.js
function loadChart (chart) {
const start = Date.now()
chart.load().then(() => {
const loadTime = Date.now() – start
interaction.getContext(ctx => {
ctx.totalChartLoadTime = (ctx.totalChartLoadTime || 0) + loadTime
ctx.chartLoadCount += (ctx.chartLoadCount || 0) + 1
})
}
}
********』

【newrelic.interaaction().createTracer(string NAME, function CALLBACK)】

エージェントバージョン963またはそれ以降

このメソッドはインタラクションのサブコンポーネント別に時間を測るものです。各々のサブコンポーネはコールバックが実行されるまでの待ち時間とコールバックが呼び出された場合のコールバックのJS実行時間の両方を測定します。また、このメソッドは計測されていない非同期メソッドにより生まれる非同期のギャップを埋め合わせるためにも利用されます。

利用中のインタラクションが保存されると、《BrowserTiming》 Insightsイベントが作成され、タイミングの情報が詳細タブに表示されます。

このメソッドはラップされたコールバックメソッドを返しますが、そうするにはコードから呼び出す必要があります。返されたラップされたコールバックが呼び出されると、3つの作業をします。

1. カスタムトレーサーの非同期部の終了時間の部分を記録する。
2. 同一の引数とコンテキストを利用してcreateTracerに渡された元のコールバックを実行する。
3. 元のコールバックの実行時間を測定する。

『createTracer』を実行する『BrowserInteraction』は『BrowserTiming』イベントを作成します。コールバック中に新規のXHRまたはカスタムトレースが作成された場合はインタラクションの一部に入れられます。インタラクションはすべてのトレースが完了するまで完了したとはみなされません。トレーサーはこのようにしてエージェントがデフォルトでは扱っていない非同期関数をラップできます。名前が付けられていない場合、インタラクションツリーにノードは追加されず、コールバックの時間は親ノードに属します。

【全て表示】  【全て非表示】

【処理結果】

このメソッドは非同期時間を終了させ、『createTracer』に渡されたコールバックをコール(および時間測定)します。

【パラメーター】
【パラメーター】  【データタイプ】 【説明】
NAME 文字列 このパラメーターはトレーサーの名前として利用される。
CALLBACK 関数 非同期作業部の末尾で同期作業を実行する部分を含むコールバック。このコールバックは『newrelic.interaction().createTracer』をコールすることで返されるラッパー関数をコールして実行できる。

【例】 【同期されたコードをトレースする】

特定のJavaScript関数のコールにかかる時間がどの程度か単純に測定したいだけの場合、『createTracer』に関数をコールバックとして渡せば返されたラッパーコールバックを即座に呼び出せます。

『newrelic
.interaction()
.createTracer(‘customSegment’, function myCallback () {
// … do your work …
})()』

このシナリオでは、結果として生じるカスタムトレーサーの非同期待ち時間はごくわずかとなり、また、同期待ち時間は『myCallback』の実行時間に等しくなります。

【例】 【インストルメント化されていない非同期APIを追跡する】

デフォルトでは、New Relic agentはもっとも一般的な非同期関数(『setTimeout』など)をたくさんラップしています。しかし、通常の使い方がされている関数もあり(例えば、『requestAnimationFrame』)、ケースによってはそうなっている原因が簡単に特定できない場合もあります(例えば、カスタムRPCを『websockets』へ実装する場合)。このような場合、これらのインストルメント化されていない関数に対するコールバックがインタラクションの一部とみなされていないことを確認するために『createTracer』を利用します。

コールバックを受け取り、未来のどこかでこのコールバックを非同期に実行する関数、『doAsyncWork』を利用するとします。そして、『doAsyncWork』を呼び出し、コールバックが実行されるまでの時間(非同期待ち時間)とコールバックを実行するために必要な時間(同期コールバック時間)の両方の時間を測りたいと考えます。

New Relic Browser agentが初めからラップしている非同期API(例えば、『setTimeout』や『setImmediate』、『Promise』、『fetch』、『XMLHttpRequest』)に基づいたすべての非同期スケジューリングシステムに対して『createTracer』を使用する必要がないことに注意してください。これらのAPIが作成している非同期バウンダリーはNew Relic Browser agentが自動的に補完します。

以下のコードを使えば、createTracerを利用して目的を達成できます。

『var wrappedCallback = newrelic
.interaction()
.createTracer(‘customSegment’, doTheWork)

doAsyncWork(wrappedCallback)

function doTheWork() {
// … do your work …
}』

以下の図はイベントのタイムラインを示したものです。

《トレーサータイミングの概要》
\n【関連情報】

追加のドキュメンテーションリソースは次のとおりです。

《JavaScript Browser APIを介してカスタムイベントを挿入する》(New Relic Insightsでブラウザーからカスタムイベントを記録するための詳細なガイド)

《URLホワイトリスト》(グループ化ブラウザーメトリクス)

New Relicの《オンラインテクニカルコミュニティ》でブラウザーモニタリングについて議論しましょう!トラブルシューティングや質問をしたり、《JavaScriptエラーレポート》や《AJAXタイミング》の詳細を話し合うことができます。

さらにヘルプが必要な場合は《support.newrelic.com》のサポートを受けてください。
\n\n\n\n\n\n\n\n\n\n”