APM から Browser のユーザ指標をサクッと確認！

アプリケーションの開発・運用を行なっていく中で最小限の工数でオブザーバビリティを実現したいですよね？
そんなニーズにお応えするべくNew RelicのAPMのSummary内でBrowserの情報を見ることができるようになりました！
UIの更新なので、すでにAPMとBrowserを活用されてる方は追加で作業を行う必要はありません！
この記事を見た後に是非New RelicのUIを確認して見てください！！

:::note info
このアップデートの詳細はこちら。
[New Relic アップデート(2024年11月)](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202411)
[New Relic アップデート](https://newrelic.com/jp/blog/nerdlog/new-relic-update "New Relic アップデート")
:::

## なぜこのUpdateが重要なのか
ユーザー視点で監視において重要なポイントは、「ユーザーが今どのような状態なのか」を正確に把握することです。
そのためにシステムの運用においては様々なポイントのデータからユーザー状況を把握することが重要ですが、ユーザーとの距離と得られる情報にはそれぞれメリットデメリットがあります。(下図をご参照ください)
これらのデータのメリットデメリットを補いながら、より正確かつ迅速に状況を把握していく必要があります。

![apm-browser01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/e16d3889-ca58-43a1-864a-d6f5c31d51e8.png)

でも複数のツールを行き来したりは面倒ですし、せめてNew Relic内での遷移を楽にしたい！という要望に対応したのが今回のUpdateです！
元々アプリケーションが動くインフラの情報を取得したInfrastructureの情報はSummary内でみれていたので、フロントエンドからバックエンドまでSummary画面で状況を把握できるのはとても楽ですよね。
インフラ・アプリ・Backendと担当が分かれているような組織でも、APMのSummaryを見ればチーム全員で同じ画面をみながら障害や改善に向けたディスカッションも可能になります！

<B><注意></B>
ただしこのUIを活用するためにはAPMとBrowserを紐づけることができる、APMの自動インストゥルメンテーションが有効である必要があります。もしBrowser Agentを導入しているのにAPMのUI上で表示されない場合は、インストール方法をご確認ください。
詳しくは[こちら](https://docs.newrelic.com/jp/docs/new-relic-solutions/best-practices-guides/full-stack-observability/browser-monitoring-best-practices-guide/#auto-instrument)のドキュメントをご参照ください

## 画面を見てみる
同一システム上でAPMとBrowserが設定されているAPMのSummaryを見てみましょう。
一見これまでと変わらないように見えますが、画面を下にスクロールすると・・・

![apm-browser02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/a89e9aa2-0276-49e8-b710-a302cfe7fdb2.png)


なんとそのアプリに紐づくBrowserの情報も簡易的に見ることができるようになっています！
これは便利！！

![apm-browser03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/f7c39cd4-0aa9-4685-a804-7308359ba873.png)

それぞれがBrowserの各ページに遷移しているので、シームレスにフロントの状況も確認することが可能なので、アプリケーションとの相関関係もサクッと確認することが可能です。

例えばユーザーのブラウザ上で発生しているJavaScriptのエラー発生率を追跡し、ユーザーに影響を与える上位のエラーメッセージを特定することが可能です。

![apm-browser04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/970c27e6-84ce-47a0-816d-6247676459d8.png)


Session Replayが有効化されている場合は、ユーザーがアプリケーションをどのように操作しているかを確認することが可能です。最近のセッションのスタックビューを開き、エラーによって発生する可能性のある障害を特定することで状況確認から修正までのスピードを格段に上げることが可能です！

![apm-browser05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/ad04dbcd-1790-4e5d-a24e-0f05e31507ff.png)

Session Replayについては、こちらの記事も併せてご確認ください。

https://docs.newrelic.com/jp/docs/browser/browser-monitoring/browser-pro-features/session-replay/


ユーザー エクスペリエンスと SEOランキングに大きな影響を与える Core Web Vitals メトリックも確認することが可能なのでどのページをどのように修正すれば良いのか、すぐに確認できます

![apm-browser06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313446/b661407a-1b05-4ed5-aec0-5cae627e0b8a.png)

Core Web Vitals については、こちらの記事も併せてご確認ください。

https://qiita.com/ktst79/items/8bc732eb12c7b86a257a

APMとBrowserをサクッと試したい時は、Progateの無料学習コンテンツをご活用ください！

https://qiita.com/nr-mito/items/6ec377dc32eb9487f563



## まとめ
New Relic の APM Summary UI は Infrastructure やログだけでなく、Browser も連携しアプリケーションの状況を把握していくことができるようになりました。
今までのアプリケーション監視からさらに一歩進むために更新されたUIを活用し、みなさんのシステムにおけるオブザーバビリティ実現に是非ご活用ください！

:::note info
このアップデートの詳細はこちら。[New Relic アップデート(2024年11月)](https://newrelic.com/jp/blog/nerdlog/new-relic-update-202304)
:::
:::note info
無料のアカウントで試してみよう！
[New Relic フリープランで始めるオブザーバビリティ！](https://qiita.com/ktst79/items/5ee74b34e6adb8a7a6fa)
:::
:::note info
[New Relic株式会社のQiita OrganizationOrganization](https://qiita.com/organizations/newrelic)では、
新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。
:::