feat(explore-attr-breakdowns): Adding error and empty search state UI (#104012)

<img width="1093" height="361" alt="Screenshot 2025-11-25 at 4 21 12 PM"
src="https://github.com/user-attachments/assets/af04d008-93a4-4f9a-b395-dca365279b8f"
/>
<img width="1073" height="580" alt="Screenshot 2025-11-25 at 3 54 48 PM"
src="https://github.com/user-attachments/assets/33fe1339-e35a-4bba-837d-6d0b5f418125"
/>
<img width="1099" height="615" alt="Screenshot 2025-11-25 at 4 20 29 PM"
src="https://github.com/user-attachments/assets/fac14c48-edf2-4873-b1e2-4e6645257c80"
/>

---------

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

Author: Abdkhan14

static/app/views/explore/components/attributeBreakdowns/attributeDistributionContent.tsx

@@ -6,7 +6,6 @@ import {Button} from '@sentry/scraps/button/button';
 import {ButtonBar} from '@sentry/scraps/button/buttonBar';
 import {Flex} from '@sentry/scraps/layout';
 
-import LoadingError from 'sentry/components/loadingError';
 import Panel from 'sentry/components/panels/panel';
 import BaseSearchBar from 'sentry/components/searchBar';
 import {IconChevron} from 'sentry/icons/iconChevron';
@@ -64,13 +63,13 @@ export function AttributeDistribution() {
   const {
     data: attributeBreakdownsData,
     isLoading: isAttributeBreakdownsLoading,
-    isError: isAttributeBreakdownsError,
+    error: attributeBreakdownsError,
   } = useAttributeBreakdowns();
 
   const {
     data: cohortCountResponse,
     isLoading: isCohortCountLoading,
-    isError: isCohortCountError,
+    error: cohortCountError,
   } = useApiQuery<{data: Array<{'count()': number}>}>(
     [
       `/organizations/${organization.slug}/events/`,
@@ -139,13 +138,11 @@ export function AttributeDistribution() {
     setPage(0);
   }, [filteredAttributeDistribution]);
 
-  if (isAttributeBreakdownsError || isCohortCountError) {
-    return <LoadingError message={t('Failed to load attribute breakdowns')} />;
-  }
+  const error = attributeBreakdownsError ?? cohortCountError;
 
   return (
     <Panel>
-      <Flex direction="column" gap="xl" padding="xl">
+      <Flex direction="column" gap="2xl" padding="xl">
         <Fragment>
           <ControlsContainer>
             <StyledBaseSearchBar
@@ -160,6 +157,8 @@ export function AttributeDistribution() {
           </ControlsContainer>
           {isAttributeBreakdownsLoading || isCohortCountLoading ? (
             <AttributeBreakdownsComponent.LoadingCharts />
+          ) : error ? (
+            <AttributeBreakdownsComponent.ErrorState error={error} />
           ) : filteredAttributeDistribution.length > 0 ? (
             <Fragment>
               <ChartsGrid>
@@ -204,7 +203,7 @@ export function AttributeDistribution() {
               </PaginationContainer>
             </Fragment>
           ) : (
-            <NoAttributesMessage>{t('No matching attributes found')}</NoAttributesMessage>
+            <AttributeBreakdownsComponent.EmptySearchState />
           )}
         </Fragment>
       </Flex>
@@ -222,13 +221,6 @@ const StyledBaseSearchBar = styled(BaseSearchBar)`
   flex: 1;
 `;
 
-const NoAttributesMessage = styled('div')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${p => p.theme.subText};
-`;
-
 const ChartsGrid = styled('div')`
   display: grid;
   grid-template-columns: repeat(${CHARTS_COLUMN_COUNT}, 1fr);

static/app/views/explore/components/attributeBreakdowns/cohortComparisonContent.tsx

@@ -9,7 +9,6 @@ import {Flex} from '@sentry/scraps/layout';
 
 import type {Selection} from 'sentry/components/charts/useChartXRangeSelection';
 import {Text} from 'sentry/components/core/text';
-import LoadingError from 'sentry/components/loadingError';
 import Panel from 'sentry/components/panels/panel';
 import BaseSearchBar from 'sentry/components/searchBar';
 import {IconChevron} from 'sentry/icons/iconChevron';
@@ -40,7 +39,7 @@ export function CohortComparison({
 
   const yAxis = visualizes[chartIndex]?.yAxis ?? '';
 
-  const {data, isLoading, isError} = useAttributeBreakdownComparison({
+  const {data, isLoading, error} = useAttributeBreakdownComparison({
     aggregateFunction: yAxis,
     range: selection.range,
   });
@@ -109,13 +108,9 @@ export function CohortComparison({
     };
   }, [selection]);
 
-  if (isError) {
-    return <LoadingError message={t('Failed to load attribute breakdowns')} />;
-  }
-
   return (
     <Panel data-explore-chart-selection-region>
-      <Flex direction="column" gap="xl" padding="xl">
+      <Flex direction="column" gap="2xl" padding="xl">
         <ControlsContainer>
           <StyledBaseSearchBar
             placeholder={t('Search keys')}
@@ -129,6 +124,8 @@ export function CohortComparison({
         </ControlsContainer>
         {isLoading ? (
           <AttributeBreakdownsComponent.LoadingCharts />
+        ) : error ? (
+          <AttributeBreakdownsComponent.ErrorState error={error} />
         ) : (
           <Fragment>
             {selectedRangeToDates && (
@@ -187,9 +184,7 @@ export function CohortComparison({
                 </PaginationContainer>
               </Fragment>
             ) : (
-              <NoAttributesMessage>
-                {t('No matching attributes found')}
-              </NoAttributesMessage>
+              <AttributeBreakdownsComponent.EmptySearchState />
             )}
           </Fragment>
         )}
@@ -208,13 +203,6 @@ const StyledBaseSearchBar = styled(BaseSearchBar)`
   flex: 1;
 `;
 
-const NoAttributesMessage = styled('div')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${p => p.theme.subText};
-`;
-
 const ChartsGrid = styled('div')`
   display: grid;
   grid-template-columns: repeat(${CHARTS_COLUMN_COUNT}, 1fr);

static/app/views/explore/components/attributeBreakdowns/styles.tsx

@@ -8,8 +8,10 @@ import {Flex} from '@sentry/scraps/layout/flex';
 import BaseChart from 'sentry/components/charts/baseChart';
 import {Text} from 'sentry/components/core/text';
 import Placeholder from 'sentry/components/placeholder';
+import {IconSearch, IconTimer, IconWarning} from 'sentry/icons';
 import {IconMegaphone} from 'sentry/icons/iconMegaphone';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
+import type RequestError from 'sentry/utils/requestError/requestError';
 import {useFeedbackForm} from 'sentry/utils/useFeedbackForm';
 
 function FeedbackButton() {
@@ -106,7 +108,7 @@ function LoadingCharts() {
   }, []);
 
   return (
-    <Flex direction="column" gap="xl">
+    <Flex direction="column" gap="2xl">
       {showMessage && (
         <Text size="md" variant="muted">
           {t(
@@ -123,6 +125,96 @@ function LoadingCharts() {
   );
 }
 
+function FeedbackLink() {
+  const openForm = useFeedbackForm();
+
+  if (!openForm) {
+    return (
+      <a href="mailto:[email protected]?subject=Attribute%20breakdowns%20failed%20to%20load">
+        {t('Send us feedback')}
+      </a>
+    );
+  }
+
+  return (
+    <a href="#" onClick={() => openForm?.()}>
+      {t('Send us feedback')}
+    </a>
+  );
+}
+
+const StyledIconSearch = styled(IconSearch)`
+  color: ${p => p.theme.subText};
+`;
+
+const StyledIconWarning = styled(IconWarning)`
+  color: ${p => p.theme.subText};
+`;
+
+const StyledIconTimer = styled(IconTimer)`
+  color: ${p => p.theme.subText};
+`;
+
+const ERROR_STATE_CONFIG: Record<
+  number | 'default',
+  {
+    icon: React.ReactNode;
+    subtitle: React.ReactNode;
+    title: string;
+  }
+> = {
+  504: {
+    title: t('Query timed out'),
+    icon: <StyledIconTimer size="xl" />,
+    subtitle: tct(
+      'You can try narrowing the time range. Seeing this often? [feedbackLink]',
+      {
+        feedbackLink: <FeedbackLink />,
+      }
+    ),
+  },
+  default: {
+    title: t('Failed to load attribute breakdowns'),
+    icon: <StyledIconWarning size="xl" />,
+    subtitle: tct('Seeing this often? [feedbackLink]', {
+      feedbackLink: <FeedbackLink />,
+    }),
+  },
+};
+
+function ErrorState({error}: {error: RequestError}) {
+  const config =
+    ERROR_STATE_CONFIG[error?.status ?? 'default'] ?? ERROR_STATE_CONFIG.default;
+
+  return (
+    <Flex direction="column" gap="2xl" padding="3xl" align="center" justify="center">
+      {config.icon}
+      <Text size="xl" variant="muted">
+        {config.title}
+      </Text>
+      <Text size="md" variant="muted">
+        {config.subtitle}
+      </Text>
+    </Flex>
+  );
+}
+
+function EmptySearchState() {
+  return (
+    <Flex direction="column" gap="2xl" padding="3xl" align="center" justify="center">
+      <StyledIconSearch size="xl" />
+      <Text size="xl" variant="muted">
+        {t('No matching attributes found')}
+      </Text>
+      <Text size="md" variant="muted">
+        {tct('Expecting results? [feedbackLink]', {
+          feedbackLink: <FeedbackLink />,
+        })}
+      </Text>
+    </Flex>
+  );
+}
+
 const StyledPlaceholder = styled(Placeholder)<{_height: number; _width: number}>`
   border-radius: ${p => p.theme.borderRadius};
   height: ${p => p._height}px;
@@ -187,4 +279,6 @@ const StyledFeedbackButton = styled(Button)`
 export const AttributeBreakdownsComponent = {
   FeedbackButton,
   LoadingCharts,
+  ErrorState,
+  EmptySearchState,
 };