feat(issues): Scroll to current transaction in trace preview (#77262)

getsentry · Sep 12, 2024 · 6a038e4 · 6a038e4
1 parent 2cd4bb7
commit 6a038e4
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 14 deletions.
diff --git a/static/app/components/events/interfaces/performance/eventTraceView.tsx b/static/app/components/events/interfaces/performance/eventTraceView.tsx
@@ -28,7 +28,7 @@ import {SpanEvidenceKeyValueList} from './spanEvidenceKeyValueList';
 
 const DEFAULT_ISSUE_DETAILS_TRACE_VIEW_PREFERENCES: TracePreferencesState = {
   drawer: {
-    minimized: false,
+    minimized: true,
     sizes: {
       'drawer left': 0.33,
       'drawer right': 0.33,
@@ -109,6 +109,15 @@ function EventTraceViewInner({
             metaResults={meta}
             source="issues"
             replayRecord={null}
+            scrollToNode={
+              trace.data?.transactions[0]?.event_id
+                ? {
+                    // Scroll/highlight the current transaction
+                    path: [`txn-${trace.data.transactions[0].event_id}`],
+                  }
+                : undefined
+            }
+            isEmbedded
           />
         </TraceViewWaterfallWrapper>
       </TraceStateProvider>
@@ -158,5 +167,5 @@ export function EventTraceView({
 const TraceViewWaterfallWrapper = styled('div')`
   display: flex;
   flex-direction: column;
-  height: 750px;
+  height: 500px;
 `;
diff --git a/static/app/views/performance/newTraceDetails/index.tsx b/static/app/views/performance/newTraceDetails/index.tsx
@@ -240,6 +240,7 @@ export function TraceView() {
                 metaResults={meta}
                 replayRecord={null}
                 source="performance"
+                isEmbedded={false}
               />
             </TraceInnerLayout>
           </TraceExternalLayout>
@@ -260,6 +261,7 @@ const VITALS_TAB: TraceReducerState['tabs']['tabs'][0] = {
 };
 
 type TraceViewWaterfallProps = {
+  isEmbedded: boolean;
   metaResults: TraceMetaQueryResults;
   organization: Organization;
   replayRecord: ReplayRecord | null;
@@ -270,6 +272,11 @@ type TraceViewWaterfallProps = {
   traceEventView: EventView;
   traceSlug: string | undefined;
   replayTraces?: ReplayTrace[];
+  /**
+   * Ignore eventId or path query parameters and use the provided node.
+   * Must be set at component mount, no reactivity
+   */
+  scrollToNode?: {eventId?: string; path?: TraceTree.NodePath[]};
 };
 
 export function TraceViewWaterfall(props: TraceViewWaterfallProps) {
@@ -298,17 +305,25 @@ export function TraceViewWaterfall(props: TraceViewWaterfallProps) {
 
   const initializedRef = useRef(false);
   const scrollQueueRef = useRef<
-    {eventId?: string; path?: TraceTree.NodePath[]} | null | undefined
+    TraceViewWaterfallProps['scrollToNode'] | null | undefined
   >(undefined);
 
   if (scrollQueueRef.current === undefined) {
-    const queryParams = qs.parse(location.search);
-    const maybeQueue = decodeScrollQueue(queryParams.node);
+    let scrollToNode: TraceViewWaterfallProps['scrollToNode'] = props.scrollToNode;
+    if (!props.scrollToNode) {
+      const queryParams = qs.parse(location.search);
+      scrollToNode = {
+        eventId: queryParams.eventId as string | undefined,
+        path: decodeScrollQueue(
+          queryParams.node
+        ) as TraceTreeNode<TraceTree.NodeValue>['path'],
+      };
+    }
 
-    if (maybeQueue || queryParams.eventId) {
+    if (scrollToNode && (scrollToNode.path || scrollToNode.eventId)) {
       scrollQueueRef.current = {
-        eventId: queryParams.eventId as string,
-        path: maybeQueue as TraceTreeNode<TraceTree.NodeValue>['path'],
+        eventId: scrollToNode.eventId as string,
+        path: scrollToNode.path,
       };
     } else {
       scrollQueueRef.current = null;
@@ -1010,6 +1025,7 @@ export function TraceViewWaterfall(props: TraceViewWaterfallProps) {
           manager={viewManager}
           scheduler={traceScheduler}
           forceRerender={forceRender}
+          isEmbedded={props.isEmbedded}
         />
 
         {tree.type === 'error' ? (

diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx
@@ -144,6 +144,7 @@ function maybeFocusRow(
 interface TraceProps {
   forceRerender: number;
   initializedRef: React.MutableRefObject<boolean>;
+  isEmbedded: boolean;
   manager: VirtualizedViewManager;
   onRowClick: (
     node: TraceTreeNode<TraceTree.NodeValue>,
@@ -188,6 +189,7 @@ export function Trace({
   initializedRef,
   forceRerender,
   trace_id,
+  isEmbedded,
 }: TraceProps) {
   const theme = useTheme();
   const api = useApi();
@@ -455,6 +457,7 @@ export function Trace({
           onRowKeyDown={onRowKeyDown}
           tree={trace}
           trace_id={trace_id}
+          isEmbedded={isEmbedded}
         />
       );
     },
@@ -584,6 +587,7 @@ export function Trace({
 
 function RenderRow(props: {
   index: number;
+  isEmbedded: boolean;
   isSearchResult: boolean;
   manager: VirtualizedViewManager;
   node: TraceTreeNode<TraceTree.NodeValue>;
@@ -701,7 +705,7 @@ function RenderRow(props: {
       <div
         key={props.index}
         ref={r =>
-          props.tabIndex === 0
+          props.tabIndex === 0 && !props.isEmbedded
             ? maybeFocusRow(r, props.node, props.previouslyFocusedNodeRef)
             : null
         }
@@ -769,7 +773,7 @@ function RenderRow(props: {
       <div
         key={props.index}
         ref={r =>
-          props.tabIndex === 0
+          props.tabIndex === 0 && !props.isEmbedded
             ? maybeFocusRow(r, props.node, props.previouslyFocusedNodeRef)
             : null
         }
@@ -858,7 +862,7 @@ function RenderRow(props: {
       <div
         key={props.index}
         ref={r =>
-          props.tabIndex === 0
+          props.tabIndex === 0 && !props.isEmbedded
             ? maybeFocusRow(r, props.node, props.previouslyFocusedNodeRef)
             : null
         }
@@ -944,7 +948,7 @@ function RenderRow(props: {
       <div
         key={props.index}
         ref={r =>
-          props.tabIndex === 0
+          props.tabIndex === 0 && !props.isEmbedded
             ? maybeFocusRow(r, props.node, props.previouslyFocusedNodeRef)
             : null
         }
@@ -994,7 +998,7 @@ function RenderRow(props: {
       <div
         key={props.index}
         ref={r =>
-          props.tabIndex === 0
+          props.tabIndex === 0 && !props.isEmbedded
             ? maybeFocusRow(r, props.node, props.previouslyFocusedNodeRef)
             : null
         }
@@ -1069,7 +1073,7 @@ function RenderRow(props: {
       <div
         key={props.index}
         ref={r =>
-          props.tabIndex === 0
+          props.tabIndex === 0 && !props.isEmbedded
             ? maybeFocusRow(r, props.node, props.previouslyFocusedNodeRef)
             : null
         }

diff --git a/static/app/views/replays/detail/trace/trace.tsx b/static/app/views/replays/detail/trace/trace.tsx
@@ -226,6 +226,8 @@ export function NewTraceView({replayRecord}: {replayRecord: undefined | ReplayRe
           metaResults={metaResults}
           source="replay"
           replayRecord={replayRecord}
+          // Replays might want to enable this in the future
+          isEmbedded={false}
         />
       </TraceViewWaterfallWrapper>
     </TraceStateProvider>