Sentryのカスタムスパン計測機能を活用してフロントエンドのパフォーマンスを可視化する

こんにちは。ナレッジワークのgomachanと申します。

今回の記事では、Sentryのカスタムスパン計測機能を活用して、フロントエンドの内部処理のパフォーマンスを詳細にモニタリングする方法をご紹介します。

はじめに

Sentryはエラー監視ツールとして有名ですが、それだけでなくパフォーマンスのモニタリング機能も強力です。特にカスタムスパン計測機能を利用することで、個別の処理ごとの詳細なパフォーマンスを柔軟に測定し、ボトルネックを特定することができます。
https://docs.sentry.io/product/sentry-basics/performance-monitoring/

例えば、

• ユーザー入力後のデータ処理にどれくらい時間がかかっているか
• フロントエンドのデータ加工処理の負荷がどの程度か
• ユーザー操作のレスポンス時間が適切か

といった具体的な処理のパフォーマンスを可視化するには、カスタムスパンを活用するのが有効です。
設定も非常に簡単で導入コストが低いため、お手軽にフロントエンドのパフォーマンス監視を行いたい方におすすめです。

導入に至った背景

私が担当しているプロダクトでは、ユーザが選択したコンテンツをシステム内にスムーズに取り込むというコアとなる機能があります。内部処理としては、まず対象ファイルを取得し、その後データ形式への変換を行い、さらに必要な情報の一部を抽出する一連のステップを実施しています。

しかし、コアとなる機能であるにもかかわらず、これらの処理全体の所要時間が予想以上に長くなりユーザー体験を損ねてしまう可能性がありました。そこで、各工程の実行時間を詳細に記録し、ユーザ体験の向上に向けたパフォーマンス改善に取り組むことにしました。

Sentryのカスタムスパン計測機能の設定方法

SentryのstartSpan関数を使用すると、特定の処理にかかった時間を計測しSentryに送信することができます。
以下のコード例では、processA と processB の処理時間を計測しています。

async function processA() {
  // 処理A 少し時間がかかる処理（例: APIリクエストやDBアクセス）
  await new Promise((resolve) => setTimeout(resolve, 500))
  return 'result-from-A'
}

function processB(input: string) {
  // 処理B（軽い処理）
  console.log('Processing B with:', input)
}

async function main() {
  await Sentry.startSpan({ name: 'sample process' }, async (parentSpan) => {
    // option に parentSpan を渡すことで、スパン同士の親子関係を作成できます。
    const resultA = await Sentry.startSpan({ name: 'processA', parentSpan }, async () => {
      // callbackが終了するとスパンも自動で終了します（非同期関数をcallbackとして渡すことも可能）。
      return await processA()
    })

    await Sentry.startSpan(
      {
        name: 'processB',
        parentSpan,
        // option に attributes を渡すことで、任意の値をスパンに付加できます。
        attributes: {
          attr1: 'my-attribute',
          attr2: 123,
        },
      },
      async () => {
        processB(resultA)
      },
    )
  })
}

パフォーマンス計測の結果

このような設定を行うことで、Sentry上でイベントのパフォーマンスとその内訳を確認できます。

Sentryのダッシュボード上では、親スパンと子スパンの関係性が視覚的に表示され、処理の流れを直感的に理解できます。これにより、どの処理に時間がかかっているのか、どの部分を最適化すべきなのかが一目でわかるようになります。

option.attributesについて

前述のサンプルコードの場合を実行した場合、以下の画像のようにsentry上でattributesを確認することができます。

例えば、ファイル処理のパフォーマンスを計測するシーンでファイルの容量も記録できるので容量と処理の相関関係を確認するのにこの機能が役立ちそうです。

実際のユースケース

導入に至った背景でもお話ししたとおり、私が担当しているプロダクトではファイルの変換処理のパフォーマンスを測定するためにカスタムスパンを活用しています。各処理ステップの中の、

• ファイルのダウンロードにかかった時間
• ファイルのデータ変換にかかった時間
• ファイル容量による処理速度の変化（ファイル容量と処理速度の関係を見る）

を計測し、どの部分がボトルネックになっているのかを分析しています。これにより、

• 特定の処理が遅い場合に詳細な分析ができる
• ファイルサイズごとの処理速度の最適化ができる
• 不要な処理を特定してパフォーマンス改善ができる

といったメリットを得られることを期待しています。

まとめ

このように、Sentryのカスタムスパン計測機能を活用することで、フロントエンド上の特定の処理のパフォーマンスを簡単に可視化できます。フロントエンド上のなんらかの処理のモニタリングを行いたい場合には、ぜひ導入を検討してみてください。
継続的な計測と分析で、ユーザー体験の向上につなげましょう！

参考文献

Sentry公式ドキュメント: Custom Instrumentation