diff --git a/src/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx b/src/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx index 644be916789e25..a29d2e8c1b74df 100644 --- a/src/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx +++ b/src/platform-includes/distributed-tracing/how-to-use/javascript.remix.mdx @@ -1,4 +1,37 @@ -If you're using the current version of our Remix SDK, distributed tracing will work out of the box for the client and server. To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, you should define `tracePropagationTargets` for client-side. +Remix SDK attaches `sentry-trace` and `baggage` values from your `root` loader. You need to use the [`meta`](https://remix.run/docs/en/v1/api/conventions#meta) function to attach the data from your `loader` as `` tags. The following code snippet shows how to do this: + +```typescript {tabTitle: Remix v1} {filename: root.tsx} +export const meta: MetaFunction = ({ data }) => { + return { + // ... + "sentry-trace": data.sentryTrace, + baggage: data.sentryBaggage, + }; +}; +``` + +```typescript {tabTitle: Remix v2} {filename: root.tsx} +// Sentry provides a type for Remix v2 MetaFunction parameters +// so you can access `data.sentryTrace` and `data.sentryBaggage` alongside other data from loader. +import type { SentryMetaArgs } from "@sentry/remix"; + +export const meta = ({ data }: SentryMetaArgs>) => { + return [ + { + name: "sentry-trace", + content: data.sentryTrace, + }, + { + name: "baggage", + content: data.sentryBaggage, + }, + ]; +}; +``` + +The `name` attributes must be the strings `"sentry-trace"` and `"baggage"` and the `content` attributes must be generated by your backend Sentry SDK. For `sentry-trace`, use `span.toSentryTrace()` (or equivalent, depending on the backend platform). This guarantees that a new and unique value will be generated for each request. For `baggage`, use `serializeBaggage(span.getBaggage())`. + +To get around possible [Browser CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) issues, you should define `tracePropagationTargets` on the client side. See Dealing with CORS Issues for more information. ```tsx // entry.client.tsx