New Relicでフロントエンド監視を体験しよう

はじめに

この記事の目標は、New Relicを使ってリアルユーザ監視（RUM）とシンセティック監視を実際に手を動かしてやってみることです。これを通して、監視領域のスキル向上を目指します。

監視戦略は「入門 監視」という名著に則っています。

監視対象

今回は以下をNew Relicで監視することを目指します。

アプローチ	監視対象
リアルユーザ監視（RUM）	ページのロード時間
	JavaScriptの例外
シンセティック監視	ページのロード時間

ページロード時間は4秒以下が望ましいとされています。

New Relicを使ってみよう

アカウント登録は以下からできます。

New Relic

無料サインアップ フロントエンドからバックエンドまで、エンドツーエンドでのオブザーバビリティを実現するNew Relic Oneに無料でサインアップしましょう。月間100GBまで無料でお使いいただ...

アカウント登録の流れは割愛します。ここからは、アカウント登録直後という前提で解説します。

リアルユーザ監視（RUM）

サイドバーの［Browser］をクリックして［Add your first browser app］をクリックします。

［Browser monitoring］をクリックします。

［Place a JavaScript snippet in frontend code］をクリックします。

［What do you want to call it?］にアプリケーションの名前を入力します。今回は本ブログを監視するので、本ブログの名前を入力しました。入力できたら［Save name］をクリックします。

［Continue］をクリックします。

今回はデフォルトのままで［Continue］をクリックします。

スニペットが表示されるので計測したいWebページのheadタグ内にコピペしましょう。それができたら［See your data］をクリックしましょう。

しばらく待って画面をリロードすると、問題なく計測できていることが確認できます。

シンセティック監視

サイドバーの［Synthetic Monitoring］をクリックして［Create your first monitor］をクリックします。

［Availability］をクリックします。

［Name］にモニターの名前を入力します。今回は本ブログを監視するので、本ブログの名前を入力しました。［URL］にcURLを投げるURLを入力します。今回は本ブログのURLを入力しました。入力できたら［Select locations］をクリックします。

疎通元の地域を選択します。

今回は推奨された「バラバラの地域最低3つ」に則って選択しました。選択できたら［Save monitor］をクリックします。

しばらく待って画面をリロードすると、問題なく計測できていることが確認できます。

まとめ

New Relicを使えば簡単にリアルユーザ監視（RUM）とシンセティック監視ができます。具体的に、今回はページのロード時間とJavaScriptの例外を計測してみました。監視戦略は「入門 監視」という名著に則っているので、今回学習・経験したことは様々なプロジェクトで応用可能でしょう。

少しでも監視関連のスキル向上に貢献できる記事になっていたら嬉しいです。それでは、最後までご覧いただき誠にありがとうございました。