フロントエンドでパフォーマンスを測定する機会があり、その時にSentryを使った。
既にSentryを導入していればパフォーマンスの計測も簡単にでき、わりと便利だったのでメモしておく。
Sentryを選定した背景
開発中にパフォーマンスを測定するなら、devツールなどでも測定はできる。
ただこれは環境依存なので、ある程度マシンのスペックだったり通信環境に依存してしまう。
今回は開発時ではなく、ユーザーが実際に使った環境でのパフォーマンスを測定したかった。
こういうユースケースで有名なのだとnew relicがある。
new relicはバックエンドのパフォーマンス測定のイメージがあったが、調べてみたらフロントエンドのパフォーマンスも測定できるらしい。
一方、Sentryはログ計測で有名だと思うが、同時にパフォーマンスも測定できる。
他にもいくつか選択肢はありそうだったが、今回はプロダクトに既にSentryが導入してあったのでパフォーマンス測定も簡単にできるということでSentryを使うことにした。
実際かなり簡単に導入できた。
計測のセットアップ
まず測定のためのセットアップを行う(公式ドキュメント通り)。
import * as Sentry from '@sentry/browser'
import { BrowserTracing } from '@sentry/tracing'
Sentry.init({
dsn: config.SENTRY_DSN,
integrations: [new BrowserTracing()],
tracesSampleRate: 0.2,
})dsnは各環境ごとのものを設定。
tracesSampleRateは0~1の間で設定するが、1にすると全てのアクセスにおいて計測することになる。
なのでテスト中は1に設定しておく方が良い。本番環境での値はプロダクトごとのアクセス数や測定したい比率を考えて行うことになるが、今回はとりあえず0.2とした。
実際、ドキュメントにも1のままにしないことをお勧めすると書いてあった
Once testing is complete, we recommend lowering this value in production by either lowering your tracesSampleRate value, or switching to using tracesSampler to dynamically sample and filter your transactions.
https://docs.sentry.io/platforms/javascript/performance/
Leaving the sample rate at 1.0 means that automatic instrumentation will send a transaction each time a user loads any page or navigates anywhere in your app, which is a lot of transactions. Sampling enables you to collect representative data without overwhelming either your system or your Sentry transaction quota.
計測
実際に測定した結果を送信するが、そこではtransactionとspanという概念が出てくる。
transactionが実際にSentryに送信する単位で、spanという子要素を持つ。
spanは計測の開始時刻と終了時刻を持つ。
実際にAPIでデータを取得する処理を含んだパフォーマンスを計測するために書いてみるとこんな感じになる。
import { startTransaction } from '@sentry/browser'
const transaction = startTransaction({ name: 'fetch' })
const apiSpan = transaction.startChild({ op: 'api' })
const data = await fetchData()
apiSpan.finish()
transaction.finish()データをフェッチする処理があった場合に、その処理の前後をtransactionとspanで挟むだけ。
たったこれだけで測定ができる。
測定されるデータもわりと詳細で、フィルタリングなんかもできて便利。
非同期処理の測定について
今回はデータを非同期処理で取得して、それをawaitして前後で取得する形にしたので問題なかった。
ただ、昨今のフロントエンドではswrなどのライブラリを使ってデータを取得することも多いように思う。
この場合にどうやってこの処理を含んだ部分を計測するのかはよくわかっていない。
試してもいないがおそらく今回と同じようにやろうとすると、イベントが登録された直後に計測終了してしまうので正しい結果を測定できない気がしている。
実際の処理部分はライブラリ側で隠蔽された形なのでこの方法でAPIリクエスト部分を計測するのは厳しい…？
この辺はどうしたらいいのか自分の中ではまだわかっていない。
もしわかる方いたら教えて欲しいです。
まとめ
普段ログ測定にしか使ってないSentryだが、パフォーマンス計測にも使えるということを初めて知った。
既にSentryを使っていれば簡単に導入できて便利。
パフォーマンス周りはあまり知見がないので、積極的にやっていきたいところ。
この記事が参考になったからコーヒーくらいおごってもいいぜという方は、以下からサポートいただけると次の記事書くモチベになりますのでよろしくお願いします
参考
