Set Up

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.

Enable Tracing

Install the tracing package:

# Using yarn
yarn add @sentry/tracing

# Using npm
npm install --save @sentry/tracing

Configure the Sample Rate

Sampling for transactions must also be configured before tracing is be enabled in your app. Set the sample rate for your transactions by either:

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

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

// If taking advantage of automatic instrumentation (highly recommended)
import { BrowserTracing } from "@sentry/tracing";
// Or, if only manually tracing
// import * as _ from "@sentry/tracing"
// Note: You MUST import the package in some way for tracing to work

  // Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present.
  Vue: Vue,
  dsn: "",

  // This enables automatic instrumentation (highly recommended), but is not
  // necessary for purely manual usage
  integrations: [new BrowserTracing],

  // To set a uniform sample rate
  tracesSampleRate: 0.2

  // Alternatively, to control sampling dynamically
  tracesSampler: samplingContext => { ... }

Configure Tracing Instrumentation

If you want to track child components or use additional hooks to see more details about the rendering process, you can configure the SDK using options below. Captured data will be then stored as spans and attached to the currently active transaction on the scope:

  • trackComponents (defaults to false) - Decides whether to track components by hooking into its lifecycle methods. Can be set to either boolean, to enable/disable tracking for all of them, or to an array of specific component names (case-sensitive).
  • timeout (defaults to 2000) - Time in milliseconds dictating how long to wait until the tracked root activity is marked as finished and sent off to Sentry.
  • hooks (defaults to ['activate', 'mount', 'update']) - List of hooks to keep track of during component lifecycle 'activate' | 'create' | 'destroy' | 'mount' | 'unmount' | 'update'.
  tracesSampleRate: 0.1,
  trackComponents: ["Header", "Navigation", "Footer"],
  hooks: ["create", "mount"],

Learn more about how the options work in Sampling Transactions.


Verify that performance monitoring is working correctly by using our automatic instrumentation or by starting and finishing a transaction using custom instrumentation.

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

Once testing is complete, we recommend lowering this value in production by either lowering your tracesSampleRate value, or switching to using tracesSampler to dynamically sample and filter your transactions.

Leaving the sample rate at 1.0 means that automatic instrumentation will send a transaction each time a user loads any page or navigates anywhere in your app, which is a lot of transactions. Sampling enables you to collect representative data without overwhelming either your system or your Sentry transaction quota.

Next Steps:

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