Extra spans recorded in navigation transaction

[linxiaowang]

Is there an existing issue for this?

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

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using?

@sentry/vue

SDK Version

7.107.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

Performance page to see event details

Expected Result

Has no Vue.update spans in navigation transactions

Actual Result

Has Vue.update spans in pageload transactions, And recorded user's interaction in page

[mydea]

I do not understand, why would you expect to have no child spans? Or are you saying you would expect there to be child spans but they are not there?

[linxiaowang]

I do not understand, why would you expect to have no child spans? Or are you saying you would expect there to be child spans but they are not there?

I found that there are records of both user and system operations within the spans of navigation-type transactions. I believe these records should not exist as they prolong the duration of the transaction.

[linxiaowang]

I do not understand, why would you expect to have no child spans? Or are you saying you would expect there to be child spans but they are not there?

I found that there are records of both user and system operations within the spans of navigation-type transactions. I believe these records should not exist as they prolong the duration of the transaction.

I apologize for not being able to provide the screenshot. Here is the record I found in the breadcrumb, which, in my opinion, should not be recorded. ui.click div.el-form-itemcontent > div.el-input-number.el-input-number--small 信息 16:27:16 ui.input div.el-input.el-input--small > input.el-inputinner[type="text"] 信息 16:27:14 ui.click div.el-input.el-input--small > input.el-input__inner[type="text"] 信息 16:27:13 ui.click div.data-list > ul.ul > li.li.hover

[mydea]

So breadcrumbs will not have an effect on the duration of the navigation transaction! Only spans affect this, and for this we only look at fetch / xhr requests that are ongoing out of the box, I believe.

[linxiaowang]

So breadcrumbs will not have an effect on the duration of the navigation transaction! Only spans affect this, and for this we only look at fetch / xhr requests that are ongoing out of the box, I believe.

I want to know which nodes record the end of spans in the 'pageload' and 'navigation' within a transaction. The breadcrumb excerpt mentioned above is captured after the page has finished loading and during the interaction between the user and the system. I'm curious why this type of interaction is also recorded in the transaction

[lforst]

@linxiaowang since we can never fully be sure when a page is "done loading" we are using a set of heuristics to terminate the transaction when we don't see any more activity on the page.

This is the code responsible: https://github.com/getsentry/sentry-javascript/blob/7cc5b4e7da0cc47ad7ccc9c861e1992cf768c4c6/packages/core/src/tracing/idleSpan.ts#L81

Does this explain it for you?

If not, please provide more details of what is unclear to you.

[linxiaowang]

Thank you for your patient response, but I still have some confusion. I noticed that the browserTracingIntegration has three time-related parameters (idleTimeout, finalTimeout, heartbeatInterval). I would like to know which parameter exactly determines the end of a transaction, as these three parameters seem to have similar functions or there have more complex operations involved than what I initially thought

[lforst]

The idleTimeout is the timeout that finishes the transaction when there is no active span. The heartbeat is a timeout that finishes the transaction when the span count doesn't change for a while. The final timeout is a timeout that finishes the transaction no matter what.