Transactions for ui.vue.update are sometimes created instead of spans

[filips123]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

8.27.0

Framework Version

Vue 3.4.38

Link to Sentry event

No response

Reproduction Example/SDK Setup

I'm using a custom browserTracingIntegration function that names transactions in a specific way, but it's based on the normal Vue router instrumentation. So, it's possible that this issue is caused by the error in my code. In this case, I would like to know how to fix it.

Steps to Reproduce

Because I'm using custom integration, it's hard to fully reproduce this. I also wasn't able to reproduce it myself, I've only seen on Sentry that it happened to a few users.

Expected Result

All transactions should be named according to the rules in my custom integration, and ui.vue.update and other events should be created as spans on the pageload or navigation transaction.

Actual Result

There seem to be two (slightly related) issues:

Sometimes, transaction names are not parametrized according to the route params, but instead use raw URLs:

• https://gimvicurnik.sentry.io/performance/trace/b52ea50088954306b1c08492756dd671/?node=txn-1d6df7455ef143aca27ad3e8847354eb

This appears to happen because the user hides the page while the document is loading, so the transaction is cancelled with sentry.cancellation_reason document.hidden and sent to Sentry before the Sentry code in the Vue router guard could rename it. This also happens with the default Sentry Vue integration. It's quite easy to reproduce this by adding some delay in another navigation guard and hiding the page before the Sentry integration code runs.

In this case, I would expect that once the Sentry guard executed, it renamed the (already cancelled) transaction to the correct name.

Another issue is that events for component tracing like ui.vue.update - Vue <<VAppBar>> are sometimes created as new transactions instead of spans in the original pageload/navigation transaction:

• https://gimvicurnik.sentry.io/performance/trace/b52ea50088954306b1c08492756dd671/?node=txn-2fd95f47309246a5838ee7345e432b2c
• https://gimvicurnik.sentry.io/performance/trace/1ab7fa4579704b48bcfb32a334fc3847/?node=txn-2b4aa84444af4a9dbd981aab4ee57377
• https://gimvicurnik.sentry.io/performance/trace/db333ba1e1f94e5ca530fd07fc010060/?node=txn-4215a64f27d74dc4a73c328c610913b1
• https://gimvicurnik.sentry.io/discover/results/?query=Vue

This issue seems to have a similar reason as above, as the pageload transaction has been cancelled with sentry.cancellation_reason document.hidden. However, I could not reproduce it myself, so I don't know if it also happens with the default integration.

I would expect that these events were added to the original transaction as spans, even though it has been cancelled, or at least discarded, instead of creating incorrect transactions.

[s1gr1d]

Thanks for your comprehensively described issue!

When the page is hidden, the transaction is finished and will be sent to sentry. So it's not really possible to change the name afterwards. One thing you could do is change the transaction name in beforeSendTransaction.

About the second thing you mentioned: This would need a reproduction but I get that this is difficult with the custom integration. It could also be an issue with the default browserTracingIntegration. I will file this in our internal backlog but a reproduction example is welcome! :)

[filips123]

When the page is hidden, the transaction is finished and will be sent to sentry.

Is it possible to stop finishing transactions when the page is hidden?

About the second thing you mentioned

Unfortunately, I still wasn't able to reproduce it myself, but it continues to happen for a few users:

It appears that it happens when the pageload transaction was cancelled with sentry.cancellation_reason: document.hidden. I've tried hiding the page while it was loading multiple times, but I wasn't able to reproduce this error locally (the transaction is cancelled like expected, but no ui.vue.update transactions are created). If this is helpful, out of all occurrences, it happened around 50% of the times on Safari on iOS, but it also happened on other browsers, like Chrome on Windows, so it doesn't seem to be specific to a single browser.

[s1gr1d]

Is it possible to stop finishing transactions when the page is hidden?

You could try setting markBackgroundSpans (docs here) totrue in the Sentry browserTracingIntegration. This does not mark switching to another tab as hidden.

events for component tracing like ui.vue.update - Vue <<VAppBar>> are sometimes created as new transactions instead of spans in the original pageload/navigation transaction

And I will try to create an E2E test to check this behavior. We have an idea why this might be happening.

[s1gr1d]

I could not reproduce it but I added a change that does not create UI spans if there is no root span: #13568

I will close the issue for now, but feel free to re-open it if you still experience weird behavior or if you are able to reproduce the issue.