Set Up Performance

Learn how to enable performance monitoring in your app.

With performance monitoring, Sentry tracks your software performance, measuring metrics like throughput and latency, and displaying the impact of errors across multiple systems. Sentry captures distributed traces consisting of transactions and spans, which measure individual services and individual operations within those services. Learn more about our model in Distributed Tracing.

Tracing is available by default in the Sentry JavaScript npm packages.

If you are using the Loader Script, make sure to enable "Performance" under Settings > Projects > Client Keys (DSN).

If you are using the CDN, make sure you are using a CDN bundle that has performance monitoring enabled.

First, enable tracing and configure the sampling rate for transactions. Set the sample rate for your transactions by either:

  • Setting a uniform sample rate for all transactions using the tracesSampleRate option in your SDK config to a number between 0 and 1. (For example, to send 20% of transactions, set tracesSampleRate to 0.2.)
  • Controlling the sample rate based on the transaction itself and the context in which it's captured, by providing a function to the tracesSampler config option.

The two options are meant to be mutually exclusive. If you set both, tracesSampler will take precedence.

Copied
import Vue from "vue";
import * as Sentry from "@sentry/vue";

Sentry.init({
  // Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present.
  Vue: Vue,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // This enables automatic instrumentation (highly recommended),
  // but is not necessary for purely manual usage
  // If you only want to use custom instrumentation:
  // * Remove the `BrowserTracing` integration
  // * add `Sentry.addTracingExtensions()` above your Sentry.init() call
  integrations: [Sentry.browserTracingIntegration()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

If you want to track child components, you can configure the SDK using additional options as shown below. Captured data will be then stored as spans and attached to the currently active transaction:

Copied
Sentry.init({
  Vue,
  tracesSampleRate: 0.1,
  trackComponents: ["Header", "Navigation", "Footer"],
  hooks: ["create", "mount"],
});

Learn more about Vue component tracking.

Learn more about performance monitoring options, how to use the tracesSampler function, or how to sample transactions.

While you're testing, set tracesSampleRate to 1.0, as that ensures that every transaction will be sent to Sentry.

Once testing is complete, you may want to set a lower tracesSampleRate value, or switch to using tracesSampler to selectively sample and filter your transactions, based on contextual data.

If you leave your sample rate at 1.0, a transaction will be sent every time a user loads a page or navigates within your app. Depending on the amount of traffic your application gets, this may mean a lot of transactions. If you have a high-load, backend application, you may want to consider setting a lower tracesSampleRate value, or switching to using tracesSampler to selectively sample and filter your transactions, based on contextual data.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").