Sentry fails to track Vue components and produces "deadline_exceeded" transactions

[filips123]

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?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/vue

SDK Version

7.12.1

Framework Version

Vue 7.12.1

Link to Sentry event

No response

Steps to Reproduce

The repository of a website where this happens is https://github.com/filips123/GimVicUrnik, and the website code is in the website directory. The commit which updated Sentry SDK to 7.8.1 is https://github.com/filips123/GimVicUrnik/commit/e9c16eab8efb257ff0a4360199c165dee7587c07. I use a custom vueRouterInstrumentation function so transactions are named in a different style than default instrumentation, but the same problem happens even on default instrumentation.

All screenshots and transactions provided below are from the development Vue build, but the problem also happens in a production version.

Instructions for running the projects are in the repo but may be a bit complicated. I can try to create a new repository with easier reproduction steps if needed.

Expected Result

1. Sentry correctly tracks Vue components and ends the transaction shortly after the site finished loading.

   Screenshot of a working transaction (Sentry 6.17.9):

   Link to the transaction: https://sentry.io/organizations/filips/performance/test-vue:a993ea1348174e78aec08500c6fcc77c

---

2. Sentry correctly tracks components and ends the transaction even on transactions with navigations/redirects.

   Screenshot of a working transaction (Sentry 6.3.5):

   Link to the transaction: https://sentry.io/organizations/filips/performance/test-vue:672077d580f0495f9030717680401e3e

Actual Result

1. Sentry only tracks "ui.vue - Application Renderer" (but not actual components) which never ends, causing the transaction to be canceled after ~15s with the status "deadline_exceeded".

   This started to happen after the update to Sentry SDK 7.0.0.

   Screenshot of an incorrect transaction (Sentry 7.12.1):

   Link to the transaction: https://sentry.io/organizations/filips/performance/test-vue:4063bce05108426c8e25531c702c2953

---

2. On transactions with redirection, some component updates are taking forever, causing the transaction to be canceled with "deadline_exceeded".

   This started to happen even before Sentry SDK 7.0.0, but I'm not sure when. It was fine in 6.3.5.

   Screenshot of an incorrect transaction (Sentry 6.17.9):

   Link to the transaction: https://sentry.io/organizations/filips/performance/test-vue:9d82327c31e2428c8a4c4d2076e6ee4f

    

   On newer Sentry SDK versions, the problem is a bit different. Sentry tracks nothing except "pageload" and "ui.vue", but still cancels transaction with "deadline_exceeded".

   Screenshot of an incorrect transaction (Sentry 7.12.1):

   Link to the transaction: https://sentry.io/organizations/filips/performance/test-vue:0fe82c5e71654a679dcb2380f74bee53

[lforst]

Hi @filips123, thanks for reporting these issues, and thank you for providing such detailed explanations. We will take a look!

[akasummer]

Hi, I am experiencing exactly the same issue:

[lforst]

To help me debug this, what have you set the trackComponents and hooks options to in createTracingMixins()?

[filips123]

I've set trackComponents to true and haven't set hooks (source).

[akasummer]

I have trackComponents: true and hooks: ['activate', 'mount', 'update']

[akasummer]

Also, before 5th of September it was showing correct performance values with the same sentry config. On 5th of September we updated dependencies and did a release and since then statistics are broken.

[lforst]

Hi everybody, we attempted to fix this in https://github.com/getsentry/sentry-javascript/pull/5918 which got released in version 7.15.0 of the SDK. Would you mind trying out the new version and report back whether that resolves the issue? Thank you!

[filips123]

Unfortunately, it doesn't fix the issue for me (also, I now updated Vue to 2.7.13 and Vuetify to 2.6.11).

Example transaction:

[lforst]

Hi again, we released version 7.16.0 which may contain a fix (related https://github.com/getsentry/sentry-javascript/issues/5917).

May I ask you again to try it out? Thank you!

[filips123]

It seems it's fixed now.

[lforst]

@filips123 Amazing. Thanks for checking!

I will close this issue. Feel free to ping me here if any new issues come up!