From 8a50b24ffb7eee8ccd082cfa13fadd3346315caf Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 7 Nov 2023 19:47:07 +0000 Subject: [PATCH] feat(remix): Export a type to use in MetaFunction parameters --- .../create-remix-app-v2/app/root.tsx | 19 ++++++++++++- .../tests/behaviour-client.test.ts | 28 +++++++++++++++++++ .../create-remix-app/app/root.tsx | 15 +++++++++- .../tests/behaviour-client.test.ts | 28 +++++++++++++++++++ packages/remix/src/index.server.ts | 2 ++ packages/remix/src/utils/types.ts | 6 ++++ 6 files changed, 96 insertions(+), 2 deletions(-) create mode 100644 packages/remix/src/utils/types.ts diff --git a/packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx b/packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx index d4b2c07516eb..cf8d185866a9 100644 --- a/packages/e2e-tests/test-applications/create-remix-app-v2/app/root.tsx +++ b/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>) => { + 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); diff --git a/packages/e2e-tests/test-applications/create-remix-app-v2/tests/behaviour-client.test.ts b/packages/e2e-tests/test-applications/create-remix-app-v2/tests/behaviour-client.test.ts index e07481075f5a..aff286991604 100644 --- a/packages/e2e-tests/test-applications/create-remix-app-v2/tests/behaviour-client.test.ts +++ b/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(); +}); diff --git a/packages/e2e-tests/test-applications/create-remix-app/app/root.tsx b/packages/e2e-tests/test-applications/create-remix-app/app/root.tsx index d4b2c07516eb..a015aba78f6c 100644 --- a/packages/e2e-tests/test-applications/create-remix-app/app/root.tsx +++ b/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); diff --git a/packages/e2e-tests/test-applications/create-remix-app/tests/behaviour-client.test.ts b/packages/e2e-tests/test-applications/create-remix-app/tests/behaviour-client.test.ts index e07481075f5a..aff286991604 100644 --- a/packages/e2e-tests/test-applications/create-remix-app/tests/behaviour-client.test.ts +++ b/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(); +}); diff --git a/packages/remix/src/index.server.ts b/packages/remix/src/index.server.ts index 42034876d269..7686a08782c8 100644 --- a/packages/remix/src/index.server.ts +++ b/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(); diff --git a/packages/remix/src/utils/types.ts b/packages/remix/src/utils/types.ts new file mode 100644 index 000000000000..9634678a05ce --- /dev/null +++ b/packages/remix/src/utils/types.ts @@ -0,0 +1,6 @@ +export type SentryMetaArgs any> = Parameters[0] & { + data: { + sentryTrace: string; + sentryBaggage: string; + }; +};