JavaScript XHRオリジントラッキングを使用すると、 ブラウザでのXMLHttpRequestや Fetchリクエスト時に、 異なる呼び出しスタックトレースごとにサーブレット呼び出しを分割できます。 これにより、プロファイルされたJVM内のアクティビティとブラウザでの操作をより適切に関連付けることができます。 以下では、「XHR」はXMLHttpRequestとFetchの両方の仕組みを指します。
ブラウザプラグイン
この機能を利用するには、Google Chromeを ブラウザとして使用し、 JProfiler origin tracker拡張機能 をインストールする必要があります。
Chrome拡張機能は、ツールバーに JProfiler アイコン付きのボタンを追加し、トラッキングを開始できます。 トラッキングを開始すると、拡張機能はすべてのXHR呼び出しをインターセプトし、ローカルで動作しているJProfilerインスタンスにレポートします。 トラッキングが開始されていない間は、JProfilerはJavaScript XHRオリジントラッキングの設定方法を案内する情報ページを表示します。
トラッキングが有効化されると、JProfiler拡張機能はページのリロードを求めます。 これはインストゥルメンテーションを追加するために必要です。 ページをリロードしない場合、イベント検出が正しく動作しない可能性があります。
トラッキングの状態はドメインごとに永続化されます。 トラッキングが有効な状態でブラウザを再起動し、同じURLにアクセスすると、 ページをリロードすることなく自動的にトラッキングが有効になります。
JavaScript XHRツリー
XHR呼び出しが、JProfilerでアクティブなプロファイリングセッションによってプロファイルされたJVMで処理されている場合、 JavaScript XHRビューにはこれらの呼び出しの累積呼び出しツリーが表示されます。 ビューが空のままの場合は、ビュー上部の「スコープ」を「すべてのXHR呼び出し」に切り替えて、 XHR呼び出しが行われているか確認できます。
JavaScript 呼び出しスタックノードには、 ソースファイルと行番号の情報が含まれます。 XHR呼び出しが行われた関数には、 特別なアイコンと隣接する ハイパーリンクが表示され、XHR呼び出しがプロファイルされたJVMで処理された場合に利用できます。 このハイパーリンクをクリックすると、 呼び出しツリービュー内のJavaScript分割ノードに移動し、 このタイプのリクエストを処理したサーバーサイドの呼び出しツリーを確認できます。
ツリーの最上部には、 ブラウザイベント ノードがあり、イベント名や要素名、イベントの発生元を特定するのに役立つ重要な属性が表示されます。 すべてのリクエストにイベントが関連付けられているとは限りません。
この拡張機能は、いくつかの有名なJavaScriptフレームワークを認識し、
イベントのターゲットノードからイベントリスナーが存在するノードまでの祖先階層をたどり、
表示や呼び出しツリーの分割に適した属性を探します。
フレームワーク固有の属性が見つからない場合、id属性で停止します。
IDがない場合は、a、button、inputなどの「コントロール要素」を探します。
それでも見つからない場合は、イベントリスナーが登録されている要素が表示されます。
場合によっては、自動検出された属性では十分でなく、 別の呼び出しツリーの分割方法を選びたいこともあります。 例えば、一部のフレームワークは自動的にIDを割り当てますが、 すべての要素をアクションの意味的な説明とともにグループ化した方が分かりやすい場合があります。 別の呼び出しツリーの分割を実現するには、HTML属性
data-jprofiler="..."
をターゲット要素、またはターゲットとイベントリスナーの間にある要素に追加してください。 その属性のテキストが分割に使用され、他の属性は無視されます。
呼び出しツリーの分割
呼び出しツリービューでは、XHR呼び出しごとにブラウザイベントと呼び出しスタックの組み合わせごとに
呼び出しツリーが分割されます。
分割ノードにはブラウザイベントに関する情報が表示されます。
setTimeout()のようにイベントが進行中でない場合は、
直近のスタックフレームがインラインで表示されます。
これらのノードの「詳細を表示」ハイパーリンクをクリックすると、 ビュー→ノードの詳細を表示アクションと同じ詳細ダイアログが開きます。 JavaScript分割ノードの場合、詳細ダイアログにはノードのテキストではなく、 ブラウザの呼び出しスタック全体が表示されます。 他のJavaScript分割ノードの呼び出しスタックを調べたい場合は、非モーダルの詳細ダイアログを開いたまま、 それらのノードをクリックしてください。詳細ダイアログの内容は自動的に更新されます。
