Let's try 外形監視!! -Simple Browser編-

Webサイトのトップページや重要なキャンペーンのページなど、お客さんに一番見てもらいたいページは特に問題が起こらないよう定期的に確認して早期に対応しておきたいですよね。
そんな時に定期的に特定のサイトの読み込み時間などを確認することができる、SyntheticのSimple Browserを紹介したいと思います！

## Simple Browser でできること
Synthetic のSimple BrowserはChromeまたはFirefoxのインスタンスを使用してサイトにリクエストを送信します。Pingモニターよりも実際のBrowserからの読み込みを確認できるため、顧客体験をより正確にエミュレートすることができるモニターです。

## Simple Browser の設定方法
実際にNew Relic上で設定してみましょう

(1)Synthetic Monitor をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/63badf38-f71a-4434-8238-e619b13dcae3.png" width=50%>

(2)Monitor -> Create monitor をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/db09965a-a0ef-7baa-09ee-26f9e11c9435.png" width=80%>

(3)Page load Performance -Simple Browser-をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/2ffccd6e-d187-86da-c40e-b19d32f4ec46.png" width=80%>

(4)モニター名やチェック対象となるドメイン、チェックを行うBrowserの種類、エミュレーションするデバイス情報を選択し Select locationsをクリック
必要に応じてチェック期間(Period)やApdexの目標値などのオプション設定を追加する事も可能です

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/2b10c065-d58b-c218-1bd0-32cc1e0a9bf7.png" width=80%>


(5)チェックを行うロケーションを選択し「Save monitor」をクリック
ロケーションはグローバルに用意された場所から複数選択することが可能です。
社内システムなどインターネットに直接アクセスできないクローズドな環境で実行したい場合にも、プライベートロケーションにJob Managerを置くことでチェックが可能です(Job Managerに関しては別記事で紹介します)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/d015543b-797c-bd57-4a3c-87d77e44b9e0.png" width=80%>


これだけの設定でしばらくするとチェック結果が表示されるようになります！！
簡単！！

### 【補足】デバイスエミュレーションについて
設定(4)にて選択できるBrowserとデバイスに関しての補足です。
選択することによって使用するBrowserでの違いやモバイルやタブレットからの読み込みを想定してモニターすることが可能になります。
ただし要件や注意点がありますので確認の上ご活用ください。
特にPrivate Locationで利用する際は、JobManager等のバージョンにはご注意ください。
詳しくはこちらの[ドキュメント](https://docs.newrelic.com/jp/docs/synthetics/synthetic-monitoring/using-monitors/device-emulation/)をご確認ください。

## 結果の確認
作成したモニターはしばらくすると結果を確認することができるようになります

Resultsでは実行結果の推移を見ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/1383c44b-9671-4a3c-9547-52e057aa39de.png" width=80%>

それぞれの実行の詳細を見る場合には、timestampのリンクをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/26873f1b-b1d8-529f-bdad-37353478cdd5.png" width=80%>

クリックした先では読み込まれたリソース毎の読み込み時間とそのタイムラインの詳細を確認することが可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/a70b4473-f6e9-aa11-6d8e-22bfb77c78f4.jpeg" width=80%>

「Browser Log」をクリックすると、読み込み結果のログを確認することが可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/bee27639-98c7-3d9e-8b2e-203addcec2df.png" width=80%>

Resources では各リソース毎の平均ダウンロード時間と平均サイズ毎にSortして確認することが可能です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/efeff065-ed42-42de-2ef8-f54140a055ea.png" width=80%>

対象リソースをクリックしドリルダウンしていくと、HTTPステータスコード、 タイミング情報 など、詳細なメトリクスを見ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/49ae3817-165f-5343-60fd-00fa18768424.png" width=80%>

対象ページの詳細も併せて確認できるので、ページのリソース読み込みを改善させてるためにも使えたりもします。
便利！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/9ec7c617-8de5-e44a-8927-bef3b78a3af4.png" width=80%>



## 補足
New Relicでは契約しているプランによって、Synthetic checkの実行可能上限が異なります。
上限についての詳細やチェックのカウント方法に関する詳細に関しては、[こちら](https://qiita.com/ume67026265/items/02e602b8af21078366f9#synthetic-%E3%81%AE%E5%AE%9F%E8%A1%8C%E5%9B%9E%E6%95%B0%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88)の記事をご確認ください

## まとめ
わざわざ自分たちでサーバを立てたり手動で確認しなくても、Syntheticを活用することでさまざまな拠点から定期的にチェックできるのはとても便利です！
設定も簡単なので是非SyntheticのSimple Browserを活用して、より良いサイトのユーザ体験向上に繋げてください！

:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::
:::note info
[New Relic株式会社のQiita Organization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::