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.

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;
+ };
+};