Merge pull request #1724 from SUI-Components/feat/web-vitals-device-data

feat(packages/sui-react-web-vitals): add some device data to sent to Open Search

Author: Joan León

packages/sui-react-web-vitals/src/index.js

@@ -57,6 +57,8 @@ export default function WebVitalsReporter({
   }, [onReport])
 
   useMount(() => {
+    const {deviceMemory, connection: {effectiveType} = {}, hardwareConcurrency} = window.navigator || {}
+
     const getRouteid = () => {
       return route?.id
     }
@@ -102,16 +104,20 @@ export default function WebVitalsReporter({
       if (!isAllowed || !logger?.cwv || rating === RATING.GOOD) return
 
       const target = getTarget({name, attribution})
+      const {loadState, eventType} = attribution
 
       logger.cwv({
         name: `cwv.${name.toLowerCase()}`,
         amount,
         path: pathname,
-        ...(routeid && {routeId: routeid}),
         target,
-        loadState: attribution.loadState,
         visibilityState: document.visibilityState,
-        ...(attribution.eventType && {eventType: attribution.eventType})
+        ...(routeid && {routeId: routeid}),
+        ...(loadState && {loadState}),
+        ...(eventType && {eventType}),
+        ...(deviceMemory && {deviceMemory}),
+        ...(effectiveType && {effectiveType}),
+        ...(hardwareConcurrency && {hardwareConcurrency})
       })
     }
 

packages/sui-react-web-vitals/test/browser/indexSpec.js

@@ -278,4 +278,44 @@ describe('WebVitalsReporter', () => {
       ).to.be.true
     ])
   })
+
+  it.skip('should track inp with deviceMemory, networkConnection, and hardwareConcurrency using logger cwv', async () => {
+    // Mocking the visibilityState
+    Object.defineProperty(window.document, 'visibilityState', {value: 'hidden', writable: false})
+
+    const logger = {
+      cwv: sinon.spy()
+    }
+
+    const reporter = {
+      onINP: fn => {
+        fn({
+          attribution: {eventType: 'body'},
+          deviceMemory: 8,
+          effectiveType: '4g',
+          hardwareConcurrency: 10,
+          name: 'INP',
+          rating: 'poor',
+          value: 304
+        })
+      }
+    }
+
+    render(<WebVitalsReporter metrics={[METRICS.INP]} allowed={['/']} reporter={reporter} />, {logger})
+    await waitFor(() => [
+      expect(
+        logger.cwv.calledOnceWithMatch({
+          name: 'cwv.inp',
+          amount: 304,
+          path: '/',
+          target: undefined,
+          visibilityState: 'hidden',
+          eventType: 'body',
+          deviceMemory: 8,
+          effectiveType: '4g',
+          hardwareConcurrency: 10
+        })
+      ).to.be.true
+    ])
+  })
 })