Set Up Tracing

With tracing, Sentry automatically tracks your software performance across your application services, measuring metrics like throughput and latency, and displaying the impact of errors across multiple systems.

Configure

Enable tracing by setting the sample rate for your transactions.

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: [
    Sentry.browserTracingIntegration(),
    // Or, if you are using react router, use the appropriate integration
    // See docs for support for different versions of react router
    // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect: 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 trace propagation should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
});

• You can establish a uniform sample rate for all transactions by setting 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.)
• For more granular control over sampling, you can set 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 mutually exclusive. If both are set, tracesSampler will take precedence.

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

Distributed Tracing

Sentry captures distributed traces consisting of transactions and spans, which measure individual services and individual operations within those services, respectively. Learn more about our model in Distributed Tracing.

Verify

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.

Automatic Instrumentation

See Automatic Instrumentation to learn about all the things that the SDK automatically instruments for you.

Custom Instrumentation

You can also manually start spans to instrument specific parts of your code. This is useful when you want to measure the performance of a specific operation or function.

See Sending Span Metrics to learn how to manually start spans.

Next Steps