feat(linkedTraces): Add link to next trace (#89016)

Showing "Next Trace" in the trace view. This is a temporary solution as
it is not super performant. It's getting all root spans within a
specified timeframe (e.g. 1h) and searches for the trace that has the
current trace as linked "previous trace".


![image](https://github.com/user-attachments/assets/12854fe9-f2e2-4b77-b44c-9908d8370237)

Author: s1gr1d

static/app/views/insights/types.tsx

@@ -363,6 +363,7 @@ export type SpanIndexedResponse = {
   [SpanIndexedField.USER_USERNAME]: string;
   [SpanIndexedField.USER_IP]: string;
   [SpanIndexedField.USER_DISPLAY]: string;
+  [SpanIndexedField.IS_TRANSACTION]: number;
   [SpanIndexedField.INP]: number;
   [SpanIndexedField.INP_SCORE]: number;
   [SpanIndexedField.INP_SCORE_WEIGHT]: number;

static/app/views/performance/newTraceDetails/traceContextPanel.tsx

@@ -54,6 +54,16 @@ export function TraceContextPanel({tree, rootEvent}: Props) {
               end: rootEvent.data?.endTimestamp,
             }}
           />
+          <TraceLinkNavigationButton
+            direction={'next'}
+            isLoading={rootEvent.isLoading}
+            projectID={rootEvent.data?.projectID ?? ''}
+            traceContext={rootEvent.data?.contexts.trace}
+            currentTraceTimestamps={{
+              start: rootEvent.data?.startTimestamp,
+              end: rootEvent.data?.endTimestamp,
+            }}
+          />
         </TraceLinksNavigationContainer>
       )}
 

static/app/views/performance/newTraceDetails/traceLinksNavigation/traceLinkNavigationButton.tsx

@@ -15,32 +15,32 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useTrace} from 'sentry/views/performance/newTraceDetails/traceApi/useTrace';
 import {isEmptyTrace} from 'sentry/views/performance/newTraceDetails/traceApi/utils';
+import {useFindNextTrace} from 'sentry/views/performance/newTraceDetails/traceLinksNavigation/useFindNextTrace';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
-// Currently, we only support previous but component can be used for 'next trace' in the future
-type ConnectedTraceConnection = 'previous'; // | 'next';
+export type ConnectedTraceConnection = 'previous' | 'next';
 
 const LINKED_TRACE_MAX_DURATION = 3600; // 1h in seconds
 
 function useIsTraceAvailable(
-  traceLink?: SpanLink,
-  previousTraceTimestamp?: number
+  traceID?: SpanLink['trace_id'],
+  linkedTraceTimestamp?: number
 ): {
   isAvailable: boolean;
   isLoading: boolean;
 } {
   const trace = useTrace({
-    traceSlug: traceLink?.trace_id,
-    timestamp: previousTraceTimestamp,
+    traceSlug: traceID,
+    timestamp: linkedTraceTimestamp,
   });
 
   const isAvailable = useMemo(() => {
-    if (!traceLink) {
+    if (!traceID) {
       return false;
     }
 
     return Boolean(trace.data && !isEmptyTrace(trace.data));
-  }, [traceLink, trace]);
+  }, [traceID, trace]);
 
   return {
     isAvailable,
@@ -52,37 +52,47 @@ type TraceLinkNavigationButtonProps = {
   currentTraceTimestamps: {end?: number; start?: number};
   direction: ConnectedTraceConnection;
   isLoading?: boolean;
+  projectID?: string;
   traceContext?: TraceContextType;
 };
 
 export function TraceLinkNavigationButton({
   direction,
   traceContext,
   isLoading,
+  projectID,
   currentTraceTimestamps,
 }: TraceLinkNavigationButtonProps) {
   const organization = useOrganization();
   const location = useLocation();
 
-  const traceLink = traceContext?.links?.find(
-    link => link.attributes?.['sentry.link.type'] === `${direction}_trace`
-  );
-
   // We connect traces over a 1h period - As we don't have timestamps of the linked trace, it is calculated based on this timeframe
   const linkedTraceTimestamp =
     direction === 'previous' && currentTraceTimestamps.start
-      ? currentTraceTimestamps.start - LINKED_TRACE_MAX_DURATION // Earliest start times of previous trace
-      : // : direction === 'next' && currentTraceTimestamps.end
-        // ? currentTraceTimestamps.end + LINKED_TRACE_MAX_DURATION
-        undefined;
+      ? currentTraceTimestamps.start - LINKED_TRACE_MAX_DURATION // Earliest start time of previous trace (- 1h)
+      : direction === 'next' && currentTraceTimestamps.end
+        ? currentTraceTimestamps.end + LINKED_TRACE_MAX_DURATION // Latest end time of next trace (+ 1h)
+        : undefined;
+
+  const previousTraceLink = traceContext?.links?.find(
+    link => link.attributes?.['sentry.link.type'] === `${direction}_trace`
+  );
+
+  const nextTraceData = useFindNextTrace({
+    direction,
+    currentTraceID: traceContext?.trace_id,
+    linkedTraceStartTimestamp: currentTraceTimestamps.end,
+    linkedTraceEndTimestamp: linkedTraceTimestamp,
+    projectID,
+  });
 
   const dateSelection = useMemo(
     () => normalizeDateTimeParams(location.query),
     [location.query]
   );
 
   const {isAvailable: isLinkedTraceAvailable} = useIsTraceAvailable(
-    traceLink,
+    direction === 'previous' ? previousTraceLink?.trace_id : nextTraceData?.trace_id,
     linkedTraceTimestamp
   );
 
@@ -92,13 +102,13 @@ export function TraceLinkNavigationButton({
     return null;
   }
 
-  if (traceLink && isLinkedTraceAvailable) {
+  if (previousTraceLink && isLinkedTraceAvailable) {
     return (
       <TraceLink
         color="gray500"
         to={getTraceDetailsUrl({
-          traceSlug: traceLink.trace_id,
-          spanId: traceLink.span_id,
+          traceSlug: previousTraceLink.trace_id,
+          spanId: previousTraceLink.span_id,
           dateSelection,
           timestamp: linkedTraceTimestamp,
           location,
@@ -111,7 +121,26 @@ export function TraceLinkNavigationButton({
     );
   }
 
-  if (traceLink?.sampled === false) {
+  if (nextTraceData?.trace_id && nextTraceData.span_id && isLinkedTraceAvailable) {
+    return (
+      <TraceLink
+        color="gray500"
+        to={getTraceDetailsUrl({
+          traceSlug: nextTraceData.trace_id,
+          spanId: nextTraceData.span_id,
+          dateSelection,
+          timestamp: linkedTraceTimestamp,
+          location,
+          organization,
+        })}
+      >
+        <TraceLinkText>{t('Go to Next Trace')}</TraceLinkText>
+        <IconChevron direction="right" />
+      </TraceLink>
+    );
+  }
+
+  if (previousTraceLink?.sampled === false) {
     return (
       <StyledTooltip
         position="right"

static/app/views/performance/newTraceDetails/traceLinksNavigation/useFindNextTrace.ts

@@ -0,0 +1,112 @@
+import {useMemo} from 'react';
+
+import type {TraceContextType} from 'sentry/components/events/interfaces/spans/types';
+import type {EventTransaction} from 'sentry/types/event';
+import {useApiQueries} from 'sentry/utils/queryClient';
+import {MutableSearch} from 'sentry/utils/tokenizeSearch';
+import useOrganization from 'sentry/utils/useOrganization';
+import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
+import {useSpansIndexed} from 'sentry/views/insights/common/queries/useDiscover';
+import {SpanIndexedField} from 'sentry/views/insights/types';
+import {TRACE_FORMAT_PREFERENCE_KEY} from 'sentry/views/performance/newTraceDetails/traceHeader/styles';
+
+import type {ConnectedTraceConnection} from './traceLinkNavigationButton';
+
+/**
+ *  A temporary solution for getting "next trace" data.
+ *  As traces currently only include information about the previous trace, the next trace is obtained by
+ *  getting all root spans in a certain timespan (e.g. 1h) and searching the root span which has the
+ *  current trace as it's "previous trace".
+ */
+export function useFindNextTrace({
+  direction,
+  currentTraceID,
+  linkedTraceStartTimestamp,
+  linkedTraceEndTimestamp,
+  projectID,
+}: {
+  direction: ConnectedTraceConnection;
+  currentTraceID?: string;
+  linkedTraceEndTimestamp?: number;
+  linkedTraceStartTimestamp?: number;
+  projectID?: string;
+}): TraceContextType | undefined {
+  const {data: indexedSpans} = useSpansIndexed(
+    {
+      limit: direction === 'next' && projectID ? 100 : 1,
+      noPagination: true,
+      pageFilters: {
+        projects: projectID ? [Number(projectID)] : [],
+        environments: [],
+        datetime: {
+          period: null,
+          utc: null,
+          start: linkedTraceStartTimestamp
+            ? new Date(linkedTraceStartTimestamp * 1000).toISOString()
+            : null,
+          end: linkedTraceEndTimestamp
+            ? new Date(linkedTraceEndTimestamp * 1000).toISOString()
+            : null,
+        },
+      },
+      search: MutableSearch.fromQueryObject({is_transaction: 1}),
+      fields: [
+        SpanIndexedField.TRANSACTION_ID,
+        SpanIndexedField.PROJECT_ID,
+        SpanIndexedField.PROJECT,
+      ],
+    },
+    'api.trace-view.linked-traces'
+  );
+
+  const traceData = indexedSpans.map(span => ({
+    projectSlug: span.project,
+    eventId: span['transaction.id'],
+  }));
+
+  const rootEvents = useTraceRootEvents(traceData);
+
+  const nextTrace = rootEvents.find(rootEvent => {
+    const traceContext = rootEvent.data?.contexts?.trace;
+    const hasMatchingLink = traceContext?.links?.some(
+      link =>
+        link.attributes?.['sentry.link.type'] === `previous_trace` &&
+        link.trace_id === currentTraceID
+    );
+
+    return hasMatchingLink;
+  });
+
+  return nextTrace?.data?.contexts.trace;
+}
+
+// Similar to `useTraceRootEvent` but allows fetching data for "more than one" trace data
+function useTraceRootEvents(
+  traceData: Array<{eventId?: string; projectSlug?: string}> | null
+) {
+  const organization = useOrganization();
+  const [storedTraceFormat] = useSyncedLocalStorageState(
+    TRACE_FORMAT_PREFERENCE_KEY,
+    'non-eap'
+  );
+
+  const queryKeys = useMemo(() => {
+    if (!traceData) {
+      return [];
+    }
+
+    return traceData.map(
+      trace =>
+        [
+          `/organizations/${organization.slug}/events/${trace?.projectSlug}:${trace.eventId}/`,
+          {query: {referrer: 'trace-details-summary'}},
+        ] as const
+    );
+  }, [traceData, organization.slug]);
+
+  return useApiQueries<EventTransaction>(queryKeys, {
+    staleTime: 0,
+    enabled:
+      Array.isArray(traceData) && traceData.length > 0 && storedTraceFormat === 'non-eap',
+  });
+}