fix: Fix span details showing incorrect span start info (#689)

getsentry · Feb 4, 2025 · 289a040 · 289a040
1 parent 0fcb37d
commit 289a040
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/many-coats-return.md b/.changeset/many-coats-return.md
@@ -0,0 +1,8 @@
+---
+'@spotlightjs/spotlight': patch
+'@spotlightjs/electron': patch
+'@spotlightjs/overlay': patch
+'@spotlightjs/astro': patch
+---
+
+Fix span details showing incorrect span start time
diff --git a/packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/explore/traces/spans/SpanDetails.tsx
@@ -86,6 +86,7 @@ export default function SpanDetails({
   totalDuration: number;
 }) {
   const [spanNodeWidth, setSpanNodeWidth] = useState<number>(50);
+  const spanRelativeStart = span.start_timestamp - startTimestamp;
 
   const spanDuration = span.timestamp - span.start_timestamp;
 
@@ -115,15 +116,15 @@ export default function SpanDetails({
               <DateTime date={span.start_timestamp} />
               <span>&mdash;</span>
               <span>
-                <strong>{getFormattedDuration(spanDuration)}</strong> into trace
+                <strong>{getFormattedDuration(spanRelativeStart)}</strong> into trace
               </span>
             </div>
             <div className="flex-1">
               <div className="border-primary-800 relative h-8 border py-1">
                 <div
                   className="bg-primary-800 absolute bottom-0 top-0 -m-0.5 flex w-full items-center p-0.5"
                   style={{
-                    left: `min(${(spanDuration / totalDuration) * 100}%, 100% - 1px)`,
+                    left: `min(${(spanRelativeStart / totalDuration) * 100}%, 100% - 1px)`,
                     width: `max(1px, ${(spanDuration / totalDuration) * 100}%)`,
                   }}
                 >