diff --git a/docs/platforms/javascript/guides/react/features/tanstack-router.mdx b/docs/platforms/javascript/guides/react/features/tanstack-router.mdx new file mode 100644 index 00000000000000..29c11ae0c3589d --- /dev/null +++ b/docs/platforms/javascript/guides/react/features/tanstack-router.mdx @@ -0,0 +1,44 @@ +--- +title: TanStack Router +description: "Learn about Sentry's TanStack Router integration." +--- + +_(Available in version 8.7.0 and above)_ + +TanStack Router support is included in the `@sentry/react` package since version `8.7.0` and is only compatible with version `1.34.5` of ` `@tanstack/router` and above. + + + +The TanStack Router integration is designed to work with Sentry Performance Monitoring. Please see Getting Started with React Performance for more details on how to set up and install the SDK. + + + +The TanStack Router instrumentation uses your TanStack Router routes to create `pageload/navigation` transactions to ensure you collect meaningful performance data about the health of your page loads and associated requests. + +## Usage + +To use the TanStack Router integration, pass the `Sentry.tanstackRouterBrowserTracingIntegration` inside your `integrations` option: + +```javascript +import * as Sentry from "@sentry/react"; +import { createRouter } from "@tanstack/react-router"; + +const router = createRouter({ + // Your router options... +}); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.tanstackRouterBrowserTracingIntegration(router)], + + // Setting a sample rate is required for sending performance data. + // We recommend adjusting this value in production, or using tracesSampler + // for finer control. + tracesSampleRate: 1.0, +}); +``` + +## Next Steps: + +- [Return to **Getting Started**](../../) +- [Return to the main integrations page](../)