Set Up Performance

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

Configure the Sample Rate

First, enable

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

import { createBrowserRouter } from "react-router-dom";
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // This enables automatic instrumentation (highly recommended)
  // If you only want to use custom instrumentation:
  // * Remove the `BrowserTracing` integration
  // * add `Sentry.addTracingExtensions()` above your Sentry.init() call
  integrations: [
    new Sentry.BrowserTracing({
      // See docs for support of different versions of variation of react router
      // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
      routingInstrumentation: Sentry.reactRouterV6Instrumentation(
        React.useEffect,
        useLocation,
        useNavigationType,
        createRoutesFromChildren,
        matchRoutes
      ),
    }),
  ],

  // For finer control of sent transactions you can adjust this value, or
  // use tracesSampler
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

Learn more about how the options work in Sampling Transactions.

Verify

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

@sentry/react exports a withProfiler higher order component that can be used to capture React related spans for specific React components.

import * as Sentry from "@sentry/react";

export default Sentry.withProfiler(App);

Learn more about using and customizing the React Profiler in React Component Tracking.

React Router

If you are using react-router, we provide React Router instrumentation to use alongside Sentry Performance Monitoring.

Next Steps: