From cdabf48f42ddf12c017d5970900e928f1ae9579c Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Thu, 3 Aug 2023 12:57:29 +0200 Subject: [PATCH 01/14] feat(packages/sui-react-web-vitals): add reporting all changes for defined metrics --- packages/sui-react-web-vitals/src/index.js | 63 ++++++++++++++++++++-- 1 file changed, 60 insertions(+), 3 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 91edeed84..403ed3c08 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -1,7 +1,7 @@ import {useContext, useEffect, useRef} from 'react' import PropTypes from 'prop-types' -import * as reporter from 'web-vitals' +import * as reporter from 'web-vitals/attribution' import SUIContext from '@s-ui/react-context' import useMount from '@s-ui/react-hooks/lib/useMount/index.js' @@ -16,6 +16,8 @@ export const METRICS = { FCP: 'FCP' } +const METRICS_REPORTING_ALL_CHANGES = [METRICS.LCP, METRICS.INP] + export const DEVICE_TYPES = { DESKTOP: 'desktop', TABLET: 'tablet', @@ -58,7 +60,58 @@ export default function WebVitalsReporter({ return deviceType || browser?.deviceType } - const handleReport = ({name, value}) => { + const handleAllChanges = ({name, value, attribution}) => { + const pathname = getPathname() + const routeid = getRouteid() + const type = getDeviceType() + const isExcluded = + !pathname || + (Array.isArray(pathnames) && !pathnames.includes(pathname)) || + !METRICS_REPORTING_ALL_CHANGES.includes(name) + + if (isExcluded) { + return + } + + if (!logger?.distribution) { + return + } + + const amount = name === METRICS.CLS ? value * 1000 : value + + logger.distribution({ + name: 'cwv', + amount, + tags: [ + { + key: 'name', + value: name.toLowerCase() + }, + { + key: 'pathname', + value: getNormalizedPathname(pathname) + }, + ...(routeid + ? [ + { + key: 'routeid', + value: routeid + } + ] + : []), + ...(type + ? [ + { + key: 'type', + value: type + } + ] + : []) + ] + }) + } + + const handleChange = ({name, value}) => { const onReport = onReportRef.current const pathname = getPathname() const routeid = getRouteid() @@ -120,7 +173,11 @@ export default function WebVitalsReporter({ } metrics.forEach(metric => { - reporter[`on${metric}`](handleReport) + reporter[`on${metric}`](handleChange) + }) + + metrics.forEach(metric => { + reporter[`on${metric}`](handleAllChanges, {reportAllChanges: true}) }) }) From da322bbd1d2289ab144b043ae56b70f99fb0c1fa Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Thu, 3 Aug 2023 14:55:18 +0200 Subject: [PATCH 02/14] refactor(packages/sui-react-web-vitals): refactor changes --- packages/sui-react-web-vitals/src/index.js | 58 +--------------------- 1 file changed, 2 insertions(+), 56 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 403ed3c08..84cdf40eb 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -60,57 +60,6 @@ export default function WebVitalsReporter({ return deviceType || browser?.deviceType } - const handleAllChanges = ({name, value, attribution}) => { - const pathname = getPathname() - const routeid = getRouteid() - const type = getDeviceType() - const isExcluded = - !pathname || - (Array.isArray(pathnames) && !pathnames.includes(pathname)) || - !METRICS_REPORTING_ALL_CHANGES.includes(name) - - if (isExcluded) { - return - } - - if (!logger?.distribution) { - return - } - - const amount = name === METRICS.CLS ? value * 1000 : value - - logger.distribution({ - name: 'cwv', - amount, - tags: [ - { - key: 'name', - value: name.toLowerCase() - }, - { - key: 'pathname', - value: getNormalizedPathname(pathname) - }, - ...(routeid - ? [ - { - key: 'routeid', - value: routeid - } - ] - : []), - ...(type - ? [ - { - key: 'type', - value: type - } - ] - : []) - ] - }) - } - const handleChange = ({name, value}) => { const onReport = onReportRef.current const pathname = getPathname() @@ -173,11 +122,8 @@ export default function WebVitalsReporter({ } metrics.forEach(metric => { - reporter[`on${metric}`](handleChange) - }) - - metrics.forEach(metric => { - reporter[`on${metric}`](handleAllChanges, {reportAllChanges: true}) + const reportAllChanges = METRICS_REPORTING_ALL_CHANGES.includes(metric) + reporter[`on${metric}`](handleChange, {...reportAllChanges}) }) }) From 6da1b1b541f31247a2d45f19060477c53d25b294 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Thu, 3 Aug 2023 14:56:10 +0200 Subject: [PATCH 03/14] feat(packages/sui-react-web-vitals): add attribution param --- packages/sui-react-web-vitals/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 84cdf40eb..cd55dcd48 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -60,7 +60,7 @@ export default function WebVitalsReporter({ return deviceType || browser?.deviceType } - const handleChange = ({name, value}) => { + const handleChange = ({attribution, name, value}) => { const onReport = onReportRef.current const pathname = getPathname() const routeid = getRouteid() From 70586755f10c7c2955b4d7811c23a8a16b7468c1 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Thu, 3 Aug 2023 17:42:33 +0200 Subject: [PATCH 04/14] feat(packages/sui-react-web-vitals): better way of managing reportAllChanges --- packages/sui-react-web-vitals/src/index.js | 60 ++++++++++++++++++++-- 1 file changed, 57 insertions(+), 3 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index cd55dcd48..5e5c03ddb 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -60,7 +60,60 @@ export default function WebVitalsReporter({ return deviceType || browser?.deviceType } - const handleChange = ({attribution, name, value}) => { + const handleAllChanges = ({attribution, name, value}) => { + const pathname = getPathname() + const routeid = getRouteid() + const type = getDeviceType() + const isExcluded = + !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) + + if (isExcluded) { + return + } + + const amount = name === METRICS.CLS ? value * 1000 : value + + logger.log({ + name: 'cwv', + amount, + tags: [ + { + key: 'name', + value: name.toLowerCase() + }, + { + key: 'pathname', + value: getNormalizedPathname(pathname) + }, + ...(routeid + ? [ + { + key: 'routeid', + value: routeid + } + ] + : []), + ...(type + ? [ + { + key: 'type', + value: type + } + ] + : []), + ...(attribution + ? [ + { + key: 'attribution', + value: attribution + } + ] + : []) + ] + }) + } + + const handleChange = ({name, value}) => { const onReport = onReportRef.current const pathname = getPathname() const routeid = getRouteid() @@ -122,8 +175,9 @@ export default function WebVitalsReporter({ } metrics.forEach(metric => { - const reportAllChanges = METRICS_REPORTING_ALL_CHANGES.includes(metric) - reporter[`on${metric}`](handleChange, {...reportAllChanges}) + reporter[`on${metric}`](handleChange) + if (METRICS_REPORTING_ALL_CHANGES.includes(metric)) + reporter[`on${metric}`](handleAllChanges, {reportAllChanges: true}) }) }) From 086ff83e74da0440b208eac546655ef7c0ddf9bf Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 09:28:19 +0200 Subject: [PATCH 05/14] refactor(packages/sui-react-web-vitals): refactor according to PR comments --- packages/sui-react-web-vitals/src/index.js | 41 +++------------------- 1 file changed, 4 insertions(+), 37 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 5e5c03ddb..c56c7ff2d 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -64,6 +64,7 @@ export default function WebVitalsReporter({ const pathname = getPathname() const routeid = getRouteid() const type = getDeviceType() + const {eventTarget} = attribution || {} const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) @@ -73,43 +74,9 @@ export default function WebVitalsReporter({ const amount = name === METRICS.CLS ? value * 1000 : value - logger.log({ - name: 'cwv', - amount, - tags: [ - { - key: 'name', - value: name.toLowerCase() - }, - { - key: 'pathname', - value: getNormalizedPathname(pathname) - }, - ...(routeid - ? [ - { - key: 'routeid', - value: routeid - } - ] - : []), - ...(type - ? [ - { - key: 'type', - value: type - } - ] - : []), - ...(attribution - ? [ - { - key: 'attribution', - value: attribution - } - ] - : []) - ] + logger.metric({ + label: `cwv|${name.toLowerCase()}|${routeid}|${type}`, + message: `${amount}|${eventTarget}` }) } From 2e2e8705a4d4957ef7de87bc87ae2c89279da665 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 09:42:11 +0200 Subject: [PATCH 06/14] refactor(packages/sui-react-web-vitals): latest refactor to accommodate for CWV_THRESHOLDS --- packages/sui-react-web-vitals/src/index.js | 39 +++++++++++++++------- 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index c56c7ff2d..430bf9f70 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -16,7 +16,12 @@ export const METRICS = { FCP: 'FCP' } -const METRICS_REPORTING_ALL_CHANGES = [METRICS.LCP, METRICS.INP] +const DEFAULT_METRICS_REPORTING_ALL_CHANGES = [METRICS.LCP, METRICS.INP] + +const DEFAULT_CWV_THRESHOLDS = { + [METRICS.LCP]: 2500, + [METRICS.INP]: 200 +} export const DEVICE_TYPES = { DESKTOP: 'desktop', @@ -29,10 +34,12 @@ const getNormalizedPathname = pathname => { } export default function WebVitalsReporter({ - metrics = Object.values(METRICS), - pathnames, + cwvThresholds = DEFAULT_CWV_THRESHOLDS, deviceType, + metrics = Object.values(METRICS), + metricsAllChanges = DEFAULT_METRICS_REPORTING_ALL_CHANGES, onReport, + pathnames, children }) { const {logger, browser} = useContext(SUIContext) @@ -68,12 +75,12 @@ export default function WebVitalsReporter({ const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) - if (isExcluded) { - return - } + if (isExcluded) return const amount = name === METRICS.CLS ? value * 1000 : value + if (amount < cwvThresholds[name]) return + logger.metric({ label: `cwv|${name.toLowerCase()}|${routeid}|${type}`, message: `${amount}|${eventTarget}` @@ -88,9 +95,7 @@ export default function WebVitalsReporter({ const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) - if (isExcluded) { - return - } + if (isExcluded) return if (onReport) { onReport({ @@ -143,7 +148,7 @@ export default function WebVitalsReporter({ metrics.forEach(metric => { reporter[`on${metric}`](handleChange) - if (METRICS_REPORTING_ALL_CHANGES.includes(metric)) + if (DEFAULT_METRICS_REPORTING_ALL_CHANGES.includes(metric)) reporter[`on${metric}`](handleAllChanges, {reportAllChanges: true}) }) }) @@ -153,13 +158,23 @@ export default function WebVitalsReporter({ WebVitalsReporter.propTypes = { /** - * An optional array of core web vitals. Choose between: TTFB, LCP, FID, CLS and INP. Defaults to all. + * An object with METRICS as keys and thresholds as values + * Thresholds by default are those above which Google considers the page as "needs improvement" + * Lower thresholds could be set for fine-tuning, higher thresholds could be set for less noise when reporting all changes */ - metrics: PropTypes.arrayOf(PropTypes.oneOf(Object.values(METRICS))), + cwvThresholds: PropTypes.object, /** * An optional string to identify the device type. Choose between: desktop, tablet and mobile */ deviceType: PropTypes.oneOf(Object.values(DEVICE_TYPES)), + /** + * An optional array of core web vitals. Choose between: TTFB, LCP, FID, CLS and INP. Defaults to all. + */ + metrics: PropTypes.arrayOf(PropTypes.oneOf(Object.values(METRICS))), + /** + * An optional array of core web vitals. Choose between: TTFB, LCP, FID, CLS and INP. Defaults to LCP and INP. + */ + metricsAllChanges: PropTypes.arrayOf(PropTypes.oneOf(Object.values(METRICS))), /** * An optional array of pathnames that you want to track */ From 922f536ce2fef79ba92cfc7c7c36722651e5fbd5 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 09:43:27 +0200 Subject: [PATCH 07/14] refactor(packages/sui-react-web-vitals): device and routeid not needed when collecting data via mush --- packages/sui-react-web-vitals/src/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 430bf9f70..2af72e380 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -69,8 +69,6 @@ export default function WebVitalsReporter({ const handleAllChanges = ({attribution, name, value}) => { const pathname = getPathname() - const routeid = getRouteid() - const type = getDeviceType() const {eventTarget} = attribution || {} const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) @@ -82,7 +80,7 @@ export default function WebVitalsReporter({ if (amount < cwvThresholds[name]) return logger.metric({ - label: `cwv|${name.toLowerCase()}|${routeid}|${type}`, + label: `cwv|${name.toLowerCase()}`, message: `${amount}|${eventTarget}` }) } From 24fbcda3c6817cf45dcfb64526f0db9ff1dadfe5 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 10:13:58 +0200 Subject: [PATCH 08/14] feat(packages/sui-react-web-vitals): add proper thresholds for all metrics --- packages/sui-react-web-vitals/src/index.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 2af72e380..2f0b9a3df 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -8,19 +8,23 @@ import useMount from '@s-ui/react-hooks/lib/useMount/index.js' import {useRouter} from '@s-ui/react-router' export const METRICS = { - TTFB: 'TTFB', - LCP: 'LCP', CLS: 'CLS', + FCP: 'FCP', FID: 'FID', INP: 'INP', - FCP: 'FCP' + LCP: 'LCP', + TTFB: 'TTFB' } const DEFAULT_METRICS_REPORTING_ALL_CHANGES = [METRICS.LCP, METRICS.INP] const DEFAULT_CWV_THRESHOLDS = { + [METRICS.CLS]: 100, + [METRICS.FCP]: 1800, + [METRICS.FID]: 100, + [METRICS.INP]: 200, [METRICS.LCP]: 2500, - [METRICS.INP]: 200 + [METRICS.TTFB]: 800 } export const DEVICE_TYPES = { From 9c047fc0fc49c26916a67343abdfa3ff04c9bc99 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 10:25:24 +0200 Subject: [PATCH 09/14] docs(packages/sui-react-web-vitals): add comment on prop --- packages/sui-react-web-vitals/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 2f0b9a3df..6a365d5f5 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -174,7 +174,7 @@ WebVitalsReporter.propTypes = { */ metrics: PropTypes.arrayOf(PropTypes.oneOf(Object.values(METRICS))), /** - * An optional array of core web vitals. Choose between: TTFB, LCP, FID, CLS and INP. Defaults to LCP and INP. + * An optional array of core web vitals that will report on all changes. Choose between: TTFB, LCP, FID, CLS and INP. Defaults to LCP and INP. */ metricsAllChanges: PropTypes.arrayOf(PropTypes.oneOf(Object.values(METRICS))), /** From 93e650a8bac2164ca2caa8ca108015e70bb8fc6d Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 17:29:08 +0200 Subject: [PATCH 10/14] refactor(packages/sui-react-web-vitals): rename prop to thresholds --- packages/sui-react-web-vitals/src/index.js | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 6a365d5f5..301e5e2ba 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -38,13 +38,13 @@ const getNormalizedPathname = pathname => { } export default function WebVitalsReporter({ - cwvThresholds = DEFAULT_CWV_THRESHOLDS, + children, deviceType, metrics = Object.values(METRICS), metricsAllChanges = DEFAULT_METRICS_REPORTING_ALL_CHANGES, onReport, pathnames, - children + thresholds = DEFAULT_CWV_THRESHOLDS }) { const {logger, browser} = useContext(SUIContext) const router = useRouter() @@ -81,7 +81,7 @@ export default function WebVitalsReporter({ const amount = name === METRICS.CLS ? value * 1000 : value - if (amount < cwvThresholds[name]) return + if (amount < thresholds[name]) return logger.metric({ label: `cwv|${name.toLowerCase()}`, @@ -160,11 +160,9 @@ export default function WebVitalsReporter({ WebVitalsReporter.propTypes = { /** - * An object with METRICS as keys and thresholds as values - * Thresholds by default are those above which Google considers the page as "needs improvement" - * Lower thresholds could be set for fine-tuning, higher thresholds could be set for less noise when reporting all changes + * An optional children node */ - cwvThresholds: PropTypes.object, + children: PropTypes.node, /** * An optional string to identify the device type. Choose between: desktop, tablet and mobile */ @@ -177,16 +175,18 @@ WebVitalsReporter.propTypes = { * An optional array of core web vitals that will report on all changes. Choose between: TTFB, LCP, FID, CLS and INP. Defaults to LCP and INP. */ metricsAllChanges: PropTypes.arrayOf(PropTypes.oneOf(Object.values(METRICS))), - /** - * An optional array of pathnames that you want to track - */ - pathnames: PropTypes.arrayOf(PropTypes.string), /** * An optional callback to be used to track core web vitals */ onReport: PropTypes.func, /** - * An optional children node + * An optional array of pathnames that you want to track + */ + pathnames: PropTypes.arrayOf(PropTypes.string), + /** + * An object with METRICS as keys and thresholds as values + * Thresholds by default are those above which Google considers the page as "needs improvement" + * Lower thresholds could be set for fine-tuning, higher thresholds could be set for less noise when reporting all changes */ - children: PropTypes.node + thresholds: PropTypes.object } From 1d7c76ff7c9a2d775eef49f8802ffaf1b6f8e000 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Fri, 4 Aug 2023 18:10:07 +0200 Subject: [PATCH 11/14] feat(packages/sui-react-web-vitals): adding attribution as tags on metric --- packages/sui-react-web-vitals/src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 301e5e2ba..0880e866f 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -73,7 +73,6 @@ export default function WebVitalsReporter({ const handleAllChanges = ({attribution, name, value}) => { const pathname = getPathname() - const {eventTarget} = attribution || {} const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) @@ -84,8 +83,8 @@ export default function WebVitalsReporter({ if (amount < thresholds[name]) return logger.metric({ - label: `cwv|${name.toLowerCase()}`, - message: `${amount}|${eventTarget}` + name: `cwv|${name.toLowerCase()}`, + tags: {amount, ...attribution} }) } From 8650707c1fc6c63651ccad51d8d70104d1d352dc Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Sat, 5 Aug 2023 11:55:57 +0200 Subject: [PATCH 12/14] refactor(packages/sui-react-web-vitals): refactor early return statements --- packages/sui-react-web-vitals/src/index.js | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 0880e866f..55b5a6571 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -72,15 +72,12 @@ export default function WebVitalsReporter({ } const handleAllChanges = ({attribution, name, value}) => { + const amount = name === METRICS.CLS ? value * 1000 : value const pathname = getPathname() const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) - if (isExcluded) return - - const amount = name === METRICS.CLS ? value * 1000 : value - - if (amount < thresholds[name]) return + if (isExcluded || !logger?.metric || amount < thresholds[name]) return logger.metric({ name: `cwv|${name.toLowerCase()}`, @@ -109,9 +106,7 @@ export default function WebVitalsReporter({ return } - if (!logger?.distribution) { - return - } + if (!logger?.distribution) return const amount = name === METRICS.CLS ? value * 1000 : value From 3e4726e6516cb30c644847e8cc941b58734642e6 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Mon, 7 Aug 2023 15:28:45 +0200 Subject: [PATCH 13/14] feat(packages/sui-react-web-vitals): use logger.log instead of logger.metric --- packages/sui-react-web-vitals/src/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index 55b5a6571..aa7aa9e0f 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -77,12 +77,14 @@ export default function WebVitalsReporter({ const isExcluded = !pathname || (Array.isArray(pathnames) && !pathnames.includes(pathname)) - if (isExcluded || !logger?.metric || amount < thresholds[name]) return + if (isExcluded || !logger?.log || amount < thresholds[name]) return - logger.metric({ - name: `cwv|${name.toLowerCase()}`, - tags: {amount, ...attribution} - }) + logger.log( + JSON.stringify({ + name: `cwv|${name.toLowerCase()}`, + tags: {amount, ...attribution} + }) + ) } const handleChange = ({name, value}) => { From e9b198051cfa4518b79cddbb677da964ee00cae0 Mon Sep 17 00:00:00 2001 From: "jordi.munoz@adevinta.com" Date: Tue, 8 Aug 2023 12:21:23 +0200 Subject: [PATCH 14/14] refactor(packages/sui-react-web-vitals): refactor code as per PR comments --- packages/sui-react-web-vitals/src/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/sui-react-web-vitals/src/index.js b/packages/sui-react-web-vitals/src/index.js index aa7aa9e0f..8f072ca10 100644 --- a/packages/sui-react-web-vitals/src/index.js +++ b/packages/sui-react-web-vitals/src/index.js @@ -81,8 +81,9 @@ export default function WebVitalsReporter({ logger.log( JSON.stringify({ - name: `cwv|${name.toLowerCase()}`, - tags: {amount, ...attribution} + name: `cwv.${name.toLowerCase()}`, + amount, + ...attribution }) ) }