前言

Web Vitalsは、Googleが提唱したプロジェクトであり、ウェブサイトのパフォーマンスを定量化するさまざまな指標を提供することを目的としています。以前、Google Chrome Developerチャンネルで台湾語でCore Web Vitalsについて紹介された動画があり、非常に興味深く、皆さんにおすすめです↓

現在、多くのウェブサイトではWeb Vitalsの測定プロセスを導入し、指標を通じて改善すべき点を見つけています。現在、開発者がWeb Vitalsを測定するための多くのツールがあります。例えば：

• Lighthouse
• PageSpeed Insights
• CrUX
• Search Console

SentryのWeb Vitals統計機能

ただし、あまり知られていないのは、Sentryが以前にもWeb Vitalsの統計機能を導入していることです¹。これにより、開発者はLCP、FP、CLSなどのWeb Vitalsの各指標を統計し、関連するチャートをバックエンドで表示し、平均値まで表示することができます。

ただし、Sentryのデータは30日間しか保存されず、比較機能も提供されていません。つまり、先週のメトリクスと今週のメトリクスを比較することはできず、チャートもSentry上でしか表示できません。他のチームにとっては切り替えのコストがかかるため、開発者としては自動化したいと思うのは当然です。

後で調べてみたところ、SentryはAPIの統合（トークンがある場合）を提供しているようですが、Web VitalsのAPIドキュメントは提供されていないようです。しかし、好奇心からコンソールを開いてみると、チャートの生成もAPI経由で行われていることがわかりました。APIのエンドポイントとパラメータをコピーして、CURLを使用して呼び出すと成功しました！おそらく、ドキュメントに記載されていないだけのようです。

主なAPIは2つあります：（ドキュメントがないため、パラメータやパスが変更される可能性もあります）

• /events-measurements-histogram/?...
• /eventsv2

自動化フローの設計

データが手に入ったので、定期的にSlackで追跡し、他のチームのメンバーと共有するのに便利です。詳細な情報が必要な場合は、Sentryのバックエンドで確認することもできます。以下は、完全なフローです：

cronjobを使用してAPIを呼び出し（またはサーバーレスで作成することもできます）、Sentryのデータを取得してアップロードし、レポートを生成します。

注意が必要なのは、クエリパラメータに + が含まれていることです。encodeURIComponentを直接使用するか、URLSearchParamsを使用すると %2B に変換されてしまい、Sentryでエラーが発生します。したがって、+ を特別に取り出すか、エンコードされないようにする必要があります。

例えば、APIのクエリパラメータは次のようになります：field=percentile(measurements.fp%2C+0.75)&field=percentile(measurements.fcp%2C+0.75)&...。返されるデータを定義するために、関数呼び出しのような形式を使用することができます。たとえば、percentile(measurements.fp,+0.75) は、75パーセンタイルのFPデータ（単位はミリ秒）を返します。, は %2C にエンコードされますが、 + はエンコードされません。クエリパラメータを作成する際にエラーが発生した場合は、この部分から修正できます。

返されるデータの形式は次のようになります：

{
  "path": "/my-page",
  "data": [
    {
      "count": 10,
      "bin": 2000
    },
    ...
  ]
}

次に、.json ファイルを生成してS3にアップロードするか、他のストレージに保存します。これにより、昨日（または以前のデータ）と比較することができ、Slackにレポートを送信できます：

また、グラフを生成したい場合は、node.jsでchart.jsとchartjs-node-canvasを使用することができます。これにより、ブラウザ（キャンバス）を使用せずにグラフを描画することができます。ただし、サーバー上に対応するフォントがインストールされていない場合、レイアウトが崩れる可能性や、フォントが変わる可能性があることに注意してください。

cronjobの選択に関しては、現在は多くの成熟したソリューションが存在し、サーバーをハードコーディングしてcrontabに追加することもできます。ただし、ここではdrone CIのcronjob機能を使用して実装しています。これは、droneの設定ファイルを簡単に記述できるためであり、会社内に専用のdrone CIサーバーもあります。外部サービスを簡単に使用することはできないため、最も簡単な方法はdrone CIを統合し、設定を簡単にすることです。

ただし、なぜかcronイベントをトリガーすると、他のパイプラインも同時にトリガーされるため、後で.yamlを変更してAPIを呼び出すために別のブランチを作成するように変更しました：

steps:
  - name: upload and report
    image: byrnedo/alpine-curl
    commands:
      - curl -X POST YOUR_SERVER_ENDPOINT

これで自動化が完了しました。今では毎日Slackにレポートが届くようになり、開発者は変化とフィードバックをより簡単に確認できます。