Support for Vue 3

Hi!

Vue 3 has been released yesterday and I would like to know if its support was planned, or if I can help on it.

Thanks!

I haven't tested it fully but passing the app instance instead of the global Vue seems to work for the most part.

import { createApp } from 'vue';
import { Vue as VueIntegration } from '@sentry/integrations';

const app = createApp(App);
Sentry.init({
  ...
  // instead of passing Vue default export
  integrations: [new VueIntegration({ Vue: app })],
});

Oh, that's right, I didn't think about doing this.

But, if we initialize Sentry after creating our Vue app, it means that Sentry won't be able to capture errors that happens in createApp() and App component (e.g.: in hook created), which is a big change, right?

@Kocal

@Kocal I'm new to Vue but my guess is most of that happens when you call app.mount, which you can call after Sentry.init

Yes that's true, however it's less "immediate" than before... but I guess we can't do much.

I've identified some breaking changes when using Vue 3:

https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L159: it won't be possible to use global Vue since Vue.mixin (https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L375) does not exists anymore. User need to explicitly pass their Vue app instance
https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L255 & https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts#L307, vm.$once has been removed (Remove instance event API methods vuejs/rfcs#118)

Also interested in this for my new vue 3 app with sentry

This is actually a blocking requirement for us, we are really interested in resolving this. Maybe I can somehow help

@onmyflow

@onmyflow I'm currently scheduled to write a standalone @sentry/vue package, and would love to have a prepared list of things to take care of before I start writing it. I'm not up to date with Vue3 just yet, and other than @Kocal comment (thanks!) I'll have to read through to find the breaking changes.

@paulshen

I tried @paulshen 's way ; it looks so close yet so far, as I get the following error:

Type 'ComponentPublicInstance(..) is missing the following properties from type 'VueInstance': config, mixin. Seems indeed those are attributes that have been displaced in Vue3

Same issue here, would be great to have sentry support for Vue 3

Any news on this?

This is a blocking issue for Vue 3 upgrade for my application :-(. Any update on this?

One issue is #2953 which splits the Vue integration in another package @sentry/vue.
Should we wait this package to be released, or we can start to migrate the current Vue integration to Vue 3?

Also, should we keep Vue 2 support?

One issue is #2953 which splits the Vue integration in another package @sentry/vue.
Should we wait this package to be released, or we can start to migrate the current Vue integration to Vue 3?

Also, should we keep Vue 2 support?

I think we should keep Vue 2 support, because most of Vue Developers are still using Vue2.
But support for Vue 3 will be increasingly needed in the feture.

Also, how we will handle event for lifcycle hooks (vm.$once('hook:...')) and the new lifecycle events from the Composition API (https://vue-composition-api-rfc.netlify.app/api.html#lifecycle-hooks)?

I think it's right that splits the Vue integration in another package @sentry/vue.
And I'm going to work on it together and speed it up.

It's "finally" here. #3804
Tested on Vue 2 and Vue 3, with and without TypeScript. Reviews, feedback, local testing welcome :)

Vue 3 support has been released as 6.10.0-beta.

npm install @sentry/vue@6.10.0-beta
npm install @sentry/tracing@6.10.0-beta

The how-to guide can be found in this PR: #3804
Available options: https://github.com/getsentry/sentry-javascript/blob/master/packages/vue/src/types.ts#L26-L67

Would really appreciate some community testing before we released it as 6.10.0, especially that there are so many people wanting to use it :) Thanks!

@kamilogorek

@kamilogorek great work! Where would you like (future) feedback?

I've seen one error from 6.10.0-beta so far and it's in the new CLS code in @sentry/tracing --

Example sentry events:

a8f618fb47f943b8a7c4bb334ecc405d
c3948c9c0ac8452e93da3fe3b4b40df4
13841f85debe44a9beb329a6faf876cd

@kamilogorek

@kamilogorek I experienced this error using the beta package you published. Seems to originate within the package itself.

TypeError: Cannot read property 'startTime' of undefined
  at a(webpack://[REDACTED]/./node_modules/@sentry/tracing/esm/browser/web-vitals/getUpdatedCLS.js:34:52)
  at Array.map(<anonymous>)
  at PerformanceObserver.<anonymous>(webpack://[REDACTED]/./node_modules/@sentry/tracing/esm/browser/web-vitals/lib/observe.js:32:83)

I am initializing like this

  Sentry.init({
    // `app` and `Vue` options are interchangeable and are only for UX purpose, as in Vue 2 you are passing constructor, where in Vue 3 it's an instance
    app,
    dsn: "...",
    integrations: [
      new Integrations.BrowserTracing({
        // list of URLs to capture for tracing
        tracingOrigins: [
          "localhost",
        ],
      }),
    ],
    tracesSampleRate: 1.0,
    logErrors: true,
    trackComponents: true,
    // or specify specific names
    // trackComponents: ["App", "AppNavigation", "AppFooter"],
    hooks: ["activate", "create", "destroy", "mount", "update"],
    // or use default hooks ['activate', 'mount', 'update']
  });

@david-wb

@david-wb that is the exact same issue commented above and fixed via #3816. Fix should be included in 6.10.0-beta.2.

Shipped in 6.10.0. New docs are available at:

I have tried to update the code related the instruction https://docs.sentry.io/platforms/javascript/guides/vue/

Now I see the browser sends event data to the sentry server and gets the correct answers:

But I see no new errors/issues in the sentry dashboard. Looks like all events were dropped (as incorrect or ... ?) ((

@m00nk

@m00nk is this error or a session request though? Because by default you shouldn't get any errors obviously, and sessions can be seen in project page, not issues. see https://docs.sentry.io/product/releases/health/

@kamilogorek

@kamilogorek I assume this is error. I have made a fake error in my code and run

throw new Error('My Error');

and I see the browser sent the request to the sentry server and got an answer. So the issue has to be shown in the project dahsboard, but the issues/errors page is empty (see the screenshots above).

@m00nk

@m00nk you can go to Inbound Filters in the Project Settings and/or Subscription in your overall Settings to see if any events were delivered/dropped and why.

@kamilogorek

@kamilogorek I have opened Inbound Filters page and see the message "Nothing filtered in the last 30 days.". Also all filters are disabled.

@m00nk

@m00nk had a similar issue which was twofold, first it was the sentry returning a 429 (api throttling) and after a while errors started being sent correctly (I had a unique hash in the response) but I still did not see anything in the Issues section.

In my case it was the environment detection that failed so the payload were sent in the production environment while I was looking in the development issues. You can verify this is not your case by making sure you have no environment selected (top bar), it should say "All Environments".

@h3

@h3 Thanks for the idea. I have checked the environments settings at it is "All Environments".

Also about 2 weeks ago all my other projects (most of them are PHP-base) stopped to catch any issues too. So now all my projects have no issues at all for last two weeks. I did not change anything on those other projects mot the half of year. I assume the Sentry team made some critical changes so old code is not working now too ((

@m00nk

@m00nk can you send me your org/project to email/discord? I'll see if there's something going one.

Navigation Menu

Repository navigation

Support for Vue 3 #2925

39 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Support for Vue 3 #2925

Description

Activity

paulshen commented on Sep 19, 2020

Kocal commented on Sep 20, 2020

paulshen commented on Sep 20, 2020

Kocal commented on Sep 20, 2020

9mm commented on Sep 30, 2020

dnlsndr commented on Sep 30, 2020

kamilogorek commented on Oct 1, 2020

eino commented on Oct 2, 2020

godardt commented on Oct 8, 2020

dnlsndr commented on Oct 24, 2020

stripathix commented on Oct 31, 2020

Kocal commented on Oct 31, 2020

scott-leung commented on Nov 4, 2020

Kocal commented on Nov 4, 2020

scott-leung commented on Nov 4, 2020

39 remaining items

kamilogorek commented on Jul 14, 2021

kamilogorek commented on Jul 16, 2021

tjk commented on Jul 16, 2021

david-wb commented on Jul 20, 2021

tjk commented on Jul 20, 2021

kamilogorek commented on Jul 22, 2021

m00nk commented on Jul 22, 2021

kamilogorek commented on Jul 22, 2021

m00nk commented on Jul 22, 2021

kamilogorek commented on Jul 27, 2021

m00nk commented on Jul 27, 2021

h3 commented on Jul 27, 2021

m00nk commented on Jul 27, 2021

kamilogorek commented on Jul 28, 2021

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions