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

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

More than 3 years have passed since last update.

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 という製品が分かってもらえたでしょうか。次回は、有料機能の説明ができたらいいなと思います。

Why do not you register as a user and use Qiita more conveniently?
  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