@sentry/vue: unmount/destroy lifecycle hooks do not work on vue 3

[snoozbuster]

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

@sentry/vue

SDK Version

7.79.0

Framework Version

7.79.0

Link to Sentry event

No response

SDK Setup

import { App } from 'vue';
import * as Sentry from '@sentry/vue';

function installSentry(Vue: App) {
 Sentry.init({
    Vue,
    attachProps: true,
    logErrors: true,
    tracingOptions: {
      hooks: ['destroy', 'mount', 'update'],
      trackComponents: true,
    },
    // ... other stuff, not relevant
  });
}

Steps to Reproduce

1. Configure the Vue integration with 'destroy' in the hooks.

Expected Result

1. No warnings are logged when @vue/compat is installed.
2. Destroy span tracking works on Vue 3 when @vue/compat is not installed

Actual Result

Observe that no spans are created for unmounting.

Bonus:

If @vue/compat is installed to provide Vue 2.x support to a Vue 3.x runtime and the OPTIONS_BEFORE_DESTROY and OPTIONS_DESTROYED flags are turned on, the spans are probably created, but these warnings are logged on every single component (assuming Sentry is initialized in a context where vue warnings are enabled):

[snoozbuster]

Root cause:

One of the breaking changes in Vue 3 was the renaming of beforeDestroy to beforeUnmount (and destroyed to unmounted). However, createTracingMixins is hard-coded to use the old (Vue 2.x) hook names.

[Lms24]

Hi @snoozbuster thanks for reporting and thanks for the great additional information! We should definitely fix this. However, at the moment, we are completely booked with high-prio tasks and cannot take this on. I'm gonna backlog this issue for now - no ETA unfortunately.

If anyone wants to take a stab at this, please feel free to open a PR. Happy to review!
I believe a good starting point would be to differentiate between Vue 2 and 3 (We probably can do this by checking the structure of the app object being passed into Sentry.init) and adjusting the hook names in the tracing mixin.

[snoozbuster]

@Lms24 I've opened a simple PR to at least add the support, but I had a little bit of trouble with the tests.

[Lms24]

Thanks a lot @snoozbuster! We'll try to review it soon