fix(profiling): Show query error on profiling landing page (#41678)

When the query fails, we should try to show the error message explaining
the problem so the user can try to fix it.

static/app/utils/profiling/hooks/useProfileEvents.tsx

@@ -2,6 +2,8 @@ import {useQuery} from '@tanstack/react-query';
 
 import {ResponseMeta} from 'sentry/api';
 import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
+import {t} from 'sentry/locale';
+import {defined} from 'sentry/utils';
 import {DURATION_UNITS, SIZE_UNITS} from 'sentry/utils/discover/fieldRenderers';
 import {FieldValueType} from 'sentry/utils/fields';
 import useApi from 'sentry/utils/useApi';
@@ -83,6 +85,24 @@ export function useProfileEvents<F extends string>({
   });
 }
 
+export function formatError(error: any): string | null {
+  if (!defined(error)) {
+    return null;
+  }
+
+  const detail = error.responseJSON?.detail;
+  if (typeof detail === 'string') {
+    return detail;
+  }
+
+  const message = detail?.message;
+  if (typeof message === 'string') {
+    return message;
+  }
+
+  return t('An unknown error occurred.');
+}
+
 export function formatSort<F extends string>(
   value: string | undefined,
   allowedKeys: readonly F[],

static/app/views/profiling/content.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import {openModal} from 'sentry/actionCreators/modal';
+import Alert from 'sentry/components/alert';
 import Button from 'sentry/components/button';
 import DatePageFilter from 'sentry/components/datePageFilter';
 import EnvironmentPageFilter from 'sentry/components/environmentPageFilter';
@@ -27,6 +28,7 @@ import {PageContent} from 'sentry/styles/organization';
 import space from 'sentry/styles/space';
 import trackAdvancedAnalyticsEvent from 'sentry/utils/analytics/trackAdvancedAnalyticsEvent';
 import {
+  formatError,
   formatSort,
   useProfileEvents,
 } from 'sentry/utils/profiling/hooks/useProfileEvents';
@@ -66,6 +68,9 @@ function ProfilingContent({location, router}: ProfilingContentProps) {
     referrer: 'api.profiling.landing-table',
   });
 
+  const transactionsError =
+    transactions.status === 'error' ? formatError(transactions.error) : null;
+
   useEffect(() => {
     trackAdvancedAnalyticsEvent('profiling_views.landing', {
       organization,
@@ -153,6 +158,11 @@ function ProfilingContent({location, router}: ProfilingContentProps) {
             </Layout.Header>
             <Layout.Body>
               <Layout.Main fullWidth>
+                {transactionsError && (
+                  <Alert type="error" showIcon>
+                    {transactionsError}
+                  </Alert>
+                )}
                 <ActionBar>
                   <PageFilterBar condensed>
                     <ProjectPageFilter />