New Relic Browser : ユーザーのパフォーマンス(RUM)も計測できるよ

  • 10
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

Advent Calendar 22日目です。今日は、久々に別の製品を紹介します。

RUM (リアル・ユーザー・モニタリング)を提供する New Relic Browser です。

すごい簡単にいうと、Google Analytics 的なツールです。専用の JS をページに埋め込み、それがデータを収集し、New Relic へ送信します。以前紹介した、New Relic Synthetics と対になるような製品です。

以下は、概要ページのイメージ動画です。なんとなくどういうことができるのかイメージいただけるかと思います。

overview.gif

また、New Relic Browser も無料と有料機能があります(違いは以下で説明)。2週間無料で有料機能が利用できますので、是非試してみてください。

Pro Trial の試し方

有料機能を試すには、New Relic にログインして、トップメニューから、"BROWSER"を選択します。画面下の方に、"start Pro trial" みたいなボタンがありますので、それを押すと、その時から2週間無料で Pro trial プランになります。

機能紹介

New Relic Browser では、単なるページロード時のパフォーマンスだけでなくページのライフサイクル全体(ロード時およびユーザーイベント時)、セッション、AJAX リクエスト、JavaScript のエラーなどブラウザに関する総合的なデータを収集します。

ページ読み込み時の以下の情報を収集します。
- ブラウザにおける処理時間
- バックエンド(ネットワーク + サーバー)の処理時間
- 地理情報
- ブラウザの種類とバージョン、OS

無料と有料の違い

データ保持期間
- Lite (無料) : 1日
- Pro (有料): 90日

Lite (無料)プランでは以下の機能が使えます。

  • Browser Overview: 概要ページ。以下の情報が見える。
    • ページロードタイミング
    • ブラウザとサーバーとの Apdex スコアの比較
    • ブラウザ種別ごとのスループット
    • ページビューの詳細情報
  • Page views: ページの詳細情報
  • Geography:地域別のパフォーマンス
  • Browsers: ブラウザの種別、プラットフォーム別のパフォーマンス
  • Browser traces: 処理遅いトランザクションの分析 (Session Trace の下位機能)

Pro (有料)では、以下の機能が利用できます。

  • Overview ページの概要チャートで上記の Lite プランの情報に加え、以下の内容が見れる
    • ページ読み込みとユーザーイベントの直近のセッショントレース
    • JavaScript のエラー率
    • Ajax レスポンスタイム
  • Session Trace: セッショントレース (無料の Browser traces の上位機能)
  • Ajax Call: Ajax コール
  • JavaScript Erros : JavaScript のエラー

価格表のページの機能比較表や、ドキュメントの機能説明を見ると、もっと詳しく載っています。

導入方法

APM を使っていれば、デフォルトで有効(HTMLに専用のJSが埋め込まれる)になっています。なので、特にやることはありません。使いたくない人は、設定ファイルを変えれば簡単に無効にできます。

結果表示

上でも行ったように APM を入れていれば New Relic Browser 用のデータも自動で収集します。Pro を契約していなくても、New Relic Browser にアクセスすれば最低限のデータはチェックできます。

今回は、無料で利用できる機能を説明したいと思います。

概要ページ : Overview

Browser_01.png

メインとなる Overview ページは上のようになります。下半分は有料機能欄なので、無料プランユーザーは見ません。

基本的には、APM の Overview ページと同じような構成となっています。メインの時系列グラフや Apdex スコアはブラウザとアプリサーバーの両方とも表示されています。これは、APM と同じですね。"APP SERVER"をクリックすると、APM と互いに行き来ができます。フロントエンドのパフォーマンスは、New Relic Browserで、バックエンドの処理は APM でと関連した処理でフロントからバックまで一貫してパフォーマンスをチェックできるところが New Relic の強みかなと思います。

有料欄では、セッショントレース、JSのエラー率、Apdex のレスポンスタイムが見れます。

ページビュー : Page views

画面右のメニューから、"Page views" を選択します。

Browser_02.png

指定時間帯のページビューリストが見れます。APM におけるトランザクション一覧みたいなものです。
ソート順として、合計読み込み時間の割合の多い順、平均読み込み時間の多い順、スループットの多い順が選択できます。

リストの特定のページビューをクリックすると、そのページビューだけのパフォーマンスデータが見れます。

browser_free_4.png

上は無料版のスクリーンショットとなります。ブラウザトレースとなっている箇所が有料版では、セッショントレースに変わります。

ブラウザトレースは、指定時間帯にアクセスのあったリクエストのうち、New Relic が遅いとみなした特定のリクエストを指します。ここでは1つしかないので、それをクリックします。

上の"遅い"の定義は、ドキュメントのBrowser tracesに書いてあります。 気になる方はご覧ください。

browser_free_5.png

ここでは、特定のリクエストにおけるパフォーマンスをみることができます。

ブラウザ別パフォーマンス : Browsers

画面右のメニューから、"Browsers" を選択します。

browser_browser.png

ブラウザ別に各種情報が見れます。並び替えでは、"スループット"、"平均ページ読み込み時間"、"フロントエンドのロード時間"が選べます。ページ読み込み時間とフロントエンドのロード時間の違いは、フロントエンドの方は、ネットワーク処理の時間を含まない処理時間だと思われます。(参考: ページロード処理

さらに、ブラウザをクリックすると、バージョン別のスループットと処理内訳が見れます。

browser_browser_2.png

地域別パフォーマンス : Geo

画面右のメニューから、"Geo" または "Global" を選択します。

browser_geo.png

国別のアクセス状況を確認することができます。もちろん、国をクリックすると、以下のように詳細が表示されます。

browser_geo_2.png

また、上記は国レベルでしたが、日本でのみサービスを展開しているとあまり国レベルの情報は役にたちません。そこで、特定の国の設定を追加することで、その国にフォーカスした情報をみることができます。

以下では、"Japan" を設定に追加しているので、日本の都道府県別のアクセス状況をみることができます。

browser_geo_3.png

国の追加方法

Geo 機能に国を追加するには、左メニューの "Settings"の"Application settings"を選択します。

画面下のほうに、"Countries" という項目があるので、その右のリストから追加したい国を選んで、"+"ボタンを押して、"Save application settings"を押して保存します。

browser_geo_4.png

すると、"Geo" メニューの下に、追加した国が表示されます。

さいごに

どうでしたでしょうか?なんとなく、New Relic Browser という製品が分かってもらえたでしょうか。次回は、有料機能の説明ができたらいいなと思います。