feat(issues): GA new trace view performance issues (#87951)

Author: scttcper

fixtures/page_objects/base.py

@@ -1,10 +1,12 @@
 from selenium.webdriver.common.by import By
 
+from sentry.testutils.pytest.selenium import Browser
+
 
 class BasePage:
     """Base class for PageObjects"""
 
-    def __init__(self, browser):
+    def __init__(self, browser: Browser):
         self.browser = browser
 
     @property

fixtures/page_objects/issue_details.py

@@ -16,6 +16,13 @@ def visit_issue(self, org, groupid):
         self.browser.get(f"/organizations/{org}/issues/{groupid}/")
         self.wait_until_loaded()
 
+    def visit_performance_issue(self, org, groupid):
+        """
+        Trace view can take a long time to load, just wait until the trace evidence is loaded
+        """
+        self.browser.get(f"/organizations/{org}/issues/{groupid}/")
+        self.browser.wait_until("#span-evidence")
+
     def visit_issue_activity(self, org, groupid):
         self.browser.get(f"/organizations/{org}/issues/{groupid}/activity/")
         self.browser.wait_until_not('[data-test-id="loading-indicator"]')

static/app/components/events/interfaces/performance/eventTraceView.spec.tsx

@@ -5,7 +5,6 @@ import {initializeData} from 'sentry-test/performance/initializePerformanceData'
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import {EntryType} from 'sentry/types/event';
-import {IssueCategory, IssueTitle} from 'sentry/types/group';
 import type {TraceEventResponse} from 'sentry/views/issueDetails/traceTimeline/useTraceTimelineEvents';
 import {
   makeTraceError,
@@ -14,17 +13,9 @@ import {
 
 import {EventTraceView} from './eventTraceView';
 
-class ResizeObserver {
-  observe() {}
-  unobserve() {}
-  disconnect() {}
-}
-
-window.ResizeObserver = ResizeObserver;
-
 describe('EventTraceView', () => {
   const traceId = 'this-is-a-good-trace-id';
-  const {organization, project} = initializeData({
+  const {organization} = initializeData({
     features: ['profiling'],
   });
   const group = GroupFixture();
@@ -124,61 +115,6 @@ describe('EventTraceView', () => {
     expect(document.querySelectorAll('.TraceRow')).toHaveLength(8);
   });
 
-  it('still renders trace link for performance issues', async () => {
-    const oneOtherIssueEvent: TraceEventResponse = {
-      data: [
-        {
-          // In issuePlatform, the message contains the title and the transaction
-          message: '/api/slow/ Slow DB Query SELECT "sentry_monitorcheckin"."monitor_id"',
-          timestamp: '2024-01-24T09:09:03+00:00',
-          'issue.id': 1000,
-          project: project.slug,
-          'project.name': project.name,
-          title: 'Slow DB Query',
-          id: 'abc',
-          transaction: 'n/a',
-          culprit: '/api/slow/',
-          'event.type': '',
-        },
-      ],
-      meta: {fields: {}, units: {}},
-    };
-    MockApiClient.addMockResponse({
-      url: `/organizations/${organization.slug}/events/`,
-      body: oneOtherIssueEvent,
-    });
-    MockApiClient.addMockResponse({
-      url: `/organizations/${organization.slug}/projects/`,
-      body: [],
-    });
-    const perfGroup = GroupFixture({issueCategory: IssueCategory.PERFORMANCE});
-    const perfEvent = EventFixture({
-      occurrence: {
-        type: 1001,
-        issueTitle: IssueTitle.PERFORMANCE_SLOW_DB_QUERY,
-      },
-      entries: [
-        {
-          data: [],
-          type: EntryType.SPANS,
-        },
-      ],
-      contexts: {
-        trace: {
-          trace_id: traceId,
-        },
-      },
-    });
-
-    render(
-      <EventTraceView group={perfGroup} event={perfEvent} organization={organization} />
-    );
-    expect(await screen.findByText('Trace Preview')).toBeInTheDocument();
-    expect(
-      screen.getByText('One other issue appears in the same trace.')
-    ).toBeInTheDocument();
-  });
-
   it('does not render the trace preview if it has no transactions', async () => {
     MockApiClient.addMockResponse({
       url: '/subscriptions/org-slug/',

static/app/components/events/interfaces/performance/eventTraceView.tsx

@@ -142,11 +142,7 @@ export function EventTraceView({group, event, organization}: EventTraceViewProps
   const location = useLocation();
 
   // Performance issues have a Span Evidence section that contains the trace view
-  const isHiddenForPerformanceIssues =
-    group.issueCategory === IssueCategory.PERFORMANCE &&
-    organization.features.includes('issue-details-new-performance-trace-view');
-
-  if (!traceId || isHiddenForPerformanceIssues) {
+  if (!traceId || group.issueCategory === IssueCategory.PERFORMANCE) {
     return null;
   }
 
@@ -163,11 +159,7 @@ export function EventTraceView({group, event, organization}: EventTraceViewProps
     TraceViewSources.ISSUE_DETAILS
   );
 
-  const hasProfilingFeature = organization.features.includes('profiling');
-  const hasTracePreviewFeature =
-    hasProfilingFeature &&
-    // Only display this for error or default events since performance events are handled elsewhere
-    group.issueCategory !== IssueCategory.PERFORMANCE;
+  const hasTracePreviewFeature = organization.features.includes('profiling');
 
   return (
     <InterimSection

static/app/components/events/interfaces/performance/spanEvidence.spec.tsx

@@ -1,94 +1,90 @@
 import {EventFixture} from 'sentry-fixture/event';
 
 import {initializeData} from 'sentry-test/performance/initializePerformanceData';
-import {
-  MockSpan,
-  ProblemSpan,
-  TransactionEventBuilder,
-} from 'sentry-test/performance/utils';
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
 import type {EventTransaction} from 'sentry/types/event';
 import {EntryType} from 'sentry/types/event';
 import {IssueTitle, IssueType} from 'sentry/types/group';
 import {sanitizeQuerySelector} from 'sentry/utils/sanitizeQuerySelector';
+import {
+  makeTraceError,
+  makeTransaction,
+} from 'sentry/views/performance/newTraceDetails/traceModels/traceTreeTestUtils';
 
 import {SpanEvidenceSection} from './spanEvidence';
 
 const {organization, project} = initializeData();
 
 describe('spanEvidence', () => {
-  it('renders and highlights the correct data in the span evidence section', () => {
-    const builder = new TransactionEventBuilder();
-    builder.addSpan(
-      new MockSpan({
-        startTimestamp: 0,
-        endTimestamp: 100,
-        op: 'http',
-        description: 'do a thing',
-      })
-    );
-
-    builder.addSpan(
-      new MockSpan({
-        startTimestamp: 100,
-        endTimestamp: 200,
-        op: 'db',
-        description: 'SELECT col FROM table',
-      })
-    );
-
-    builder.addSpan(
-      new MockSpan({
-        startTimestamp: 200,
-        endTimestamp: 300,
-        op: 'db',
-        description: 'SELECT col2 FROM table',
-      })
-    );
+  beforeEach(() => {
+    MockApiClient.clearMockResponses();
+  });
 
-    builder.addSpan(
-      new MockSpan({
-        startTimestamp: 200,
-        endTimestamp: 300,
-        op: 'db',
-        description: 'SELECT col3 FROM table',
-      })
-    );
+  it('renders and attempts to render the trace preview', async () => {
+    const traceId = 'trace-id';
+    const event = EventFixture({
+      contexts: {
+        trace: {
+          trace_id: traceId,
+        },
+      },
+    });
 
-    const parentProblemSpan = new MockSpan({
-      startTimestamp: 300,
-      endTimestamp: 600,
-      op: 'db',
-      description: 'connect',
-      problemSpan: ProblemSpan.PARENT,
+    MockApiClient.addMockResponse({
+      url: '/subscriptions/org-slug/',
+      method: 'GET',
+      body: {},
     });
-    parentProblemSpan.addChild(
-      {
-        startTimestamp: 300,
-        endTimestamp: 600,
-        op: 'db',
-        description: 'group me',
-        problemSpan: ProblemSpan.OFFENDER,
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/organizations/${organization.slug}/events-trace-meta/${traceId}/`,
+      body: {
+        errors: 1,
+        performance_issues: 1,
+        projects: 1,
+        transactions: 1,
+        transaction_child_count_map: new Array(20)
+          .fill(0)
+          .map((_, i) => [{'transaction.id': i.toString(), count: 1}]),
+        span_count: 0,
+        span_count_map: {},
       },
-      9
-    );
-
-    builder.addSpan(parentProblemSpan);
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/org-slug/events-trace/${traceId}/`,
+      method: 'GET',
+      body: {
+        transactions: Array.from({length: 20}, (_, i) =>
+          makeTransaction({
+            'transaction.op': `transaction-op-${i + 1}`,
+            project_slug: `project-slug-${i + 1}`,
+            event_id: `event-id-${i + 1}`,
+            errors: i === 0 ? [makeTraceError({event_id: 'issue-5'})] : [],
+          })
+        ),
+        orphan_errors: [makeTraceError()],
+      },
+    });
+    MockApiClient.addMockResponse({
+      url: `/organizations/${organization.slug}/events/project-slug-1:event-id-1/`,
+      method: 'GET',
+      body: {
+        entries: [{type: EntryType.SPANS, data: []}],
+      },
+    });
 
     render(
       <SpanEvidenceSection
-        event={builder.getEventFixture()}
+        event={event as EventTransaction}
         organization={organization}
         projectSlug={project.slug}
       />,
       {organization}
     );
 
-    // Verify that the correct spans are hi-lighted on the span tree as affected spans
-    const affectedSpan = screen.getByTestId('row-title-content-affected');
-    expect(affectedSpan).toBeInTheDocument();
-    expect(affectedSpan).toHaveTextContent('db — connect');
+    // Verify that the trace preview is rendered
+    expect(await screen.findByTestId('trace-virtualized-list')).toBeInTheDocument();
   });
 
   it('renders settings button for issue with configurable thresholds', () => {