feat: Vue performance monitoring

[kamilogorek]

Docs Draft: https://gist.github.com/kamilogorek/1279bd2d39ba07f2ddd69cc684449949

Example usage (minimal):

import * as Sentry from "@sentry/browser";
import { Vue as VueIntegration } from "@sentry/integrations";
import { Integrations } from "@sentry/apm";

import Vue from "vue";

Sentry.init({
  dsn: "https://lol@nope.ingest.sentry.io/1337",
  integrations: [
    new Integrations.Tracing({
      tracingOrigins: [/localhost/]
    }),
    new VueIntegration({ Vue })
  ],
  tracesSampleRate: 1.0
});

Example usage (w. components tracking):

import * as Sentry from "@sentry/browser";
import { Vue as VueIntegration } from "@sentry/integrations";
import { Integrations } from "@sentry/apm";
import Vue from "vue";

Sentry.init({
  dsn: "https://lol@nope.ingest.sentry.io/1337",
  integrations: [
    new Integrations.Tracing({
      tracingOrigins: [/localhost/]
    }),
    new VueIntegration({
      Vue,
      tracingOptions: {
        trackComponents: ["App", "home", "RwvArticleList", "Pagination", "RwvHeader", "RwvFooter"]
      }
    })
  ],
  tracesSampleRate: 1.0
});

https://github.com/getsentry/sentry-vue-perf can be used to verify the implementation locally (just swap the implementation in there, for the one showcased above).

[rhcarvalho]

First pass 👀

[rhcarvalho]

Can we reasonably detect that tracing is enabled without this?
We've talked about enabling tracing whenever the Tracing integration was on. That would make for one less boilerplate line in Sentry.init.

[kamilogorek]

Sure, I'm already doing that. But what if someone wants to have error handling, xhr tracing, but skip Vue tracing?

[kamilogorek]

We also cannot tell if Tracing integration is in place during setup (subject to change in v6)

[getsentry-bot]

Fails

🚫

TSLint failed: @sentry/integrations ERROR: /home/travis/build/getsentry/sentry-javascript/packages/integrations/src/vue.ts[8, 24]: Type assertion on object literals is forbidden, use a type annotation instead. ERROR: /home/travis/build/getsentry/sentry-javascript/packages/integrations/src/vue.ts[239, 37]: Unsafe use of expression of type 'any'. ERROR: /home/travis/build/getsentry/sentry-javascript/packages/integrations/src/vue.ts[310, 11]: Unsafe use of expression of type 'any'.

	Warnings
⚠️	Please add a changelog entry for your changes.

	Messages
📖	@sentry/browser bundle gzip'ed minified size: (ES5: 17.1162 kB) (ES6: 16.1475 kB)

Generated by 🚫 dangerJS against 4df15af

[rhcarvalho]

Hmm this is interesting. How does it affect bundle size?
How does it impact users of the integrations that don't use @sentry/apm?

[kamilogorek]

It doesn't if you are not using Vue. It'll be fetched though.
I was thinking about passing apm's Tracing integration as a parameter, buuut not sure if it's worth it just yet.

[rhcarvalho]

Can we defer the option to "track all"? It seems like a sharp edge for me.

Plus, TracingOptions.trackComponents: false somehow conflicts with IntegrationOptions.tracing

[kamilogorek]

trackComponents will be effectively ignored if you don't set tracing: true.
Regarding tracking everything, I'm not sure why we'd want to postpone it tbh cc @HazAT

[rchl]

Is documentation for this released already? Can't see this mentioned on https://docs.sentry.io/performance/distributed-tracing/ so I guess not?

Also, will this be usable when doing server-side rendering of Vue (for example in Nuxt)?

[HazAT]

We are currently working on the docs update for this.
No server-side rendering support (yet).

[rchl]

BTW. I think it's wrong that tracing: true is enabled by default since that triggers an error for existing users of Vue integration that don't use tracing:

Sentry Logger [Error]: Vue integration has tracing enabled, but Tracing integration is not configured

So that's effectively a breaking change (even though it might not be breaking anything apart from introducing an error message).

What's your opinion on that? Should it change?

[HazAT]

Good catch, yeah we should remove the error message in case tracing is not enabled.
cc @kamilogorek

[rchl]

Clarification, sorry. This is only logged with debug: true set. So maybe it's not an issue? But still kinda wrong to say it's an error if it's handled gracefully.