feat(remix): Export a type to use for MetaFunction parameters (#9493)

Exported a type to be used like:

```typescript
export const meta = ({ data }: SentryMetaArgs<MetaFunction<typeof loader>>) => {
  return [
    {
      env: data.ENV,
    },
    {
      name: 'sentry-trace',
      content: data.sentryTrace,
    },
    {
      name: 'baggage',
      content: data.sentryBaggage,
    },
  ];
};

```

So the types from `loader` function and our injections are both
available in type checking.

Also, updated e2e tests to include `meta` injection checks for root and
sub-routes.

Author: onurtemizkan

packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx

@@ -1,5 +1,5 @@
 import { cssBundleHref } from '@remix-run/css-bundle';
-import { json, LinksFunction } from '@remix-run/node';
+import { json, LinksFunction, MetaFunction } from '@remix-run/node';
 import {
   Links,
   LiveReload,
@@ -11,6 +11,7 @@ import {
   useRouteError,
 } from '@remix-run/react';
 import { captureRemixErrorBoundaryError, withSentry } from '@sentry/remix';
+import type { SentryMetaArgs } from '@sentry/remix';
 
 export const links: LinksFunction = () => [...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : [])];
 
@@ -22,6 +23,22 @@ export const loader = () => {
   });
 };
 
+export const meta = ({ data }: SentryMetaArgs<MetaFunction<typeof loader>>) => {
+  return [
+    {
+      env: data.ENV,
+    },
+    {
+      name: 'sentry-trace',
+      content: data.sentryTrace,
+    },
+    {
+      name: 'baggage',
+      content: data.sentryBaggage,
+    },
+  ];
+};
+
 export function ErrorBoundary() {
   const error = useRouteError();
   const eventId = captureRemixErrorBoundaryError(error);

packages/e2e-tests/test-applications/create-remix-app-v2/tests/behaviour-client.test.ts

@@ -206,3 +206,31 @@ test('Sends a client-side ErrorBoundary exception to Sentry', async ({ page }) =
     )
     .toBe(200);
 });
+
+test('Renders `sentry-trace` and `baggage` meta tags for the root route', async ({ page }) => {
+  await page.goto('/');
+
+  const sentryTraceMetaTag = await page.waitForSelector('meta[name="sentry-trace"]', {
+    state: 'attached',
+  });
+  const baggageMetaTag = await page.waitForSelector('meta[name="baggage"]', {
+    state: 'attached',
+  });
+
+  expect(sentryTraceMetaTag).toBeTruthy();
+  expect(baggageMetaTag).toBeTruthy();
+});
+
+test('Renders `sentry-trace` and `baggage` meta tags for a sub-route', async ({ page }) => {
+  await page.goto('/user/123');
+
+  const sentryTraceMetaTag = await page.waitForSelector('meta[name="sentry-trace"]', {
+    state: 'attached',
+  });
+  const baggageMetaTag = await page.waitForSelector('meta[name="baggage"]', {
+    state: 'attached',
+  });
+
+  expect(sentryTraceMetaTag).toBeTruthy();
+  expect(baggageMetaTag).toBeTruthy();
+});

packages/e2e-tests/test-applications/create-remix-app/app/root.tsx

@@ -1,5 +1,5 @@
 import { cssBundleHref } from '@remix-run/css-bundle';
-import { json, LinksFunction } from '@remix-run/node';
+import { json, LinksFunction, MetaFunction } from '@remix-run/node';
 import {
   Links,
   LiveReload,
@@ -22,6 +22,19 @@ export const loader = () => {
   });
 };
 
+export const meta: MetaFunction = ({ data }) => {
+  return [
+    {
+      name: 'sentry-trace',
+      content: data.sentryTrace,
+    },
+    {
+      name: 'baggage',
+      content: data.sentryBaggage,
+    },
+  ];
+};
+
 export function ErrorBoundary() {
   const error = useRouteError();
   const eventId = captureRemixErrorBoundaryError(error);

packages/e2e-tests/test-applications/create-remix-app/tests/behaviour-client.test.ts

@@ -206,3 +206,31 @@ test('Sends a client-side ErrorBoundary exception to Sentry', async ({ page }) =
     )
     .toBe(200);
 });
+
+test('Renders `sentry-trace` and `baggage` meta tags for the root route', async ({ page }) => {
+  await page.goto('/');
+
+  const sentryTraceMetaTag = await page.waitForSelector('meta[name="sentry-trace"]', {
+    state: 'attached',
+  });
+  const baggageMetaTag = await page.waitForSelector('meta[name="baggage"]', {
+    state: 'attached',
+  });
+
+  expect(sentryTraceMetaTag).toBeTruthy();
+  expect(baggageMetaTag).toBeTruthy();
+});
+
+test('Renders `sentry-trace` and `baggage` meta tags for a sub-route', async ({ page }) => {
+  await page.goto('/user/123');
+
+  const sentryTraceMetaTag = await page.waitForSelector('meta[name="sentry-trace"]', {
+    state: 'attached',
+  });
+  const baggageMetaTag = await page.waitForSelector('meta[name="baggage"]', {
+    state: 'attached',
+  });
+
+  expect(sentryTraceMetaTag).toBeTruthy();
+  expect(baggageMetaTag).toBeTruthy();
+});

packages/remix/src/index.server.ts

@@ -62,6 +62,8 @@ export { remixRouterInstrumentation, withSentry } from './client/performance';
 export { captureRemixErrorBoundaryError } from './client/errors';
 export { wrapExpressCreateRequestHandler } from './utils/serverAdapters/express';
 
+export type { SentryMetaArgs } from './utils/types';
+
 function sdkAlreadyInitialized(): boolean {
   const hub = getCurrentHub();
   return !!hub.getClient();

packages/remix/src/utils/types.ts

@@ -0,0 +1,6 @@
+export type SentryMetaArgs<MetaFN extends (...args: any) => any> = Parameters<MetaFN>[0] & {
+  data: {
+    sentryTrace: string;
+    sentryBaggage: string;
+  };
+};