From 8c9f05643371154f364d0ccb79f907ac9654dcaf Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 8 Nov 2023 18:13:23 +0000 Subject: [PATCH 1/5] feat(remix): Add `meta` instructions. --- .../how-to-use/javascript.remix.mdx | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) 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..c795565fe7e4be 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,39 @@ -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 [`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` for client-side. + ```tsx // entry.client.tsx From a380d65595d415bff7689d28495cde15d1bbb2bf Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Wed, 8 Nov 2023 18:21:36 +0000 Subject: [PATCH 2/5] [getsentry/action-github-commit] Auto commit --- .../how-to-use/javascript.remix.mdx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) 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 c795565fe7e4be..860db6a4484a1d 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,28 +1,28 @@ Remix SDK attaches `sentry-trace` and `baggage` values from your `root` loader. You need to use [`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, - }; +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'; +import type { SentryMetaArgs } from "@sentry/remix"; export const meta = ({ data }: SentryMetaArgs>) => { return [ { - name: 'sentry-trace', + name: "sentry-trace", content: data.sentryTrace, }, { - name: 'baggage', + name: "baggage", content: data.sentryBaggage, }, ]; @@ -31,10 +31,8 @@ export const meta = ({ data }: SentryMetaArgs>) => { 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` for client-side. - ```tsx // entry.client.tsx Sentry.init({ From 9f2f73d21a56ba14787df0238fa1a668943aecbe Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Wed, 15 Nov 2023 09:09:04 +0000 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Shana Matthews --- .../distributed-tracing/how-to-use/javascript.remix.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 860db6a4484a1d..a55899685956df 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,4 @@ -Remix SDK attaches `sentry-trace` and `baggage` values from your `root` loader. You need to use [`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: +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 }) => { @@ -11,7 +11,7 @@ export const meta: MetaFunction = ({ data }) => { ``` ```typescript {tabTitle: Remix v2} {filename: root.tsx} -// Sentry provides a type for Remix v2 MetaFunction parameters, +// 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"; @@ -31,7 +31,7 @@ export const meta = ({ data }: SentryMetaArgs>) => { 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` for client-side. +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](/usage/distributed-tracing/dealing-with-cors-issues/) for more information. ```tsx // entry.client.tsx From d15d067b714c3e64cfc65051b8c666e1f0831d09 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Thu, 16 Nov 2023 22:14:27 +0000 Subject: [PATCH 4/5] Fix internal link. --- .../distributed-tracing/how-to-use/javascript.remix.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a55899685956df..fb5047eebff2f4 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 @@ -31,7 +31,7 @@ export const meta = ({ data }: SentryMetaArgs>) => { 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](/usage/distributed-tracing/dealing-with-cors-issues/) for more information. +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](/usage/distributed-tracing/dealing-with-cors-issues) for more information. ```tsx // entry.client.tsx From 47c9862afebed7d3e1225946cef3cd1bc66502c2 Mon Sep 17 00:00:00 2001 From: Shana Matthews Date: Thu, 16 Nov 2023 14:32:00 -0800 Subject: [PATCH 5/5] fix link --- .../distributed-tracing/how-to-use/javascript.remix.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 fb5047eebff2f4..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 @@ -31,7 +31,7 @@ export const meta = ({ data }: SentryMetaArgs>) => { 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](/usage/distributed-tracing/dealing-with-cors-issues) for more information. +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