feat(new-trace): Rendering new copy only if the trace timestamp is <= 2minutes old

Author: Abdullah Khan

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

@@ -909,7 +909,12 @@ describe('trace view', () => {
     expect(await screen.findByText(/we failed to load your trace/i)).toBeInTheDocument();
   });
 
-  it('renders empty state', async () => {
+  it('renders empty state for successfully ingested trace', async () => {
+    // set timestamp to 3 minutes ago
+    const threeMinutesAgoInSeconds = Math.floor(
+      new Date(Date.now() - 3 * 60 * 1000).getTime() / 1000
+    );
+
     mockPerformanceSubscriptionDetailsResponse();
     mockTraceResponse({
       body: {
@@ -921,12 +926,43 @@ describe('trace view', () => {
     mockTraceTagsResponse();
     mockEventsResponse();
 
-    render(<TraceView />, {router});
+    window.location.search = `?timestamp=${threeMinutesAgoInSeconds.toString()}`;
+    render(<TraceView />, {
+      router,
+    });
     expect(
       await screen.findByText(/trace does not contain any data/i)
     ).toBeInTheDocument();
   });
 
+  it('renders empty state for yet to be ingested trace', async () => {
+    // set timestamp to 1 minute ago
+    const oneMinuteAgoInSeconds = Math.floor(
+      new Date(Date.now() - 1 * 60 * 1000).getTime() / 1000
+    );
+
+    mockPerformanceSubscriptionDetailsResponse();
+    mockTraceResponse({
+      body: {
+        transactions: [],
+        orphan_errors: [],
+      },
+    });
+    mockTraceMetaResponse();
+    mockTraceTagsResponse();
+    mockEventsResponse();
+
+    window.location.search = `?timestamp=${oneMinuteAgoInSeconds.toString()}`;
+    render(<TraceView />, {
+      router,
+    });
+    expect(
+      await screen.findByText(
+        /We could still be ingesting this trace. Please wait a few seconds and refresh./i
+      )
+    ).toBeInTheDocument();
+  });
+
   describe('pageload', () => {
     it('scrolls to trace root', async () => {
       mockQueryString('?node=trace-root');

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

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import useFeedbackWidget from 'sentry/components/feedback/widget/useFeedbackWidget';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import {t} from 'sentry/locale';
+import {useTraceQueryParams} from 'sentry/views/performance/newTraceDetails/useTraceQueryParams';
 
 function TraceLoading() {
   return (
@@ -43,13 +44,22 @@ function TraceEmpty() {
   const linkref = useRef<HTMLAnchorElement>(null);
   const feedback = useFeedbackWidget({buttonRef: linkref});
 
+  const traceQueryParams = useTraceQueryParams();
+  const timestamp = traceQueryParams.timestamp;
+
+  // Traces take longer to ingest than spans, we could click on the id of a span
+  // and be navigated to a trace that doesn't contain any data yet. We add a 2
+  // minute buffer to account for this.
+  const message =
+    timestamp && new Date(timestamp * 1000) > new Date(Date.now() - 2 * 60 * 1000)
+      ? t(
+          'We could still be ingesting this trace. Please wait a few seconds and refresh.'
+        )
+      : t('This trace does not contain any data.');
+
   return (
     <LoadingContainer animate>
-      <div>
-        {t(
-          'We could still be ingesting this trace. Please wait a few seconds and refresh.'
-        )}
-      </div>
+      <div>{message}</div>
       <div>
         {t('Seeing this often? Send us ')}
         {feedback ? (