0222

LOGS

• Google の提唱している Core Web Vitals の計測
  • 公式が npm に専用のライブラリを公開している
  • ざっくりと，JS で計測して，analytics や new relic などのモニタリングサービスに送るイメージ
• chat gpt を用いて Web Vitals のデータを取得するスクリプトを書く

• 雑にサンプルプロジェクトを作る

  • 雛形を vite を用いて
  • > npm create vite@latest . -- --template react
  • 続いて必要なモジュールをインストール
  • > pnpm install web-vitals
  • スクリプトを書く（以下は New Relic に送る用のコード）

  import { getCLS, getFID, getLCP } from "web-vitals";
  
  function sendToNewRelic({ name, value }) {
    if (window.newrelic) {
      // New Relicのグローバルオブジェクトを確認
      window.newrelic.addPageAction(name, { value });
    }
  }
  
  export function reportWebVitals(metric) {
    const { name, value } = metric;
    // Web Vitalsのメトリクス名に基づいて、New Relicにデータを送信
    sendToNewRelic({
      name,
      value: Math.round(name === "CLS" ? value * 1000 : value),
    });
  }
  
  // Web Vitalsの各メトリクスを取得し、reportWebVitals関数に渡す
  getCLS(reportWebVitals);
  getFID(reportWebVitals);
  getLCP(reportWebVitals);
  

  • getCLS, getFID, getLCP メソッドは現在は非推奨らしい
  • 雑にコンソールに出したければ console.log を渡す

  import { onCLS, onFID, onLCP } from "web-vitals";
  
  onCLS(console.log);
  onFID(console.log);
  onLCP(console.log);
  

  • で，まぁ今回は react なので，src/App.jsx に組み込む

  - import { useState } from "react";
  + import { useState, useEffect } from "react";
  + import { onCLS, onFID, onLCP } from "web-vitals";
    import reactLogo from "./assets/react.svg";
    import viteLogo from "/vite.svg";
    import "./App.css";
  
    function App() {
      const [count, setCount] = useState(0);
  +   useEffect(() => {
  +     onCLS(console.log);
        // デバッグ時のみ，すべての変更時にもレポートすることができる
  +     onCLS(console.log, { reportAllChanges: true });
  +     onFID(console.log);
  +     onLCP(console.log);
  +   }, []);
  
  /**
    こんな感じにカスタムハンドラを設定しても良い
  
    const reportWebVitals = (metric) => {
      console.log(metric);
    };
  
    useEffect(() => {
      onCLS(reportWebVitals);
      onFID(reportWebVitals);
      onLCP(reportWebVitals);
    }, []);
  */
  

  • レスポンスの delta は 現在の値と最後に報告した値との差 らしい
  • 細かい設定や API はあるが，本格的に使うときに改めて見るということで