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

[Lms24]

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.14.2

Framework Version

Vue 3

Link to Sentry event

No response

Steps to Reproduce

1. Create Vue 3 app with a few components
2. In main.ts:

import { createApp } from "vue";

import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

import App from "./App.vue";
import router from "./router";
import { ENVIRONMENT, VERSION } from "./info";

const app = createApp(App);

Sentry.init({
  app,
  dsn: "https://853903a578cc439489edbcd712ac0441@o1151230.ingest.sentry.io/6391918",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost",  /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
  trackComponents: true,
  debug: true,
});

app.use(router);
app.mount("#app");

Expected Result

According to docs soon as the SDK is initialized (without any additional component tracking config), the ui.vue.render root application loading span should be added to the ongoing pageload transaction.

Actual Result

ui.vue.render is not added to the ongoing transaction in a Vue 3 app

To do:

• Verify that this span shows up in Vue 2 apps
  • It works but also Vue2 has issues because of Dangerous const to var rollup plugin #5925
• Find a fix

[Lms24]

I created a small Vue2 test app (pita setting up legacy projects...)

Seems like, the root rendering span is created but the child component spans are not. trackComponents set to true

[Lms24]

The reason why the root span isn't created is because at the time when the App component is initialized, it seems like our pageload transaction wasn't yet started.

[AbhiPrasad]

If we're going to make this support vue router v2,v3,v4, we should make sure we also update the docs to include this information.

[Lms24]

So we're not technically not supporting anything new with the changes in #5983. Our instrumentation seemed to work with vue router 3 and 4 well, except for the later start of the pageload txn.
But yes, we should def. update docs, gonna open up an issue for it.