こんにちは、ゲームソリューショングループのsoraです。
今回は、New RelicでEC2上のWebページをブラウザモニタリングをしてみたことについて書いていきます。
初心者向けの記事です。
はじめに
New Relicとは何かについては、以下ブログをご参照ください。
New Relicを導入した際に、見れるメトリクスはどのようなものかを実際に試して確認してみようと思います。
New Relicでは、色々な種類のモニタリングがありますが、今回はブラウザモニタリングを導入していきます。
（公式ページ）Browserモニタリングエージェントのインストール
New Relic ブラウザモニタリングの導入
監視対象
今回監視対象とするのはEC2上のWebページです。
以下のブログで作成したものを使用します。
ブラウザモニタリングの導入
Add DataからBrowser Monitoringを選択します。
今回はHTMLファイルにスクリプトをコピーアンドペイストで導入します。
表示されたスクリプトをHTMLファイルのhead部分（meta以降）に貼り付けます。
front.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ↓New Relicで表示されたスクリプトを貼り付け -->
<script type="text/javascript">
</script>
<!-- ↑New Relicで表示されたスクリプトを貼り付け -->
</head>
<body>
<h1>sora</h1>
<h2>所属</h2>
<p>営業統括本部 ゲームソリューショングループ ソリューションアーキテクト</p>
<h2>今後ブログにしようと思っていること</h2>
<ul>
<li>案件対応時に出たエラー</li>
<li>Goで色々作ってみた成果物</li>
<li>構築したことのない構成やサービスをTerraformで構築</li>
</ul>
</body>
</html>メトリクスの確認
モニタリングの準備ができたため、Webページを表示した後にNew Relicにてメトリクスを確認していきます。
Summary
- Error rate：JavaScriptエラーになったページビューの割合
- Largest Contentful Paint (LCP)：ページの読み込みが開始されてから最大のテキストブロックまたは画像要素が画面に表示されるまでの時間
- First Input Delay (FID)：ユーザーが最初にサイトを操作したときから、ブラウザが操作に応答できるようになるまでの時間
- Cumulative Layout Shift (CLS)：ページの読み込みが開始されてからライフサイクルの状態が非表示に変わるまでの間に発生したすべての予期しないレイアウトシフトの累積スコア
- User time on the site：サイト滞在時間
などを見ることができます。
Page view
Session traces
Web vitals
Browsers
最後に
今回は、New RelicでEC2上のWebページをブラウザモニタリングをしてみたことを記事にしました。
どなたかの参考になると幸いです。
21
