ref(ui): Replace EventWaiter class component with useEventWaiter hook#110376
Conversation
github-actions
Bot
added
the
Scope: Frontend
billyvg
changed the base branch from
master
to
billy/feat-add-exception-to-eventwaiter
| try { | ||
| captureError.cause = err; | ||
| } catch { | ||
| // some browsers don't let you set a `cause` |
There was a problem hiding this comment.
all the browsers we support should https://caniuse.com/?search=Error.cause
There was a problem hiding this comment.
I've seen exceptions thrown when trying to write to the property tho. But actually I forgot about the options.cause in Error constructor, will change to use that
| {isLastStep && ( | ||
| <EventWaiter | ||
| api={api} | ||
| organization={organization} | ||
| project={project} | ||
| eventType="profile" | ||
| > | ||
| {({firstIssue}) => ( | ||
| <WaitingIndicator project={project} hasProfile={!!firstIssue} /> | ||
| )} | ||
| </EventWaiter> | ||
| )} |
There was a problem hiding this comment.
This is a bit odd now, we may want to pull the hook up a component instead of calling it for every step (where only a single/last step needs it).
billyvg
changed the base branch from
billy/feat-add-exception-to-eventwaiter
to
master
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Otherwise we do not have a very useful stacktrace since we are capturing and creating a new exception in the catch block
Replace the legacy EventWaiter render-prop class component with a modern useEventWaiter hook that uses useApiQuery with refetchInterval for polling. This eliminates manual setInterval management, the withApi HOC, and the render-prop pattern in favor of React Query's declarative polling lifecycle. Migrates all 4 consumers to use the hook directly.
Consumers can react to the hook's return value directly instead of using a callback. This removes the onIssueReceived prop and replaces `useState` + callback patterns with simple `!!firstIssue` derivation.
Replace the legacy EventWaiter render-prop class component with a modern useEventWaiter hook that uses useApiQuery with refetchInterval for polling. This eliminates manual setInterval management, the withApi HOC, and the render-prop pattern in favor of React Query's declarative polling lifecycle. Migrates all 4 consumers to use the hook directly.
…ter hook" This reverts commit fd3fc4962cc703bc1cb324d6a83739e8f225e190.
billyvg
force-pushed
the
billy/ref-react-change-event-waiter-hook
branch
from
9334684 to
c1d4612
Compare
| Sentry.captureException( | ||
| new Error(`Error polling for first ${eventType} event`, {cause: err}) | ||
| ); | ||
| }, [projectQuery.error, eventType]); |
There was a problem hiding this comment.
not sure if we'll need a custom fingerprint here
There was a problem hiding this comment.
Because of cause? I don't think cause should affect grouping
There was a problem hiding this comment.
making a new error in an effect doesn't always group super well, we might have fixed some of that though
There was a problem hiding this comment.
Ah, because of the react stack trace? I'll keep an eye on it
2 participants
Replace the legacy
EventWaiterrender-prop class component with a modernuseEventWaiterhook that usesuseApiQuerywithrefetchIntervalfor polling.What changed:
useEventWaiterhook replaces the class component, using React Query'srefetchIntervalinstead of manualsetIntervalwithApiHOC dependency — the hook usesuseApiQueryinternallyupdatedEmptyState,performanceOnboarding/sidebar,profiling/onboarding,performance/onboarding) from the render-prop pattern to direct hook usageeventWaiter.tsxclass component and its tests, adds new hook-specific testsWhy:
The codebase has fully adopted React Query for API polling (see
usePollReplayRecord,useAiSpanWaiter).EventWaiterwas one of the last holdouts using manualsetIntervalpolling, class components, and thewithApiHOC — all patterns the codebase has moved away from. React Query'srefetchIntervalhandles the polling lifecycle (start/stop/cleanup) automatically with proper cleanup on unmount.Notable detail:
In
performance/onboarding.tsx, the hook had to be placed above early returns to comply with React's Rules of Hooks. Thedisabledprop handles the conditional logic that was previously implicit (the<EventWaiter>JSX element was only rendered in the non-early-return path).