feat(remix): Add meta instructions. (#8452)

* feat(remix): Add `meta` instructions.

* [getsentry/action-github-commit] Auto commit

* Apply suggestions from code review

Co-authored-by: Shana Matthews <[email protected]>

* Fix internal link.

* fix link

---------

Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
Co-authored-by: Shana Matthews <[email protected]>

Author: 3 people

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 `<meta>` 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<MetaFunction<typeof loader>>) => {
+  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 <PlatformLink to="/usage/distributed-tracing/dealing-with-cors-issues/">Dealing with CORS Issues</PlatformLink> for more information.
 
 ```tsx
 // entry.client.tsx