CreateReactAppにWebVitals計測ライブラリが入ったので試してみた

この記事はReact #2 Advent Calendar 2020の12日目の記事です

概要

• 最近はNext.jsばかり使ってますが久しぶりにCreateReactAppを使ってみたらreportWebVitals.tsという見慣れないファイルが生成されていたのを見たのが今日の記事のきっかけです
• Reactアプリの雛形生成ツールであるCreateReactAppはv4でWebVitalsの計測ライブラリがデフォルトで組み込まれるようになりました
  • https://github.com/facebook/create-react-app/releases/tag/v4.0.0
• せっかくなのでドキュメントに沿って少し試してみたいと思います

ファイルの確認

• まずは生成されたコードを見てみましょう
• create-react-appコマンドで雛形を生成します

npx create-react-app --template typescript web-vitals-sample

• 生成されたファイルの一覧はこんな感じです

.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
├── tsconfig.json
└── yarn.lock

• reportWebVitals.tsが今回注目するファイルですね
• 中身はこんな感じです

src/reportWebVitals.ts

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

• web-vitalsというライブラリを使っていろいろ設定してくれています
• web-vitalsはGoogleChromeが提供するWebVitals計測ライブラリですね
  • https://github.com/GoogleChrome/web-vitals/
• このライブラリの追加とセットアップを事前にやってくれているということのようです

使い方

• 使い方はCreateReactAppのドキュメントに載っています
  • https://create-react-app.dev/docs/measuring-performance/
• reportWebVitals.tsでexportされたreportWebVitalsを呼び出して引数に関数を渡して使います
  • 渡した関数が内部で呼び出され各種メトリクスが渡されます
• サンプルにあるようにconsole.logを引数として渡してみます

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals(console.log);

• ページを表示するとコンソールにLCPなどのWebVitalsの指標が表示されました！

• 取得できる指標はCLS、FID、LCP、FCP、TTFBの5種類です
  • https://github.com/GoogleChrome/web-vitals/#overview
• サーバに送信したりGoogleAnalyticsに送信するサンプルも掲載されています

function sendToAnalytics(metric: Metrics) {
  const body = JSON.stringify(metric);
  const url = 'https://example.com/analytics';

  // Use `navigator.sendBeacon()` if available, falling back to `fetch()`
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

reportWebVitals(sendToAnalytics);

function sendToAnalytics({ id, name, value }) {
  ga('send', 'event', {
    eventCategory: 'Web Vitals',
    eventAction: name,
    eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
    eventLabel: id, // id unique to current page load
    nonInteraction: true, // avoids affecting bounce rate
  });
}

reportWebVitals(sendToAnalytics);

試してみた

• 送信されたデータをDBに保存するAPIを作って適当にグラフ表示してみました
  • どういう風に集計するのが有用かはもうちょっとちゃんと考えないといけないですね・・

まとめ

• CreateReactAppに新しく入ったWebVitalの計測機能はweb-vitalsライブラリのセットアップを事前にしてくれているというものでした
• 取得できるメトリクスを収集するのは簡単なのでそれをどう活用していくか考えていけばよさそうですね