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

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 package are you using?

@sentry/vue

SDK Version

7.12.1

Framework Version

Vue 2.7.10

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 filips123/GimVicUrnik@e9c16ea. 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