はじめに

　APIを使用してコンテンツを動的に更新し、快適なユーザー体験を実現しているアプリケーションも多く、そのAPIのエラーやパフォーマンスを分析することはユーザー体験の改善に大変重要です。　

　New Relic Browser(以下、Browser) を活用することでウェブアプリケーションのパフォーマンスに影響を与える問題を特定し、解決することが可能です。Browser は、アプリケーションからコールされたAPIのパフォーマンスやエラーの情報を収集、分析を実現しています。

　しかし、発生したAPIのリクエストをグループ化する方法が、リクエストURLや呼び出し元のページ等に限られていたため、URLなどの識別子が存在しないGraphQLの場合は、参照、更新など異なるリクエストを判別するのが困難な状態でした。

　Browser agent v1.245.0 のアップデートにより GraphQL の Operator Type, Operator Name を使ったグループ化が可能になったので、本記事で紹介します。

主要なアップデートの詳細はこちら。
New Relic アップデート一覧

New Relic株式会社のQiita Organizationでは、新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。

GraphQL の Operator Type, Operator Name でグループ化が可能に

　発生したAPIのリクエストは、Browserの AJAX ページから参照できます。下記の例ではリクエストURL毎にグループ化されており、URLが処理毎に異なるためそれぞれのパフォーマンスやリクエスト回数を確認可能です。

　GraphQLの場合は、URLなどの識別子が存在しないため、下記のように異なる処理がまとめて表示されている状態でした。

　今回のアップデートでは下記のように GraphQL の Operator Type, Operator Name でグループ化できるようになりました。

また、グループ化されたGraphQLの処理毎にパフォーマンスデータを分析することが可能です。

　この変更はエージェントのアップデートにより収集する情報が増えたことで実現されています。同じアプリケーションであってもエージェントのバージョンが古ければ下記のように Group By のリストに Operator Type, Operator Name は表示されません。

　使用する場合は、Browser エージェントのバージョンにご注意ください。

Operator Type, Operator Name が追加されているデータを確認

　Operator Type, Operator Name は、New Relicのデータベースに AjaxRequest イベントの情報として保存されています。

　NRQLを使ってデータを取得することが可能なので重要なリクエストやよく確認するリクエストはクエリをカスタマイズしてダッシュボードに表示しておくこともできます。

NRQL

FROM AjaxRequest SELECT count(*) 
FACET operationFramework, operationType, operationName TIMESERIES

まとめ

　今回のアップデートで GraphQL を使用しているウェブアプリケーションのパフォーマンス分析やトラブルの調査が以前よりも簡単にできるようになりました！フロントエンドのパフォーマンス改善をしたい、エラーの原因調査をしたいけどGraphQLを使っているからうまく活用できていなかったという方はこの機会にぜひチャレンジしてください。

New Relic株式会社のQiita Organizationでは、新機能を含む活用方法を公開していますので、ぜひフォローをお願いします。