feat(replay): Use SDK value for LCP

static/app/components/replays/breadcrumbs/utils.tsx

@@ -1,14 +1,30 @@
+import {Tooltip} from 'sentry/components/tooltip';
+import {IconWarning} from 'sentry/icons';
+import {t} from 'sentry/locale';
 import {BreadcrumbType, Crumb} from 'sentry/types/breadcrumbs';
 
 /**
  * Generate breadcrumb descriptions based on type
  */
-export function getDescription(crumb: Crumb, startTimestampMs?: number) {
+export function getDescription(crumb: Crumb) {
   if (typeof crumb.data === 'object' && crumb.data !== null && 'action' in crumb.data) {
     switch (crumb.data.action) {
       case 'largest-contentful-paint':
-        if (crumb.timestamp && startTimestampMs) {
-          return `${new Date(crumb.timestamp).getTime() - startTimestampMs}ms`;
+        if (crumb.data?.value !== undefined) {
+          return `${Math.round(crumb.data.value)}ms`;
+        }
+        if (crumb.data?.duration !== undefined) {
+          // this means user is using an old SDK where LCP values are not
+          // always correct. Prompt them to upgrade
+          return (
+            <Tooltip
+              title={t(
+                'This replay uses a SDK version that is subject to inaccurate LCP values. Please upgrade to the latest version for best results if you have not already done so.'
+              )}
+            >
+              <IconWarning />
+            </Tooltip>
+          );
         }
         break;
       default:
@@ -50,6 +66,6 @@ export function getTitle(crumb: Crumb) {
 /**
  * Generate breadcrumb title + descriptions
  */
-export function getDetails(crumb: Crumb, startTimestampMs?: number) {
-  return {title: getTitle(crumb), description: getDescription(crumb, startTimestampMs)};
+export function getDetails(crumb: Crumb) {
+  return {title: getTitle(crumb), description: getDescription(crumb)};
 }

static/app/views/replays/detail/breadcrumbs/breadcrumbItem.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import BreadcrumbIcon from 'sentry/components/events/interfaces/breadcrumbs/breadcrumb/type/icon';
 import {PanelItem} from 'sentry/components/panels';
 import {getDetails} from 'sentry/components/replays/breadcrumbs/utils';
+import {Tooltip} from 'sentry/components/tooltip';
 import {SVGIconProps} from 'sentry/icons/svgIcon';
 import {space} from 'sentry/styles/space';
 import type {Crumb} from 'sentry/types/breadcrumbs';
@@ -32,7 +33,7 @@ function BreadcrumbItem({
   onMouseLeave,
   onClick,
 }: Props) {
-  const {title, description} = getDetails(crumb, startTimestampMs);
+  const {title, description} = getDetails(crumb);
 
   const handleMouseEnter = useCallback(
     (e: React.MouseEvent<HTMLElement>) => onMouseEnter && onMouseEnter(crumb, e),
@@ -74,7 +75,9 @@ function BreadcrumbItem({
           ) : null}
         </TitleContainer>
 
-        <Description title={description}>{description}</Description>
+        <Tooltip title={description} showOnlyOnOverflow>
+          <Description>{description}</Description>
+        </Tooltip>
       </CrumbDetails>
     </CrumbItem>
   );