fix(trace): rerun effect when coming from cached request (#71404)

We need to ensure qs path is initialized sync and before the children components render
getsentry · May 28, 2024 · 0f33b0b · 0f33b0b
1 parent bd47227
commit 0f33b0b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/static/app/views/performance/newTraceDetails/index.tsx b/static/app/views/performance/newTraceDetails/index.tsx
@@ -247,9 +247,23 @@ function TraceViewContent(props: TraceViewContentProps) {
   }, []);
 
   const initializedRef = useRef(false);
-  const scrollQueueRef = useRef<{eventId?: string; path?: TraceTree.NodePath[]} | null>(
-    null
-  );
+  const scrollQueueRef = useRef<
+    {eventId?: string; path?: TraceTree.NodePath[]} | null | undefined
+  >(undefined);
+
+  if (scrollQueueRef.current === undefined) {
+    const queryParams = qs.parse(location.search);
+    const maybeQueue = decodeScrollQueue(queryParams.node);
+
+    if (maybeQueue || queryParams.eventId) {
+      scrollQueueRef.current = {
+        eventId: queryParams.eventId as string,
+        path: maybeQueue as TraceTreeNode<TraceTree.NodeValue>['path'],
+      };
+    } else {
+      scrollQueueRef.current = null;
+    }
+  }
 
   const previouslyFocusedNodeRef = useRef<TraceTreeNode<TraceTree.NodeValue> | null>(
     null
@@ -397,18 +411,6 @@ function TraceViewContent(props: TraceViewContentProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tree]);
 
-  useLayoutEffect(() => {
-    const queryParams = qs.parse(location.search);
-    const maybeQueue = decodeScrollQueue(queryParams.node);
-
-    if (maybeQueue || queryParams.eventId) {
-      scrollQueueRef.current = {
-        eventId: queryParams.eventId as string,
-        path: maybeQueue as TraceTreeNode<TraceTree.NodeValue>['path'],
-      };
-    }
-  }, [tree]);
-
   const searchingRaf = useRef<{id: number | null} | null>(null);
   const onTraceSearch = useCallback(
     (
@@ -843,7 +845,6 @@ function TraceViewContent(props: TraceViewContentProps) {
       return undefined;
     }
 
-    initializedRef.current = true;
     viewManager.initializeTraceSpace([tree.root.space[0], 0, tree.root.space[1], 1]);
 
     // Whenever the timeline changes, update the trace space

diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx
@@ -150,10 +150,14 @@ interface TraceProps {
   ) => void;
   previouslyFocusedNodeRef: React.MutableRefObject<TraceTreeNode<TraceTree.NodeValue> | null>;
   rerender: () => void;
-  scrollQueueRef: React.MutableRefObject<{
-    eventId?: string;
-    path?: TraceTree.NodePath[];
-  } | null>;
+  scrollQueueRef: React.MutableRefObject<
+    | {
+        eventId?: string;
+        path?: TraceTree.NodePath[];
+      }
+    | null
+    | undefined
+  >;
   trace: TraceTree;
   trace_dispatch: React.Dispatch<TraceReducerAction>;
   trace_id: string;