From 57e2d4c4e670be1a8a61e1f91ad94c38021a060f Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Thu, 12 Sep 2024 11:18:14 -0400 Subject: [PATCH 1/2] fix typo --- static/app/utils/replays/getFrameDetails.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/static/app/utils/replays/getFrameDetails.tsx b/static/app/utils/replays/getFrameDetails.tsx index 5720b198c218b..48a7ff18ecbc3 100644 --- a/static/app/utils/replays/getFrameDetails.tsx +++ b/static/app/utils/replays/getFrameDetails.tsx @@ -286,8 +286,9 @@ const MAPPER_FOR_FRAME: Record Details> = { case 'good': return { color: 'green300', - description: tct('[value]ms (Good)', { + description: tct('[value][ms] (Good)', { value: frame.data.value.toFixed(2), + ms: frame.description === 'cumulative-layout-shift' ? '' : 'ms', }), tabKey: TabKey.NETWORK, title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)), @@ -296,8 +297,9 @@ const MAPPER_FOR_FRAME: Record Details> = { case 'needs-improvement': return { color: 'yellow300', - description: tct('[value]ms (Meh)', { + description: tct('[value][ms] (Meh)', { value: frame.data.value.toFixed(2), + ms: frame.description === 'cumulative-layout-shift' ? '' : 'ms', }), tabKey: TabKey.NETWORK, title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)), @@ -306,8 +308,9 @@ const MAPPER_FOR_FRAME: Record Details> = { default: return { color: 'red300', - description: tct('[value]ms (Poor)', { + description: tct('[value][ms] (Poor)', { value: frame.data.value.toFixed(2), + ms: frame.description === 'cumulative-layout-shift' ? '' : 'ms', }), tabKey: TabKey.NETWORK, title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)), From 307d57c24dadfb15b3766f1ae8e9ce373e07bb18 Mon Sep 17 00:00:00 2001 From: Catherine Lee <55311782+c298lee@users.noreply.github.com> Date: Thu, 12 Sep 2024 11:44:04 -0400 Subject: [PATCH 2/2] pr comments --- .../replays/breadcrumbs/breadcrumbItem.tsx | 7 ++----- static/app/utils/replays/getFrameDetails.tsx | 13 +++++++------ static/app/utils/replays/replayReader.tsx | 11 ++++++----- static/app/utils/replays/types.tsx | 4 ++++ 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx index 5b0fb28f1b191..ccbff2e2dcf86 100644 --- a/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx +++ b/static/app/components/replays/breadcrumbs/breadcrumbItem.tsx @@ -34,6 +34,7 @@ import type { } from 'sentry/utils/replays/types'; import { isBreadcrumbFrame, + isCLSFrame, isErrorFrame, isFeedbackFrame, isHydrationErrorFrame, @@ -237,11 +238,7 @@ function WebVitalData({ const selectors = frameToExtraction?.get(frame)?.selectors; const webVitalData = {value: frame.data.value}; - if ( - frame.description === 'cumulative-layout-shift' && - frame.data.attributions && - selectors - ) { + if (isCLSFrame(frame) && frame.data.attributions && selectors) { const layoutShifts: {[x: string]: ReactNode[]}[] = []; for (const attr of frame.data.attributions) { const elements: ReactNode[] = []; diff --git a/static/app/utils/replays/getFrameDetails.tsx b/static/app/utils/replays/getFrameDetails.tsx index 48a7ff18ecbc3..79b5cd12a83e0 100644 --- a/static/app/utils/replays/getFrameDetails.tsx +++ b/static/app/utils/replays/getFrameDetails.tsx @@ -44,6 +44,7 @@ import type { } from 'sentry/utils/replays/types'; import { getFrameOpOrCategory, + isCLSFrame, isDeadClick, isDeadRageClick, isRageClick, @@ -286,9 +287,9 @@ const MAPPER_FOR_FRAME: Record Details> = { case 'good': return { color: 'green300', - description: tct('[value][ms] (Good)', { + description: tct('[value][unit] (Good)', { value: frame.data.value.toFixed(2), - ms: frame.description === 'cumulative-layout-shift' ? '' : 'ms', + unit: isCLSFrame(frame) ? '' : 'ms', }), tabKey: TabKey.NETWORK, title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)), @@ -297,9 +298,9 @@ const MAPPER_FOR_FRAME: Record Details> = { case 'needs-improvement': return { color: 'yellow300', - description: tct('[value][ms] (Meh)', { + description: tct('[value][unit] (Meh)', { value: frame.data.value.toFixed(2), - ms: frame.description === 'cumulative-layout-shift' ? '' : 'ms', + unit: isCLSFrame(frame) ? '' : 'ms', }), tabKey: TabKey.NETWORK, title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)), @@ -308,9 +309,9 @@ const MAPPER_FOR_FRAME: Record Details> = { default: return { color: 'red300', - description: tct('[value][ms] (Poor)', { + description: tct('[value][unit] (Poor)', { value: frame.data.value.toFixed(2), - ms: frame.description === 'cumulative-layout-shift' ? '' : 'ms', + unit: isCLSFrame(frame) ? '' : 'ms', }), tabKey: TabKey.NETWORK, title: 'Web Vital: ' + toTitleCase(explodeSlug(frame.description)), diff --git a/static/app/utils/replays/replayReader.tsx b/static/app/utils/replays/replayReader.tsx index 318c3f59c2fa9..87c8bd7739a81 100644 --- a/static/app/utils/replays/replayReader.tsx +++ b/static/app/utils/replays/replayReader.tsx @@ -41,6 +41,7 @@ import { EventType, getNodeIds, IncrementalSource, + isCLSFrame, isDeadClick, isDeadRageClick, isPaintFrame, @@ -637,12 +638,12 @@ export default class ReplayReader { let lastTimestamp = 0; const groupedCls: WebVitalFrame[] = []; - for (const cls of allWebVitals) { - if (cls.description === 'cumulative-layout-shift') { - if (lastTimestamp === cls.timestampMs) { - groupedCls.push(cls); + for (const frame of allWebVitals) { + if (isCLSFrame(frame)) { + if (lastTimestamp === frame.timestampMs) { + groupedCls.push(frame); } else { - lastTimestamp = cls.timestampMs; + lastTimestamp = frame.timestampMs; } } } diff --git a/static/app/utils/replays/types.tsx b/static/app/utils/replays/types.tsx index d83cf02a2fff1..cd7c710fdad96 100644 --- a/static/app/utils/replays/types.tsx +++ b/static/app/utils/replays/types.tsx @@ -202,6 +202,10 @@ export function isWebVitalFrame(frame: SpanFrame): frame is WebVitalFrame { return frame.op === 'web-vital'; } +export function isCLSFrame(frame: WebVitalFrame): frame is WebVitalFrame { + return frame.description === 'cumulative-layout-shift'; +} + export function isPaintFrame(frame: SpanFrame): frame is PaintFrame { return frame.op === 'paint'; }