From 70fc7f1edd1c163dceab192d9211a24d14258d4a Mon Sep 17 00:00:00 2001 From: JPeer264 Date: Tue, 12 May 2026 13:56:27 +0200 Subject: [PATCH] docs(tanstackstart): Add docs for distributed tracing --- .../javascript.tanstackstart-react.mdx | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 platform-includes/distributed-tracing/how-to-use/javascript.tanstackstart-react.mdx diff --git a/platform-includes/distributed-tracing/how-to-use/javascript.tanstackstart-react.mdx b/platform-includes/distributed-tracing/how-to-use/javascript.tanstackstart-react.mdx new file mode 100644 index 0000000000000..681bcfc990806 --- /dev/null +++ b/platform-includes/distributed-tracing/how-to-use/javascript.tanstackstart-react.mdx @@ -0,0 +1,72 @@ +To connect server-side and client-side traces in TanStack Start, inject trace metadata into your HTML so the browser SDK can continue the trace started on the server. + +In your root route (`routes/__root.tsx`), use `getTraceData()` to retrieve the current trace context and inject it as meta tags: + +```typescript {filename:routes/__root.tsx} +import type { ReactNode } from "react"; +import { + Outlet, + createRootRoute, + HeadContent, + Scripts, +} from "@tanstack/react-router"; +import { getTraceData } from "@sentry/tanstackstart-react"; + +export const Route = createRootRoute({ + head: () => { + const traceData = getTraceData(); + const sentryMeta = Object.entries(traceData).map(([key, value]) => ({ + name: key, + content: value, + })); + + return { + meta: [ + ...sentryMeta, + ], + }; + }, + component: RootComponent, +}); + +function RootComponent() { + return ( + + + + ); +} + +function RootDocument({ children }: Readonly<{ children: ReactNode }>) { + return ( + + + + + + {children} + + + + ); +} +``` + +This injects `sentry-trace` and `baggage` meta tags into the HTML. The browser SDK automatically reads these tags on page load and continues the server trace, connecting your full-stack traces in Sentry. + +To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, define `tracePropagationTargets` for client-side: + + + +Note: port numbers are relevant for trace propagation and the origin. You may need to configure the `tracePropagationTargets` to ensure that traces are propagated across your services if they run on different ports. + + + +```typescript {filename:sentry.client.config.ts} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [Sentry.tanstackRouterBrowserTracingIntegration(router)], + tracesSampleRate: 1.0, + tracePropagationTargets: ["https://myproject.org", /^\/api\//], +}); +```