feat(explore): Validate trace item search keys asynchronously

[nsdeschenes]

The goal of this PR is to validate the filter keys on any trace item based search query builder. To do this we've introduced a new API endpoint that accepts in a list of attributes and checks to see if they exist and are valid.

We trigger this with a useQuery that runs on mount, and whenever the user modifies the query. We also have guards in place to ignore running the validation if the user is just modifying the filter values as those don't need to be validated, reducing the amount of calls we make.

Validation is currently gated behind this flag: #111752

[linear-code]

EXP-641 Handle async key validation during parsing

[nsdeschenes]

@sentry review

[nsdeschenes]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

[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: Ref guard prevents re-validation on page filter changes
  • Removed the initialQueryValidatedRef guard that prevented the useEffect from re-running when page filters changed, allowing validation to occur on datetime and project changes.
• ✅ Fixed: Concurrent validations can resolve out of order
  • Added a request counter that increments on each validation call and only applies results if the request counter matches, preventing stale results from overwriting newer ones.

Or push these changes by commenting:

@cursor push e2a2ed7b7d

Preview (e2a2ed7b7d)

diff --git a/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx b/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx
--- a/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx
+++ b/static/app/views/explore/components/traceItemSearchQueryBuilder.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useMemo, useRef} from 'react';
+import {useCallback, useEffect, useMemo} from 'react';
 
 import type {SpanSearchQueryBuilderProps} from 'sentry/components/performance/spanSearchQueryBuilder';
 import {
@@ -110,11 +110,9 @@
 
   const {invalidFilterKeys, validateQuery} = useAttributeValidation(itemType, projects);
 
-  const initialQueryValidatedRef = useRef(false);
   useEffect(() => {
-    if (initialQuery && !initialQueryValidatedRef.current) {
+    if (initialQuery) {
       validateQuery(initialQuery);
-      initialQueryValidatedRef.current = true;
     }
   }, [initialQuery, validateQuery]);
 

diff --git a/static/app/views/explore/hooks/useAttributeValidation.tsx b/static/app/views/explore/hooks/useAttributeValidation.tsx
--- a/static/app/views/explore/hooks/useAttributeValidation.tsx
+++ b/static/app/views/explore/hooks/useAttributeValidation.tsx
@@ -1,4 +1,4 @@
-import {useCallback, useState} from 'react';
+import {useCallback, useRef, useState} from 'react';
 
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
 import {usePageFilters} from 'sentry/components/pageFilters/usePageFilters';
@@ -85,6 +85,7 @@
   const organization = useOrganization();
   const {selection} = usePageFilters();
   const effectiveProjects = projects ?? selection.projects;
+  const requestCounterRef = useRef(0);
 
   const validateQuery = useCallback(
     async (query: string) => {
@@ -93,6 +94,7 @@
         setInvalidFilterKeys([]);
         return;
       }
+      const currentRequest = ++requestCounterRef.current;
       try {
         const [data] = await queryClient.fetchQuery(
           validateAttributesQueryOptions({
@@ -103,11 +105,13 @@
             projects: effectiveProjects,
           })
         );
-        setInvalidFilterKeys(
-          Object.entries(data.attributes)
-            .filter(([, result]) => !result.valid)
-            .map(([key]) => key)
-        );
+        if (currentRequest === requestCounterRef.current) {
+          setInvalidFilterKeys(
+            Object.entries(data.attributes)
+              .filter(([, result]) => !result.valid)
+              .map(([key]) => key)
+          );
+        }
       } catch {
         // leave previous state on error
       }

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