はじめに
この記事はNew Relic Advent Calendar 2024の 2 日目の記事です。
こんにちは。株式会社エモーションテックでフロントエンドエンジニアをしているすずきです。
弊社ではアプリケーションの監視に New Relic を使っているのですが、その機能の 1 つにダッシュボードがあります。
New Relic で収集したデータをどのように視覚化・活用すればいいのか、まずはフロントエンドチームで検討してダッシュボードを作ってみました。
作ったものを定期的に見て話し合うという運用を始めてある程度時間が経ったので、今回はそのダッシュボードについてご紹介しようと思います。
ダッシュボードの紹介
定期的に見ているダッシュボードには大きく 2 種類あります。
1 つは、アプリケーション横断ダッシュボードです。
エモーションテックのプロダクトは複数のアプリケーションから構成されているのですが、1 つ目のダッシュボードはフロントエンドの全てのアプリケーションについてエラーやパフォーマンスの情報が確認できるようになっています。
もう 1 つはアンケート回答画面用のダッシュボードです。
2 つのダッシュボードを設けている理由としては、アプリケーションによって利用ユーザーが異なるので、それぞれのユースケースに沿った観測をできるようにするためです。
弊社のプロダクトの 1 つにアンケートシステムがありますが、契約企業の担当者がアンケートの設定やデータ分析を行う一方で、実際にアンケートに回答するのは契約企業の顧客です。
そのため、アンケートの回答画面だけはユーザーが異なり、観測したいデータも違うため専用のダッシュボードを用意しています。
アプリケーション横断ダッシュボード
ダッシュボード全体はこのようになっています。
※の部分にはアプリケーション名が表示されており、タブで対象のアプリケーションを切り替えてそれぞれのデータを見ることができます。
このダッシュボードは週次のフロントエンドチームの定例で確認するようにしています。
エラーの情報
アプリケーション横断ダッシュボードの①の部分にはエラーの情報が表示されています。
dev、stg、prod 環境ごとに、先週と今週の件数 TOP 10のエラーを表示しています。
表の左側には各環境のエラーを確認できるページへのリンクを表示しました。
エラーが発生したときは Slack へ通知が来るようにしていますが、1 度発生したエラーは同じエラーが発生しても一定期間通知が来ないようになっています。（ノイズにならないよう）
このエラー情報を定例で確認することで、次のような観点で議論や検討をするきっかけになります。
- Slack に通知されないうちに件数が増えているエラーがないか
- ユーザー影響がないので対応の優先度を下げていたが、そろそろ修正した方が良さそうなエラーがないか
- 修正をしたものがリリースされ、各環境でエラーが出なくなっているか
テストのカバレッジ
アプリケーション横断ダッシュボードの②の部分にはユニットテストのカバレッジが表示されてます。
フロントエンドチームではテストの戦略について考えている最中なので、まずは現状がわかるよう前日の Statements、Branches、Functions、Lines と、1 ヶ月の推移を表示しています。
（カバレッジのデータは https://qiita.com/arie0703/items/cc7c4c7f875b074e5b0e を参考に毎日 New Relic に送っています）
Core Web Vitals
アプリケーション横断ダッシュボードの③の部分には Core Web Vitals を表示しています。
下の画像は New Relic Browser の Summary に表示されている Core Web Vitals のグラフです。
このようにどこまでがいい状態で、どこからが改善を検討した方がいいのかわかるようにしたかったので、ダッシュボードのグラフにも閾値を設定しました。
閾値の設定は、ウィジェットの編集画面右側にメニューがあるので NRQL を書かずに UI で設定することができます。
このグラフが右肩上がりになっていたり、ある機能のリリースのタイミングから Needs improvement のゾーンに入っていたりする場合は、原因や解決策をチームで話し合うようにして活用しています。
回答画面用ダッシュボード
回答画面用ダッシュボードの全体はこのようになっています。
このダッシュボードも週次のフロントエンドチームの定例で確認していますが、それに加えてアンケートのプロダクトを作っているチームの定例でも見ることがあります。
ユーザーエージェントの情報
回答画面用ダッシュボードの①の部分には回答者の使用したデバイスや OS、そのバージョンの情報が表示されています。
この情報は主に回答者の傾向を掴んだり（「最近 Android が増えてきた」「社内向けのアンケートがたくさん実施されているため PC からの回答が多い」など）、デザインや仕様を検討したりする際の材料にします。
また、回答画面は推奨ブラウザの最新バージョンをサポート対象としていますが、サポート外ブラウザのユーザーが一定数いる場合はそのバージョンで使えない API を使用しない作りに変更する対応もしています。
回答画面へのアクセスの傾向
回答画面用ダッシュボードの②の部分にはどのアンケートへのアクセスが何件あったか、またどの曜日や時間帯にアクセスが多いかが表示されています。
まだ活用しきれていませんが、今後はこの情報をもとにリリースやメンテナンス作業の時間を調整したりできればと思い用意しています。
Core Web Vitals
回答画面用ダッシュボードの③の部分には Core Web Vitals を表示していますが、こちらは先に紹介したアプリケーション横断ダッシュボードと同じ内容を表示しています。
ダッシュボード作成の TIPS
これらのダッシュボードに表示されているグラフの多くは、New Relic に用意されているビルトインダッシュボードを元に作っています。
下の画像の通りビルトインダッシュボードは種類も多くそのまま使えるようなウィジェットが豊富なのでまだダッシュボードを使ったことがない方はこれをそのまま使ってみるのもおすすめです。
ただ、用意されているダッシュボードをそのまま使う場合に注意点が１つあります。
イベントのデータは JST で入っているのですが、NRQL の時間関数を通すと UTC で結果が返ってくるものがあります。
https://docs.newrelic.com/docs/nrql/nrql-references/nrql-group-results-across-time/
上記の時間関数を使う場合は WITH TIMEZONE 'Asia/Tokyo' を含めることで日本時間で結果を表示することができます。
おわりに
いかがでしたか？
今回は弊社のフロントエンドチームで活用しているダッシュボードをご紹介しましたが、ビルトインで用意されているものもたくさんあり、UI で変更できるパラメーターも豊富なのでどんなアプリケーションでも始めやすいと思います。
今回紹介したダッシュボードを作り始めたときも NRQL にあまり詳しくありませんでしたが、ビルトインのものを活用して値を少し変えるだけでもある程度のものが表示できるようになりました。
とはいえまだまだ改善の余地は多いと思うので、これからもアップデートを続けてユーザー体験の向上を図っていこうと思います。
ここまでお読みいただきありがとうございます。
エモーションテックでは顧客体験、従業員体験の改善をサポートし、世の中の体験を変えるプロダクトを開発しています。
プロダクトに興味のある方、Angular を使ったアプリケーション開発をしたい方、ぜひ採用ページからご応募をお願いいたします。
