feat(errors): add page filters and search bar UI

[nikkikapadia]

I'm mainly adding UI to start, so I've added the page filters and search bar but they don't work yet! This is what it looks like

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

Autofix Details

Bugbot Autofix prepared fixes for both issues found in the latest run.

• ✅ Fixed: Outer provider silently swallows TraceItemSearchQueryBuilder configuration
  • Removed the outer SearchQueryBuilderProvider with empty/stub props that was overriding TraceItemSearchQueryBuilder's internal context configuration, allowing TraceItemSearchQueryBuilder to manage its own context as designed.
• ✅ Fixed: Duplicate StyledPageFilterBar already exists in logs/styles
  • Removed the duplicate StyledPageFilterBar styled component and imported the existing one from logs/styles instead.

Or push these changes by commenting:

@cursor push dad95cf760

Preview (dad95cf760)

diff --git a/static/app/views/explore/errors/filterContent.tsx b/static/app/views/explore/errors/filterContent.tsx
--- a/static/app/views/explore/errors/filterContent.tsx
+++ b/static/app/views/explore/errors/filterContent.tsx
@@ -1,51 +1,35 @@
-import styled from '@emotion/styled';
-
 import {Grid} from '@sentry/scraps/layout';
 
 import * as Layout from 'sentry/components/layouts/thirds';
 import {DatePageFilter} from 'sentry/components/pageFilters/date/datePageFilter';
 import {EnvironmentPageFilter} from 'sentry/components/pageFilters/environment/environmentPageFilter';
-import {PageFilterBar} from 'sentry/components/pageFilters/pageFilterBar';
 import {ProjectPageFilter} from 'sentry/components/pageFilters/project/projectPageFilter';
-import {SearchQueryBuilderProvider} from 'sentry/components/searchQueryBuilder/context';
-import {t} from 'sentry/locale';
 import {TraceItemSearchQueryBuilder} from 'sentry/views/explore/components/traceItemSearchQueryBuilder';
+import {StyledPageFilterBar} from 'sentry/views/explore/logs/styles';
 import {TraceItemDataset} from 'sentry/views/explore/types';
 
 export function ErrorsFilterSection() {
   return (
     <Layout.Main width="full">
-      <SearchQueryBuilderProvider
-        filterKeys={{}}
-        getTagValues={() => Promise.resolve([])}
-        initialQuery=""
-        searchSource="errors-filter"
-        placeholder={t('Search for errors, users, tags, and more')}
-      >
-        <Grid gap="md" columns={{sm: '1fr', md: 'minmax(300px, auto) 1fr min-content'}}>
-          <StyledPageFilterBar condensed>
-            <ProjectPageFilter />
-            <EnvironmentPageFilter />
-            <DatePageFilter />
-          </StyledPageFilterBar>
+      <Grid gap="md" columns={{sm: '1fr', md: 'minmax(300px, auto) 1fr min-content'}}>
+        <StyledPageFilterBar condensed>
+          <ProjectPageFilter />
+          <EnvironmentPageFilter />
+          <DatePageFilter />
+        </StyledPageFilterBar>
 
-          <TraceItemSearchQueryBuilder
-            initialQuery=""
-            searchSource="errors-filter"
-            booleanAttributes={{}}
-            booleanSecondaryAliases={{}}
-            itemType={TraceItemDataset.ERRORS}
-            numberAttributes={{}}
-            numberSecondaryAliases={{}}
-            stringAttributes={{}}
-            stringSecondaryAliases={{}}
-          />
-        </Grid>
-      </SearchQueryBuilderProvider>
+        <TraceItemSearchQueryBuilder
+          initialQuery=""
+          searchSource="errors-filter"
+          booleanAttributes={{}}
+          booleanSecondaryAliases={{}}
+          itemType={TraceItemDataset.ERRORS}
+          numberAttributes={{}}
+          numberSecondaryAliases={{}}
+          stringAttributes={{}}
+          stringSecondaryAliases={{}}
+        />
+      </Grid>
     </Layout.Main>
   );
 }
-
-const StyledPageFilterBar = styled(PageFilterBar)`
-  width: auto;
-`;

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

[cursor]

Outer provider silently swallows TraceItemSearchQueryBuilder configuration

Medium Severity

The wrapping SearchQueryBuilderProvider with empty/stub props (filterKeys: {}, getTagValues: () => Promise.resolve([])) creates a context that causes the inner TraceItemSearchQueryBuilder's SearchQueryBuilder to skip its own provider creation entirely (see SearchQueryBuilder in index.tsx — it checks for existing context). This means all attribute resolution, tag fetching, field definitions, and filter key sections configured by TraceItemSearchQueryBuilder are silently ignored. The logs tab solves this correctly by passing the output of useTraceItemSearchQueryBuilderProps directly to the outer SearchQueryBuilderProvider. Removing the outer provider would allow TraceItemSearchQueryBuilder to manage its own context as designed.

 

[nikkikapadia]

it's fine for now, i'll separate out this logic into proper hooks later. Right now i've just passed in props that will allow it to render

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

Unstable inline references cause unnecessary context re-renders

Low Severity

filterKeys={{}} and getTagValues={() => Promise.resolve([])} create new object/function references on every render. Both are dependencies in SearchQueryBuilderProvider's internal contextValue useMemo, so the context value changes every render, causing all context consumers (the entire search query builder tree) to re-render unnecessarily. These values could be extracted to stable module-level constants.

 

[nikkikapadia]

a later problem, as i mentioned earlier all of this will be gone once i make the hooks

[sentry]

Bug: The SearchQueryBuilderProvider is hardcoded with an empty configuration, which overrides the TraceItemSearchQueryBuilder's props, breaking the search functionality.
_{Severity: MEDIUM}

Suggested Fix

Remove the hardcoded outer SearchQueryBuilderProvider. Instead, compute the props using a hook like useTraceItemSearchQueryBuilderProps and pass them directly to both a new SearchQueryBuilderProvider and the TraceItemSearchQueryBuilder component, following the pattern in logsTab.tsx.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/views/explore/errors/filterContent.tsx#L16-L43

Potential issue: The `SearchQueryBuilderProvider` in `filterContent.tsx` is initialized
with a hardcoded empty configuration (`filterKeys={{}}`). Because the child
`SearchQueryBuilder` component detects and uses this existing provider context, its own
configuration is ignored. This architectural pattern mismatch will prevent the search
bar from functioning correctly, even after attributes are added to
`TraceItemSearchQueryBuilder`, as the outer provider's empty configuration will remain
authoritative. A refactor of the provider setup is required to fix this.

_{Did we get this right? 👍 / 👎 to inform future reviews.}

[sentry]

Bug: The function itemTypeToRecentSearches is missing a case for TraceItemDataset.ERRORS, causing error searches to be saved incorrectly as log searches.
_{Severity: MEDIUM}

Suggested Fix

In traceItemSearchQueryBuilder.tsx, add a new case to the switch statement inside the itemTypeToRecentSearches function to handle TraceItemDataset.ERRORS and return SavedSearchType.ERROR. Also, consider adding a corresponding case in itemTypeToDefaultPlaceholder for consistency.

Prompt for AI Agent

Review the code at the location below. A potential bug has been identified by an AI
agent.
Verify if this is a real issue. If it is, propose a fix; if not, explain why it's not
valid.

Location: static/app/views/explore/types.tsx#L12

Potential issue: The `itemTypeToRecentSearches` function in
`traceItemSearchQueryBuilder.tsx` is missing a case for `TraceItemDataset.ERRORS`. As a
result, when handling error searches, the function incorrectly falls through to the
default case, returning `SavedSearchType.LOG` instead of the correct
`SavedSearchType.ERROR`. This will cause recent searches for errors to be saved and
categorized under the wrong type ('logs'), breaking the recent searches feature for
errors.

_{Did we get this right? 👍 / 👎 to inform future reviews.}