feat(vue): Rework tracing and add support for Vue 3 by kamilogorek · Pull Request #3804 · getsentry/sentry-javascript

kamilogorek · 2021-07-14T09:53:10Z

The examples below show how to use Error Tracking and Performance Tracing features. In case you don't want to use Performance Tracing, integrations, tracesSampleRate, hooks, and trackComponents can be omited.

Vue 2

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

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

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
  Vue: Vue,
  dsn: "__PUBLIC__DSN",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "https://myapp.io/api"]
    })
  ],
  tracesSampleRate: 1.0,
  logErrors: true,
  trackComponents: true,
  // or specify specific names
  // trackComponents: ["App", "RwvHeader", "RwvFooter"],
  hooks: ["activate", "create", "destroy", "mount", "update"],
  // or use default hooks ['activate', 'mount', 'update']
});

// ...

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Vue 3

import * as Vue from "vue";
import App from "./App.vue";
import { router } from "./router";

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

const app = Vue.createApp(App);

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: app,
  dsn: "__PUBLIC_DSN__",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      // list of URLs to capture for tracing
      tracingOrigins: ["localhost", "https://myapp.io/api"],
    }),
  ],
  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']
});

// ...

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

Vue 3 - multiple apps

const appOne = Vue.createApp(App);
const appTwo = Vue.createApp(App);
const appThree = Vue.createApp(App);

Sentry.init({
  app: [appOne, appTwo, appThree],
});

Vue 3 - adding app after initialization

import * as Sentry from '@sentry/vue';

// ...
const app = createApp(App);

Sentry.init({
  app: app
  // ...
});

const miscApp = createApp(MiscApp);
miscApp.mixin(Sentry.createTracingMixins({ trackComponents: true }));
Sentry.attachErrorHandler(miscApp, { logErrors: true });

github-actions · 2021-07-14T10:08:10Z

size-limit report

Path	Size
@sentry/browser - CDN Bundle (gzipped)	21.46 KB (0%)
@sentry/browser - Webpack	22.47 KB (0%)
@sentry/react - Webpack	22.5 KB (0%)
@sentry/browser + @sentry/tracing - CDN Bundle (gzipped)	28.96 KB (0%)

Kocal · 2021-07-14T10:19:31Z

Thanks for this incredible PR, I will try it when I have free time!

Just a question, I see you inject app (an instance of Vue app) when initializing Sentry.
Does it mean we need to initialize Sentry N times if we have N Vue app instances on the page?

kamilogorek · 2021-07-14T11:07:25Z

I didn't know that multiple Vue apps it's actually a thing, but here you go :)

const appOne = Vue.createApp(App);
const appTwo = Vue.createApp(App);
const appThree = Vue.createApp(App);

Sentry.init({
  app: [appOne, appTwo, appThree],
});

Kocal · 2021-07-14T12:11:28Z

Nice, thanks!

I (we) have another advanced usecase with multiples Vue instances on a single page.

On server-rendered websites, sometimes we create small components (and Vue instances) to add some interactivity on the page (e.g.: dropdowns, inputs with characters counters, modals...), but thoses instances are often created after Sentry has been initialized (since we initialize Sentry the ASAP).

It was not a problem with Vue 2, but Vue 3 it is. 😕

Do you think it would be possible to listen on every createApp(), or having a method Sentry.pushVueApp()?

Thanks!

kamilogorek · 2021-07-14T12:47:18Z

import * as Sentry from '@sentry/vue';

// ...
const app = createApp(App);

Sentry.init({
  app: app
  // ...
});

const miscApp = createApp(MiscApp);
miscApp.mixin(Sentry.createTracingMixins({ trackComponents: true }));
Sentry.attachErrorHandler(miscApp, { logErrors: true });

Although not a common use case I believe, this should do the job.

Kocal · 2021-07-14T13:15:45Z

That's awesome! Even if it's more verbose than a single Sentry.init(), people can still write their own Sentry "wrapper" for their other Vue instances.

Thanks for this! ❤️

packages/vue/src/components.ts

packages/vue/src/router.ts

packages/vue/src/tracing.ts

packages/vue/src/errorhandler.ts

kamilogorek · 2021-07-15T15:02:22Z

@AbhiPrasad updated

AbhiPrasad

Wonder if we can ping someone in that Vue 3 GH issue or through the Vue community discord to get some more 👀 on it.

vaaski · 2021-07-18T09:37:25Z

When using typescript, the types for the app property seem to be wrong.

I am using @sentry/vue@6.10.0-beta and @sentry/tracing@6.10.0-beta with vue@3.1.4

tjk · 2021-07-18T18:28:25Z

@vaaski app.use returns app so you can chain it, but app.mount returns something different (vnode.component.proxy).

vaaski · 2021-07-19T17:53:59Z

You're right, my bad. Works like a charm now!

cawa-93 · 2021-07-22T08:39:36Z

How use it with '@sentry/integrations' ?

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

  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    integrations: [
      new VueIntegration({ ??? }),
    ],
  });

I tried:

new VueIntegration({ app }),

but I got TS error:

Object literal may only specify known properties, and 'app' does not exist in type 'Partial<Omit<IntegrationOptions, "tracingOptions"> & { tracingOptions: Partial<TracingOptions>; }>'.

kamilogorek · 2021-07-22T08:44:48Z

You don't. Vue integration predates a standalone Vue sdk. It has been replaced by it now.

mac-cain13 · 2021-07-22T20:09:15Z

Seems this change introduces a type error, the Route type defined in this PR has a name: string, but in the vue-router I'm using the name on a Route is optional.

Therefore TypeScript complains that I can't pass my router into Sentry.vueRouterInstrumentation:

Argument of type 'import("[redacted]/node_modules/vue-router/types/router").VueRouter' is not assignable to parameter of type 'VueRouter'.
  Types of property 'beforeEach' are incompatible.
    Type '(guard: NavigationGuard<Vue>) => Function' is not assignable to type '(fn: (to: Route, from: Route, next: () => void) => void) => void'.
      Types of parameters 'guard' and 'fn' are incompatible.
        Types of parameters 'to' and 'to' are incompatible.
          Type 'import("[redacted]/node_modules/vue-router/types/router").Route' is not assignable to type 'Route'.
            Property 'name' is optional in type 'Route' but required in type 'Route'.
    32 |     integrations: [
    33 |       new Integrations.BrowserTracing({
  > 34 |         routingInstrumentation: Sentry.vueRouterInstrumentation(router),
       |                                                                 ^
    35 |       }),
    36 |     ],

Is this expected and should I adjust my code or is this a newly introduced bug? Please let me know if I should open a separate issue for this.

kamilogorek · 2021-07-27T12:53:11Z

@mac-cain13 fix is coming

kamilogorek requested review from AbhiPrasad, HazAT and lobsterkatie July 14, 2021 09:53

kamilogorek mentioned this pull request Jul 14, 2021

Support for Vue 3 #2925

Closed

AbhiPrasad reviewed Jul 14, 2021

View reviewed changes

kamilogorek added 8 commits July 15, 2021 17:01

feat(vue): Rework tracing and add support for Vue 3

150d80c

feat: Allow initializing multiple Vue apps

d8ab3d6

Make linters happy again

7286b49

s/vuerouter.ts/router.ts/g

c0d306d

Remove no-explicit-any by default

bf6f1bd

Export attachErrorHandler so it can be used after Sentry was initialized

8353a8b

Export createTracingMixins

8c77ca3

Apply code review feedback

36ed47f

kamilogorek force-pushed the vue3 branch from 7b130dc to 36ed47f Compare July 15, 2021 15:02

AbhiPrasad approved these changes Jul 15, 2021

View reviewed changes

Merge branch 'master' into vue3

c7f9201

kamilogorek merged commit 14ccb55 into master Jul 16, 2021

kamilogorek deleted the vue3 branch July 16, 2021 10:06

Otto-J mentioned this pull request Jul 23, 2021

docs update: vue3 useage #3831

Closed

kamilogorek mentioned this pull request Jul 27, 2021

fix(vue): Make Router.name type optional to match VueRouter #3843

Merged

halimb mentioned this pull request Aug 2, 2021

Nuxt: TypeError Cannot read property '$options' of undefined #3858

Closed

5 tasks

Lms24 mentioned this pull request Jan 16, 2023

ref: Avoid optional chaining & add eslint rule #6777

Merged

Uh oh!

Conversation

kamilogorek commented Jul 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Vue 2

Vue 3

Vue 3 - multiple apps

Vue 3 - adding app after initialization

Uh oh!

github-actions bot commented Jul 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report

Uh oh!

Kocal commented Jul 14, 2021

Uh oh!

kamilogorek commented Jul 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kocal commented Jul 14, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kamilogorek commented Jul 14, 2021

Uh oh!

Kocal commented Jul 14, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kamilogorek commented Jul 15, 2021

Uh oh!

AbhiPrasad left a comment

Choose a reason for hiding this comment

Uh oh!

vaaski commented Jul 18, 2021

Uh oh!

tjk commented Jul 18, 2021

Uh oh!

vaaski commented Jul 19, 2021

Uh oh!

cawa-93 commented Jul 22, 2021

Uh oh!

kamilogorek commented Jul 22, 2021

Uh oh!

mac-cain13 commented Jul 22, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kamilogorek commented Jul 27, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

kamilogorek commented Jul 14, 2021 •

edited

Loading

github-actions bot commented Jul 14, 2021 •

edited

Loading

kamilogorek commented Jul 14, 2021 •

edited

Loading

Kocal commented Jul 14, 2021 •

edited

Loading

mac-cain13 commented Jul 22, 2021 •

edited

Loading