feat(trace-eap-waterfall): Rendering orphan errors from new eap endpoint (#88444)

The goal of the PR is to support rendering an individual row for orphan
errors (type below), in the trace waterfall:

```
type EAPError = {
  event_id: string;
  event_type: string;
  issue_id: number;
  level: Level;
  project_id: number;
  project_slug: string;
  start_timestamp: number;
  transaction: string;
  description?: string;
};
```
Bulk of the PR involves using guards to ensure feature parity with other
event types already existing in the waterfall.

Added tests.

---------

Co-authored-by: Abdullah Khan <[email protected]>

Author: Abdkhan14

static/app/components/quickTrace/utils.tsx

@@ -21,6 +21,7 @@ import {getTraceTimeRangeFromEvent} from 'sentry/utils/performance/quickTrace/ut
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import {hasDatasetSelector} from 'sentry/views/dashboards/utils';
 import type {TraceViewSources} from 'sentry/views/performance/newTraceDetails/traceHeader/breadcrumbs';
+import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 
 export function isQuickTraceEvent(
@@ -34,7 +35,7 @@ export type ErrorDestination = 'discover' | 'issue';
 export type TransactionDestination = 'discover' | 'performance';
 
 export function generateIssueEventTarget(
-  event: TraceError | TracePerformanceIssue,
+  event: TraceError | TracePerformanceIssue | TraceTree.EAPError,
   organization: Organization,
   referrer?: string
 ): LocationDescriptor {

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

@@ -19,6 +19,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import {IssueTraceWaterfallOverlay} from 'sentry/views/performance/newTraceDetails/issuesTraceWaterfallOverlay';
 import {
+  isEAPErrorNode,
   isEAPSpanNode,
   isEAPTransactionNode,
   isNonTransactionEAPSpanNode,
@@ -183,7 +184,7 @@ export function IssuesTraceWaterfall(props: IssuesTraceWaterfallProps) {
     // Find all the nodes that match the event id from the error so that we can try and
     // link the user to the most specific one.
     const nodes = IssuesTraceTree.FindAll(props.tree.root, n => {
-      if (isTraceErrorNode(n)) {
+      if (isTraceErrorNode(n) || isEAPErrorNode(n)) {
         return n.value.event_id === props.event.eventID;
       }
       if (isTransactionNode(n)) {

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

@@ -66,6 +66,7 @@ import {useTraceState, useTraceStateDispatch} from './traceState/traceStateProvi
 import {
   isAutogroupedNode,
   isCollapsedNode,
+  isEAPErrorNode,
   isEAPSpanNode,
   isEAPTraceNode,
   isMissingInstrumentationNode,
@@ -680,7 +681,7 @@ function RenderTraceRow(props: {
     return <TraceAutogroupedRow {...rowProps} node={node} />;
   }
 
-  if (isTraceErrorNode(node)) {
+  if (isTraceErrorNode(node) || isEAPErrorNode(node)) {
     return <TraceErrorRow {...rowProps} node={node} />;
   }
 

static/app/views/performance/newTraceDetails/traceDrawer/details/error.tsx

@@ -12,6 +12,7 @@ import {generateIssueEventTarget} from 'sentry/components/quickTrace/utils';
 import {t} from 'sentry/locale';
 import type {EventError} from 'sentry/types/event';
 import {useApiQuery} from 'sentry/utils/queryClient';
+import {isTraceErrorNode} from 'sentry/views/performance/newTraceDetails/traceGuards';
 
 import type {TraceTreeNodeDetailsProps} from '../../traceDrawer/tabs/traceTreeNodeDetails';
 import {TraceIcons} from '../../traceIcons';
@@ -25,7 +26,9 @@ import {IssueList} from './issues/issues';
 import {type SectionCardKeyValueList, TraceDrawerComponents} from './styles';
 
 export function ErrorNodeDetails(
-  props: TraceTreeNodeDetailsProps<TraceTreeNode<TraceTree.TraceError>>
+  props: TraceTreeNodeDetailsProps<
+    TraceTreeNode<TraceTree.TraceError> | TraceTreeNode<TraceTree.EAPError>
+  >
 ) {
   const hasTraceNewUi = useHasTraceNewUi();
   const {node, organization, onTabScrollToNode} = props;
@@ -72,7 +75,9 @@ function LegacyErrorNodeDetails({
   organization,
   onTabScrollToNode,
   onParentClick,
-}: TraceTreeNodeDetailsProps<TraceTreeNode<TraceTree.TraceError>>) {
+}: TraceTreeNodeDetailsProps<
+  TraceTreeNode<TraceTree.TraceError> | TraceTreeNode<TraceTree.EAPError>
+>) {
   const issues = useMemo(() => {
     return [...node.errors];
   }, [node.errors]);
@@ -97,13 +102,15 @@ function LegacyErrorNodeDetails({
   const theme = useTheme();
   const parentTransaction = TraceTree.ParentTransaction(node);
 
-  const items: SectionCardKeyValueList = [
-    {
+  const items: SectionCardKeyValueList = [];
+
+  if (isTraceErrorNode(node)) {
+    items.push({
       key: 'title',
       subject: t('Title'),
       value: <TraceDrawerComponents.CopyableCardValueWithLink value={node.value.title} />,
-    },
-  ];
+    });
+  }
 
   if (parentTransaction) {
     items.push({
@@ -117,6 +124,9 @@ function LegacyErrorNodeDetails({
     });
   }
 
+  const description = isTraceErrorNode(node)
+    ? (node.value.message ?? node.value.title)
+    : node.value.description;
   return isPending ? (
     <LoadingIndicator />
   ) : data ? (
@@ -130,9 +140,7 @@ function LegacyErrorNodeDetails({
           </TraceDrawerComponents.IconBorder>
           <TraceDrawerComponents.LegacyTitleText>
             <div>{node.value.level ?? t('error')}</div>
-            <TraceDrawerComponents.TitleOp
-              text={node.value.message ?? node.value.title ?? 'Error'}
-            />
+            <TraceDrawerComponents.TitleOp text={description ?? 'Error'} />
           </TraceDrawerComponents.LegacyTitleText>
         </TraceDrawerComponents.Title>
         <TraceDrawerComponents.Actions>

static/app/views/performance/newTraceDetails/traceDrawer/tabs/traceTreeNodeDetails.tsx

@@ -3,6 +3,7 @@ import type {ReplayRecord} from 'sentry/views/replays/types';
 
 import {
   isAutogroupedNode,
+  isEAPErrorNode,
   isEAPSpanNode,
   isMissingInstrumentationNode,
   isSpanNode,
@@ -37,7 +38,7 @@ export function TraceTreeNodeDetails(props: TraceTreeNodeDetailsProps<any>) {
     return <SpanNodeDetails {...props} />;
   }
 
-  if (isTraceErrorNode(props.node)) {
+  if (isTraceErrorNode(props.node) || isEAPErrorNode(props.node)) {
     return <ErrorNodeDetails {...props} />;
   }
 

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

@@ -23,8 +23,12 @@ export function isSpanNode(
   );
 }
 
+export function isEAPSpan(value: TraceTree.NodeValue): value is TraceTree.EAPSpan {
+  return !!(value && 'is_transaction' in value);
+}
+
 export function isEAPTransaction(value: TraceTree.NodeValue): value is TraceTree.EAPSpan {
-  return !!(value && 'is_transaction' in value && value.is_transaction);
+  return isEAPSpan(value) && value.is_transaction;
 }
 
 export function isEAPTransactionNode(
@@ -36,7 +40,7 @@ export function isEAPTransactionNode(
 export function isEAPSpanNode(
   node: TraceTreeNode<TraceTree.NodeValue>
 ): node is TraceTreeNode<TraceTree.EAPSpan> {
-  return !!(node.value && 'is_transaction' in node.value);
+  return isEAPSpan(node.value);
 }
 
 export function isNonTransactionEAPSpanNode(
@@ -51,7 +55,8 @@ export function isTransactionNode(
   return (
     !!(node.value && 'transaction' in node.value) &&
     !isAutogroupedNode(node) &&
-    !isEAPSpanNode(node)
+    !isEAPSpanNode(node) &&
+    !isEAPErrorNode(node)
   );
 }
 
@@ -60,7 +65,7 @@ export function isEAPError(value: TraceTree.NodeValue): value is TraceTree.EAPEr
     value &&
     'event_type' in value &&
     value.event_type === 'error' &&
-    !('message' in value) // a bit gross, but we won't need this soon as we remove the legacy error type
+    'description' in value // a bit gross, but we won't need this soon as we remove the legacy error type
   );
 }
 
@@ -94,10 +99,14 @@ export function isCollapsedNode(
   return node instanceof CollapsedNode;
 }
 
+export function isTraceError(value: TraceTree.NodeValue): value is TraceTree.TraceError {
+  return !!(value && 'level' in value && 'message' in value);
+}
+
 export function isTraceErrorNode(
   node: TraceTreeNode<TraceTree.NodeValue>
 ): node is TraceTreeNode<TraceTree.TraceError> {
-  return !!(node.value && 'level' in node.value);
+  return isTraceError(node.value);
 }
 
 export function isRootNode(

static/app/views/performance/newTraceDetails/traceHeader/index.tsx

@@ -169,9 +169,7 @@ const StyledPlaceholder = styled(Placeholder)<{_height: number; _width: number}>
 
 const CANDIDATE_TRACE_TITLE_OPS = ['pageload', 'navigation'];
 
-export const getRepresentativeEvent = (
-  tree: TraceTree
-): TraceTree.Transaction | TraceTree.EAPSpan | null => {
+const getRepresentativeEvent = (tree: TraceTree): TraceTree.TraceEvent | null => {
   const traceNode = tree.root.children[0];
 
   if (!traceNode) {
@@ -182,11 +180,13 @@ export const getRepresentativeEvent = (
     throw new TypeError('Not trace node');
   }
 
-  let firstRootEvent: TraceTree.Transaction | TraceTree.EAPSpan | null = null;
-  let candidateEvent: TraceTree.Transaction | TraceTree.EAPSpan | null = null;
-  let firstEvent: TraceTree.Transaction | TraceTree.EAPSpan | null = null;
+  let firstRootEvent: TraceTree.TraceEvent | null = null;
+  let candidateEvent: TraceTree.TraceEvent | null = null;
+  let firstEvent: TraceTree.TraceEvent | null = null;
 
-  const events = isTraceNode(traceNode) ? traceNode.value.transactions : traceNode.value;
+  const events = isTraceNode(traceNode)
+    ? [...traceNode.value.transactions, ...traceNode.value.orphan_errors]
+    : traceNode.value;
   for (const event of events) {
     // If we find a root transaction, we can stop looking and use it for the title.
     if (!firstRootEvent && isRootEvent(event)) {
@@ -198,7 +198,11 @@ export const getRepresentativeEvent = (
       // a root.
       !candidateEvent &&
       CANDIDATE_TRACE_TITLE_OPS.includes(
-        'transaction.op' in event ? event['transaction.op'] : event.op
+        'transaction.op' in event
+          ? event['transaction.op']
+          : 'op' in event
+            ? event.op
+            : ''
       )
     ) {
       candidateEvent = event;
@@ -287,11 +291,16 @@ export function TraceMetaDataHeader(props: TraceMetadataHeaderProps) {
     props.rootEventResults.isLoading ||
     props.tree.type === 'loading';
 
-  if (isLoading) {
+  const isError =
+    props.metaResults.status === 'error' ||
+    props.rootEventResults.status === 'error' ||
+    props.tree.type === 'error';
+
+  if (isLoading || isError) {
     return <PlaceHolder organization={props.organization} />;
   }
 
-  const representativeTransaction = getRepresentativeEvent(props.tree);
+  const representativeEvent = getRepresentativeEvent(props.tree);
 
   return (
     <HeaderLayout>
@@ -317,14 +326,14 @@ export function TraceMetaDataHeader(props: TraceMetadataHeaderProps) {
           <Title
             tree={props.tree}
             traceSlug={props.traceSlug}
-            representativeTransaction={representativeTransaction}
+            representativeEvent={representativeEvent}
           />
           <Meta
             organization={props.organization}
             rootEventResults={props.rootEventResults}
             tree={props.tree}
             meta={props.metaResults.data}
-            representativeTransaction={representativeTransaction}
+            representativeEvent={representativeEvent}
           />
         </HeaderRow>
         {props.rootEventResults.data ? (

static/app/views/performance/newTraceDetails/traceHeader/meta.tsx

@@ -11,6 +11,10 @@ import getDuration from 'sentry/utils/duration/getDuration';
 import type {TraceMeta} from 'sentry/utils/performance/quickTrace/types';
 import type {UseApiQueryResult} from 'sentry/utils/queryClient';
 import type RequestError from 'sentry/utils/requestError/requestError';
+import {
+  isEAPError,
+  isTraceError,
+} from 'sentry/views/performance/newTraceDetails/traceGuards';
 
 import {TraceDrawerComponents} from '../traceDrawer/details/styles';
 import type {TraceTree} from '../traceModels/traceTree';
@@ -49,11 +53,23 @@ const SectionBody = styled('div')<{rightAlign?: boolean}>`
 interface MetaProps {
   meta: TraceMeta | undefined;
   organization: Organization;
-  representativeTransaction: TraceTree.Transaction | TraceTree.EAPSpan | null;
+  representativeEvent: TraceTree.TraceEvent | null;
   rootEventResults: UseApiQueryResult<EventTransaction, RequestError>;
   tree: TraceTree;
 }
 
+function getRootDuration(event: TraceTree.TraceEvent | null) {
+  if (!event || isEAPError(event) || isTraceError(event)) {
+    return '\u2014';
+  }
+
+  return getDuration(
+    ('timestamp' in event ? event.timestamp : event.end_timestamp) -
+      event.start_timestamp,
+    2,
+    true
+  );
+}
 export function Meta(props: MetaProps) {
   const traceNode = props.tree.root.children[0]!;
 
@@ -134,18 +150,7 @@ export function Meta(props: MetaProps) {
         <MetaSection
           headingText={t('Root Duration')}
           rightAlignBody
-          bodyText={
-            props.representativeTransaction
-              ? getDuration(
-                  ('timestamp' in props.representativeTransaction
-                    ? props.representativeTransaction.timestamp
-                    : props.representativeTransaction.end_timestamp) -
-                    props.representativeTransaction.start_timestamp,
-                  2,
-                  true
-                )
-              : '\u2014'
-          }
+          bodyText={getRootDuration(props.representativeEvent)}
         />
       ) : null}
     </MetaWrapper>