ui.react.mount, ui.react.render spans are not captured in navigation transactions [react-router-v6]

[jarosik10]

Hi, i'm not sure if it is a bug, but the spans generated by withProfiler are only captured in pageload transactoins. HOC wihtProfiler is wrapping the root component and the components rendered via Route.

Pageload transactions include: all the ui spans, request spans and web vitals metrics.
Navigation transactions include only request spans.

Does anyone have an idea why this is happening?

I'm using reactRouterV6Instrumentation as routingInstrumentation + Sentry.withSentryReactRouterV6Routing(Routes);
StrictMode is disabled.

[jarosik10]

I see that Profiler contructor is called before beforeNavigate.

[jarosik10]

Navigation from /machines to /qualifications

Sentry Logger [log]: [Tracing] finishing IdleTransaction 2023-10-03T07:55:14.294Z navigation
Sentry Logger [log]: [Tracing] Adding & adjusting spans using Performance API
Sentry Logger [log]: [Tracing] Starting 'resource.css' span on transaction '/machines' (aa4bd9e12f113b95).
Sentry Logger [log]: [Tracing] Starting 'resource.script' span on transaction '/machines' (aa4bd9e12f113b95).
Sentry Logger [log]: [Tracing] Starting 'resource.beacon' span on transaction '/machines' (aa4bd9e12f113b95).
Sentry Logger [log]: [Tracing] Starting 'resource.img' span on transaction '/machines' (aa4bd9e12f113b95).
Sentry Logger [log]: [Tracing] flushing IdleTransaction
Sentry Logger [log]: [Tracing] Starting navigation transaction on scope
Sentry Logger [log]: Setting idle transaction on scope. Span ID: be464e3364e606c9
Sentry Logger [log]: [Tracing] starting navigation transaction - /qualifications
Sentry Logger [log]: Starting heartbeat
Sentry Logger [log]: pinging Heartbeat -> current counter: 0
Sentry Logger [log]: [Tracing] pushActivity: 9edd0d2350385dd0
Sentry Logger [log]: [Tracing] new activities count 1
Sentry Logger [log]: [Tracing] Starting 'http.client' span on transaction '/qualifications' (be464e3364e606c9).
Sentry Logger [log]: [Tracing] popActivity 9edd0d2350385dd0
Sentry Logger [log]: [Tracing] new activities count 0
Sentry Logger [log]: [Tracing] Starting 'ui.long-task' span on transaction '/qualifications' (be464e3364e606c9).
Sentry Logger [log]: [Tracing] finishing IdleTransaction 2023-10-03T07:55:16.302Z navigation
Sentry Logger [log]: [Tracing] Adding & adjusting spans using Performance API
Sentry Logger [log]: [Tracing] flushing IdleTransaction
Sentry Logger [log]: [Tracing] Finishing navigation transaction: /qualifications.
Sentry Logger [log]: Adding outcome: "event_processor:transaction"
Sentry Logger [log]: An event processor returned `null`, will not send event.

[jarosik10]

Btw. i'm using mobx. So my App component is already wrapped in HOCs.
export default Sentry.withProfiler(inject('commonStore', 'usersStore', 'messagesStore')(observer(App)));.

Anyway, I also tried to use Sentry.useProfiler() instead of Sentry.withProfiler().

[AbhiPrasad]

Ah try inject('commonStore', 'usersStore', 'messagesStore')(observer(Sentry.withProfiler(App)));

we can't detect any updates if it's wrapped above the HOC since we can't see changes in the props passed in.

[jarosik10]

Unfortunately, observer must be the innermost decorator. I've tried to move it around, use useProfier hook instead of hoc, but still ui.react spans are not generated during navigation.

[jarosik10]

Hmm... even in this basic example https://stackblitz.com/edit/github-7tjxzc-kxmnga?file=src%2FApp.tsx ui.react spans are generated only on pageload transaction.