refactored web vitals

Author: damianperera

frontend/src/index.tsx

@@ -2,49 +2,17 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 import { BrowserRouter } from 'react-router-dom'
-import { Metric } from 'web-vitals'
-import ReactGA from 'react-ga4'
 import reportWebVitals from './reportWebVitals'
 import App from './App'
 
-const root = ReactDOM.createRoot(
+ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
-)
-root.render(
+).render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
     </BrowserRouter>
   </React.StrictMode>
 )
 
-ReactGA.initialize([
-  {
-    trackingId: 'G-XEN77GP035'
-  }
-])
-
-const getEventValueFromMetric = (metric: Metric) => {
-  if (metric.name === 'CLS') {
-    return Math.round(metric.value * 1000)
-  }
-  return Math.round(metric.value)
-}
-
-const reportHandler = (metric: Metric) => {
-  const event = {
-    category: 'Web Vitals',
-    action: metric.name,
-    value: getEventValueFromMetric(metric),
-    label: metric.id,
-    nonInteraction: true
-  }
-
-  if (process.env.NODE_ENV && process.env.NODE_ENV === 'development') {
-    console.log(`[web-vitals-dev] ${metric.name}: ${metric.id}`, metric) // eslint-disable-line no-console
-  } else {
-    ReactGA.event(event)
-  }
-}
-
-reportWebVitals(reportHandler)
+reportWebVitals()

frontend/src/reportWebVitals.ts

@@ -1,15 +1,42 @@
-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)
-    })
+import { Metric } from 'web-vitals'
+import ReactGA from 'react-ga4'
+
+const getEventValueFromMetric = (metric: Metric) => {
+  if (metric.name === 'CLS') {
+    return Math.round(metric.value * 1000)
+  }
+  return Math.round(metric.value)
+}
+
+const reportHandler = (metric: Metric) => {
+  const event = {
+    category: 'Web Vitals',
+    action: metric.name,
+    value: getEventValueFromMetric(metric),
+    label: metric.id,
+    nonInteraction: true
   }
+
+  if (process.env.NODE_ENV && process.env.NODE_ENV === 'development') {
+    console.debug(`[web-vitals-dev] ${event.action}: ${event.value}`, metric) // eslint-disable-line no-console
+  } else {
+    ReactGA.event(event)
+  }
+}
+
+const reportWebVitals = () => {
+  ReactGA.initialize([
+    {
+      trackingId: 'G-XEN77GP035'
+    }
+  ])
+  import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    getCLS(reportHandler)
+    getFID(reportHandler)
+    getFCP(reportHandler)
+    getLCP(reportHandler)
+    getTTFB(reportHandler)
+  })
 }
 
 export default reportWebVitals