前言

Web Vitals 是 Google 提出的計畫，主要目的是提供了各種 metric 量化一個網站的性能。之前在 Google Chrome Developer 頻道有用台語介紹 Core Web Vitals 的影片，舉例非常有趣推薦大家參考 ↓

現在許多網站都會導入測量 Web Vitals 的流程，透過量化指標找到可以改善的地方。目前有蠻多工具可以幫助開發者測量 Web Vitals，像是：

• Lighthouse
• PageSpeed Insights
• CrUX
• Search Console

Sentry 的 Web Vitals 統計功能

不過，比較少人知道的是其實 sentry 在之前也推出了 Web Vitals 的統計功能¹，能夠統計 Web Vitals 的各個指標如 LCP、FP、CLS，讓開發者可以在後台看到相關的圖表，甚至把平均值都標好了，相當貼心。

然而，sentry 的資料似乎只會保存 30 天，而且沒辦法做到比對的功能，例如將上個禮拜的 metric 與這個禮拜的 metric 做對比，圖表也只能在 sentry 上面看，對其他團隊來說就是一個切換成本，身為開發者難免會想要將整個流程自動化。

後來查了一下，雖然 sentry 有提供 API 串接（有 token 的話），但似乎沒有提供 Web Vitals 的 API 文件，不過好奇打開 console 一看，可以看到圖表的生成也是透過 API 拿到的，我把 API 的 endpoint 跟參數照抄之後透過 CURL 呼叫也成功了！看來只是沒有寫在文件上而已。

主要的 API 有兩個：（因為沒有文件，有可能參數或路徑會改變也說不定）

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

自動化流程設計

資料到手了，代表我們可以整合到 slack 裡面定期追蹤，也方便分享給其他團隊的人，想要進一步的詳細資料再到 sentry 的後台查看。整個流程如下：

透過 cronjob 呼叫 API（或寫成 serverless 也可以），拿到 sentry 的資料後上傳並產生報告。

有一個地方要特別注意的是，在 query parameter 當中有 + 的存在，直接送到 encodeURIComponent 或是用 URLSearchParams 的話會變成 %2B，sentry 那邊就會跳錯誤，因此要特別把 + 拿出來或想辦法不要讓他被 encode。

舉例來說，API 的 query parameter 會長這樣：field=percentile(measurements.fp%2C+0.75)&field=percentile(measurements.fcp%2C+0.75)&...，可以用類似呼叫函數的方式來定義要回傳的資料，例如 percentile(measurements.fp,+0.75) 就是回傳 75 分位的 FP 資料（單位應該是毫秒）。可以發現雖然 , 被 encode 成了 %2C，但是 + 的部分沒有 encode。建立 query parameter 的時候如果有錯誤的話可以從這個部分下手。

回傳的資料型別會像這樣：

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

接下來的就是生成 .json 並上傳到 S3，或是其他 Storage 也可以。這樣一來就可以和昨天（或之前的資料）作比較，並產生報告送到 slack 上：

另外如果想要產生圖表的話，在 node.js 可以使用 chart.js 跟 chartjs-node-canvas 來實作，這樣子不需要使用瀏覽器（canvas）也可以畫圖表，唯一要注意的是在伺服器上如果沒有安裝對應字體的話有可能會跑版或是字型跑掉。

關於 cronjob 的選擇，現在雖然有很多成熟的方案，甚至 hardcode 開個 server 寫進 crontab 也可以，不過在這邊我們使用了 drone CI 的 cronjob 功能來實作。主要是因為 drone 的設定檔寫起來很方便，公司內部也有專用的 drone CI 伺服器，加上不能隨便使用外部的服務，因此最簡單的方式就是整合 drone CI，盡量讓整件事情變得好設定。

不過不知道為什麼，每次觸發 cron 事件時，其他的 pipeline 也會一起觸發，因此後來改成額外開 branch 的方式修改 .yaml 來呼叫 API：

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

這樣就完成整個自動化實作了，現在每天都可以看到報告傳到 slack 上面了，對開發者來說也更容易看到變化跟反饋。