Skip to content

fix(browser): Ignore React 19.2+ component render measure entries#17905

Merged
Lms24 merged 2 commits intodevelopfrom
lms/fix-react-19.2-ignore-component-measure-entries
Oct 15, 2025
Merged

fix(browser): Ignore React 19.2+ component render measure entries#17905
Lms24 merged 2 commits intodevelopfrom
lms/fix-react-19.2-ignore-component-measure-entries

Conversation

@Lms24
Copy link
Copy Markdown
Member

@Lms24 Lms24 commented Oct 10, 2025

This PR fixes a performance overhead regression that would emerge when using any browserTracingIntegration in an React 19.2+ app that is running in dev mode or a React Profiler build.

With 19.2, React introduced custom perfomance tracks in chrome dev tools. This track is populated by collecting performance.measure entries for every component (re-)render. Sounds good in theory but in reality this causes a massive performance degradation when using the Sentry SDK because we collect spans from PerformanceMeasure entries. In our Sentry UI, this caused 10+ second long blocks because we created thousands of spans from these render entries.

This PR fixes this performance drop by inspecting the measure entries' detail object which we can use to fairly well distinguish React's entries from users' entries. Not 100% bulletproof but I think good enough.

Alternatives Considered

Can't we just filter them out by name?

Unfortunately, we cannot filter them by name via the ignorePerformanceApiSpans option because React simply uses the component name (+ a few static strings in some occasions) for the entry's name property. I briefly tried hacking this in by relying on the \u200b (empty space character) that React prefixes the entries with. However, the static strings don't have the same prefix, so we can't get them all with this. Also, the prefix was only added to work around a Chrome DevTools bug, which at some point will get released. In which case, React could just drop the prefixes all together.

^ Didn't think I'd dive into the React code base today but well ... here we are 😅

Aren't these entries useful?

Well maybe. The thing is, they're only emitted in dev mode, so pretty useless for default prod builds. These entries will be emitted when wrapping a <Profiler> component around the sub tree but here my React knowledge isn't enough to know if people do this in prod. We can definitely revisit excluding all entries, e.g. in favour of an allowlist for which components should be tracked. For now, I'd like to avoid slowing down anyone's app by default.

closes #17888

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

reactRouterV6BrowserTracingIntegration perf issues with React 19.2 (development env only)

2 participants