Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(vue): Start pageload transaction earlier to capture missing spans #5983

Merged
merged 3 commits into from Oct 18, 2022

Conversation

Lms24
Copy link
Member

@Lms24 Lms24 commented Oct 18, 2022

This PR makes the pageload transaction start a little earlier in the Vue routing instrumentation, allowing our SDK to add the root ui.vue.render span and a few missed child component spans to the now available and active transaction.

Previously, in our Vue routing instrumentation, the pageload transaction would only be created when the beforeEach hook of the Vue router was called for the first time. This worked reasonably well in Vue 2 apps where this hook was called before any components were rendered. However, in Vue 3 (Vue router v3 and v4) it seems like the routing/rendering process was changed so that the root component would be rendered before the initial beforeEach router hook call.

To be clear, this change makes the pageload transaction always start with a url transaction source (because we don't yet have a matched route at this stage). However, it is updated to a more high-quality source later on - exactly at the time where we previously used to start the transaction. IMO this is fine because by now we've realized that the timing problem of transaction names in DSC propagation requires more fundamental changes. Furthermore, this increases the quality of the pageload transaction, as it is now showing a more representative starting time. This matches the behaviour of other routing instrumentations, such as Angular or Express.

fixes #5910

@Lms24 Lms24 marked this pull request as ready for review October 18, 2022 09:12
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 for this change to enforce the same behaviour as other routing instrumentations.

packages/vue/src/router.ts Show resolved Hide resolved
packages/vue/src/router.ts Show resolved Hide resolved
@Lms24 Lms24 merged commit 4080ee9 into master Oct 18, 2022
@Lms24 Lms24 deleted the lms-fix-vue-cmp-tracking branch October 18, 2022 10:42
Lms24 added a commit that referenced this pull request Oct 27, 2022
…ctions (#6060)

As brought to our attention in #6048, our pageload transaction start change (which makes the transaction start earlier) introduced in #5983 caused custom transaction names to be overwritten when `beforeNavigate` is used to update the transaction name. 

This patch fixes this problem by checking for the transaction source before (not) updating the current transaction name with the resolved route name once the router's `beforeEach` hook was called. Furthermore, it adds a test to cover this case. 

See #6048 (comment) for the motivation for creating this PR.
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.

Vue SDK doesn't create root application loading span in Vue 3 apps
2 participants