Support for Vue 3

[Kocal]

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!

[paulshen]

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 })],
});

[Kocal]

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?

[paulshen]

@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

[Kocal]

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)

[9mm]

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

[dnlsndr]

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

[kamilogorek]

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

[eino]

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

[EKami]

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

[dnlsndr]

Any news on this?

[stripathix]

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

[Kocal]

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?

[scott-leung]

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.

[Kocal]

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)?

[scott-leung]

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.

[Kocal]

ping @HazAT 👀

[stripathix]

Any ETA on support for Vue3 ☹️ . Even Vue3 docs says that sentry allows logging errors but sentry doest supports it yet.

[soerenmartius]

Any ETA on support for Vue3 ☹️ . Even Vue3 docs says that sentry allows logging errors but sentry doest supports it yet.

I'd also be interested in a timeline. Thank you!

[wulisensen]

I get same problem.So this problem has been resolved?

[AnwarElbo]

Any news on this?

[gerebdavid]

Does Sentry support Vue 3?

[domasgru]

@paulshen I guess I am missing something, but from where should I get that VueIntegration class, that you mention in this message #2925 (comment).

[paulshen]

@domasgru I've updated the comment. It's from @sentry/integrations

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

[kamilogorek]

We are aware of the need for Vue 3 support and will try to work on it shortly. Will keep everyone posted!

[Kocal]

That's a great news, thanks!

[manuelmazzuola]

I can't get it to work

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

const app = ...

Sentry.init({
  attachProps: true,
  dsn: externalConfig.sentry.dsn,
  integrations: [
    new VueIntegration({ Vue: app }),
  ],
  tracingOptions: {
    trackComponents: true,
  },
});

TS2322: Type 'Vue' is not assignable to type 'Integration'.
  Types of property 'setupOnce' are incompatible.
    Type '(_: (callback: EventProcessor) => void, getCurrentHub: () => Hub) => void' is not assignable to type '(addGlobalEventProcessor: (callback: EventProcessor) => void, getCurrentHub: () => Hub) => void'.
      Types of parameters '_' and 'addGlobalEventProcessor' are incompatible.
        Types of parameters 'callback' and 'callback' are incompatible.
          Type 'import("/home/originof/src/control-panel/node_modules/@sentry/integrations/node_modules/@sentry/types/dist/eventprocessor").EventProcessor' is not assignable to type 'import("/home/originof/src/control-panel/node_modules/@sentry/types/dist/eventprocessor").EventProcessor'.
            Types of parameters 'event' and 'event' are incompatible.
              Type 'import("/home/originof/src/control-panel/node_modules/@sentry/types/dist/event").Event' is not assignable to type 'import("/home/originof/src/control-panel/node_modules/@sentry/integrations/node_modules/@sentry/types/dist/event").Event'.
                Types of property 'spans' are incompatible.
                  Type 'import("/home/originof/src/control-panel/node_modules/@sentry/types/dist/span").Span[] | undefined' is not assignable to type 'import("/home/originof/src/control-panel/node_modules/@sentry/integrations/node_modules/@sentry/types/dist/span").Span[] | undefined'.
                    Type 'import("/home/originof/src/control-panel/node_modules/@sentry/types/dist/span").Span[]' is not assignable to type 'import("/home/originof/src/control-panel/node_modules/@sentry/integrations/node_modules/@sentry/types/dist/span").Span[]'.
                      Type 'Span' is missing the following properties from type 'Span': toContext, updateWithContext
    26 |   dsn: externalConfig.sentry.dsn,
    27 |   integrations: [
  > 28 |     new VueIntegration({ Vue: app }),

[Daniel-Kao]

any news on this?

[LonHon]

@paulshen Thanks, but it not work in my project.
i changed parts of your code to make it work, look below:

BG: vue@3.0.5

[andresespinosapc]

@starker-xp maybe you could include in your comment the info tag from #2925 (comment)

[h3]

@vrusua Vue3 integration (with Quasar) works for me using both the answers provided by starker-xp . Even the sourcemap upload with webpack-pluging works.

Here's the packages/versions used (no need to install @sentry/vue):

    "@sentry/browser": "^6.8.0",
    "@sentry/tracing": "^6.8.0",
    "@sentry/webpack-plugin": "^1.15.1",

[andresespinosapc]

@h3 can you explain how you use the sourcemaps? With the Vue integration I could see the line where the error originated, but with @starker-xp solution I can't

[starker-xp]

@starker-xp maybe you could include in your comment the info tag from #2925 (comment)

Done

[h3]

@andresespinosapc After verification it looks like the code/lines are indeed missing from the sentry error even with source maps being uploaded. Seems like we have no choice but to wait for the proper Vue 3 support .. sadly it doesn't seem there's much movements in that direction :(

[yakobe]

This is depressing 😔. I love sentry and want to keep using it but with no proper support in sight we are now having to consider other platforms. At least if we had some sort of roadmap we could plan around it. The workarounds are "ok" but don't really cut it. All our new project are embracing vue3 but we are blocked on this.
Is there something that we can help with? Testing? Removing impediments?

[1beb]

Perhaps it's because I'm new to Sentry, but it appears to be working as expected with the workaround from @starker-xp in his comment: #2925 (comment)

[yakobe]

A certain amount works and it's ok. But the integration isn't as good as vue 2 and some things are not quite right.
Maybe at least some official docs in the vue section would help so we can have a reference of how to configure it best for vue 3 and what works and what doesn't. Some tweaks on a GitHub issue with varying degrees of success is not really "supported".

[blayzen-w]

I've been using an implementation similar to @starker-xp since the release of Vue 3 in production and its been working fine for me, source maps and all. The only difference is that I'm recording it in the errorCaptured function instead but it seems to work the same as the global option. I would just make sure that the errorHandler function is being called and triggering the Sentry.captureException function. This could be blocked if a component or app is returning false with the errorCaptured function which prevents propagation to the global handler. When I initially missed that, exceptions within the vue applications and components were not being tracked but things outside of it were. Official support would be nice but it seems to be working.

[1beb]

One issue that I have frequently is Non-Error exception captured with keys: currentTarget, isTrusted, target, type being reported to Sentry. I suspect that's related to this setup. Not sure how to fix that one.

[tjk]

EDIT: See #3804

While we wait patiently, I took a stab at a vue 3 port: https://github.com/tjk/sentry-vue3#readme.

Please check it out CAREFULLY and let me know if it works / doesn't work -- maybe we can get something decent in the interim.

---

Main changes are:

• vm.$options read-only? so I used vm._[hook] like internal injectHook
• vm.$once is gone so I just count calls to the hook and only run on second invoke
• change how pageload instrumentation runs

[Lrochefort]

Do you have an ETA on Vue 3 support?

[kamilogorek]

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

[kamilogorek]

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!

[tjk]

@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

[david-wb]

@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']
  });

[tjk]

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

[kamilogorek]

Shipped in 6.10.0. New docs are available at:

• https://docs.sentry.io/platforms/javascript/guides/vue/
• https://docs.sentry.io/platforms/javascript/guides/vue/configuration/integrations/vue-router/

[m00nk]

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 ... ?) ((

[kamilogorek]

@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/

[m00nk]

@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).

[kamilogorek]

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

[m00nk]

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

[h3]

@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".

[m00nk]

@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 ((

[kamilogorek]

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