Help us understand the problem. What is going on with this article?

New Relic Browser: リソース単位の処理時間、JS エラー、Ajax パフォーマンス。有料機能ならここまでできる。

More than 3 years have passed since last update.

Advent Calendar 23日目です。昨日に引き続き、New Relic Browser を紹介します。今日は、有料機能である "セッショントレース"、"AJAX リクエスト"、"JavaScript エラー" を紹介します。

セッショントレース

セッショントレースは、前回のNew Relic Browser : ユーザーのパフォーマンス(RUM)も計測できるよで書いたブラウザトレースの上位機能です。ブラウザトレースでは、特定のリクエストに対する大まかな処理の内訳だけでした。セッショントレースでは、ブラウザの開発者ツールが提供するような各リソースごとの読み込み時間がタイムラインで確認できます。

セッショントレースの詳細画面は以下のような感じです。(動画)

test11.gif

左メニューから "Session traces" を選択します。
セッショントレースの一覧が表示されます。このリストは、指定している時間帯から近い順に並んでいます。直近のトレースから最大20個までリストされるようです。

browser_ss_01.png

そこから、特定のパスをクリックすると、詳細画面に遷移します。

browser_st_01.png

各リソースをクリックするとそのリソースを"読み込み開始時間"、"読み込み終了時間"、"読み込みに掛かった時間"が表示されます。

browser_st_02.png

また、画面右上の処理の種類(Backend, Dom Processing 等)をクリックすると、その処理の最後の処理に下のタイムラインの位置が自動で移動します。(上のスクリーンショット参考)

browser_st_03.png

Ajax リクエスト

アプリ内の Ajax リクエストのパフォーマンスをチェックできます。Ajax リクエストは通常の Page view では表示(データの収集)できないので、ここでチェックします。

左メニューから "AJAX" を選択します。
指定している時間帯に発生した Ajax リクエストの情報を表示します。

browser_ajax_1.png

Ajax リクエストは、"合計処理時間の割合"、"スループット"、"レスポンスタイム"、"平均データ量"、"平均コールバック時間"で並び替えが可能です。

リストから気になるリクエストをクリックすると、そのリクエストだけのパフォーマンスが見れます。

browser_ajax_2.png

また、"By pageview" タブをクリックすると、その Ajax リクエストが使われている全パスとその割合が見れます。これにより、その Ajax がどこで使われているのか簡単に確認できます。

browser_ajax_3.png

また、この機能は、IE 7/IE 8/Chrome for iOS は対象がだそうです。

JavaScript エラー

サイト内で起きた JS のエラーをチェックできます。ここでは、ブラウザ内で発生したエラーの発生状況や個々のエラーの内容、環境、スタックトレースまで見ることができます。これは結構便利だと思います。

左メニューから "JS errors" を選択します。
指定している時間帯に発生した JS エラーの情報を表示します。

browser_jserror_01.png

エラーメッセージとその発生回数?が多い順にリストになります。右の "JavaScript error instances" で時系列で発生状況を確認できます。

リストから任意のエラーをクリックすると、そのエラーにフォーカスしたデータが見れます。

browser_jserror_2.png

また、"Error instance details" をクリックすると、そのエラーが発生した個別の状況のデータがみれます。"1/1" と書いているあるところは、複数回エラーが発生していれば、"1/3"とかになるので、矢印をクリックして、個別のデータをみることができます。

browser_jserror_3.png

利用できないエラー

New Relic では、以下のようにいくつか補足できないものがあります。

  • スクリプトの読み込み中に発生した シンタックスエラー、スクリプトエラー (スタックトレースに積まれないから)
  • インラインの JS、イベントハンドラー内のエラー (ラップできないから)
  • 別ドメインにある外部のスクリプトで発生したエラー
  • スタックトレースを利用できない古いブラウザ

また、New Relic は JSの function をラップして、エラーをキャッチしてエラーとして報告しているので、そもそもエラーとして、スローされないものはここではエラーとみなされないようです。

まとめ

2日に渡り New Relic Browser の機能をざっと紹介してみました。JS エラーや Ajax リクエストはかなりデバッグなんかに便利なんじゃないかと思います。是非、活用してみてください。

ここではかなり説明を端折っている部分がありますので、詳細が気になる方は、是非、公式ドキュメントをご覧ください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away