[SOLVED] What is the web-vitals, coming with create-react-app?

What is the web-vitals, coming with create-react-app?

I have just recognised that my newly created Reactjs application have a file src/reportWebVitals.js, which is being called in index.js. What is this file/pice of code for?

const reportWebVitals = onPerfEntry => {
  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;

Solution

It is a third-party library is used to capture and measure user experience metrics comming as a default with create-react-app.

The web-vitals library is a tiny (~1K), modular library for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they're measured by Chrome and reported to other Google tools (e.g. Chrome User Experience Report, Page Speed Insights, Search Console's Speed Report).

They are grouped under two title;

Core Web Vitals

Cumulative Layout Shift (CLS)
First Input Delay (FID)
Largest Contentful Paint (LCP)

Other Web Vitals

First Contentful Paint (FCP)
Time to First Byte (TTFB)

for more detail -> https://github.com/GoogleChrome/web-vitals