Enhance e2e tests

Author: onurtemizkan

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/action-test.tsx

@@ -0,0 +1,62 @@
+import { ActionFunctionArgs, json, LoaderFunctionArgs } from '@remix-run/node';
+import { Form, useActionData, useLoaderData } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
+// Route with both loader and action to test POST request Server-Timing
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  return json({ tag });
+};
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const formData = await request.formData();
+  const name = formData.get('name');
+  const tag = formData.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag as string);
+  }
+
+  // Simulate some processing
+  await new Promise(resolve => setTimeout(resolve, 10));
+
+  return json({
+    success: true,
+    message: `Hello, ${name}!`,
+    tag,
+  });
+};
+
+export default function ActionTest() {
+  const { tag } = useLoaderData<typeof loader>();
+  const actionData = useActionData<typeof action>();
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
+      <h1>Action Test Route</h1>
+      <p>This route tests Server-Timing headers on POST (action) requests.</p>
+
+      <Form method="post">
+        <input type="hidden" name="tag" value={tag || ''} />
+        <label>
+          Name: <input type="text" name="name" defaultValue="Test User" />
+        </label>
+        <button type="submit">Submit</button>
+      </Form>
+
+      {actionData && (
+        <div style={{ marginTop: '20px', padding: '10px', background: '#f0f0f0' }}>
+          <p>Response: {actionData.message}</p>
+          <p>Success: {actionData.success ? 'Yes' : 'No'}</p>
+        </div>
+      )}
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/api.data.tsx

@@ -0,0 +1,22 @@
+import { json, LoaderFunctionArgs } from '@remix-run/node';
+import * as Sentry from '@sentry/remix';
+
+// Resource route - no default export, just returns JSON
+// This is commonly used for API endpoints in Remix
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  return json({
+    success: true,
+    data: {
+      message: 'Hello from resource route!',
+      timestamp: Date.now(),
+    },
+  });
+};

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/error-test.tsx

@@ -0,0 +1,32 @@
+import { LoaderFunctionArgs } from '@remix-run/node';
+import * as Sentry from '@sentry/remix';
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  // Throw an error to test 500 response handling
+  throw new Error('Test error for Server-Timing propagation');
+};
+
+export default function ErrorTest() {
+  return (
+    <div>
+      <h1>Error Test Route</h1>
+      <p>This should not render - the loader throws an error.</p>
+    </div>
+  );
+}
+
+export function ErrorBoundary() {
+  return (
+    <div>
+      <h1>Error Occurred</h1>
+      <p>An error was thrown in the loader.</p>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/merge-test.tsx

@@ -0,0 +1,40 @@
+import { HeadersFunction, json, LoaderFunctionArgs } from '@remix-run/node';
+import * as Sentry from '@sentry/remix';
+
+// Export headers function to include loader headers in document responses
+// See: https://remix.run/docs/en/main/route/headers
+export const headers: HeadersFunction = ({ loaderHeaders }) => {
+  return loaderHeaders;
+};
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  return json(
+    { message: 'Merge test route' },
+    {
+      headers: {
+        // Set an existing Server-Timing header that should be merged with Sentry's
+        'Server-Timing': 'db;dur=53.2, cache;desc="Cache Read";dur=1.5',
+      },
+    },
+  );
+};
+
+export default function MergeTest() {
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
+      <h1>Server-Timing Merge Test</h1>
+      <p>This route sets an existing Server-Timing header to test merging.</p>
+      <p>
+        Expected: db;dur=53.2, cache;desc=&quot;Cache Read&quot;;dur=1.5, sentry-trace;desc=&quot;...&quot;,
+        baggage;desc=&quot;...&quot;
+      </p>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/parent.child.tsx

@@ -0,0 +1,40 @@
+import { json, LoaderFunctionArgs } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
+// Child route loader - runs after parent loader
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  // Get current trace info for debugging
+  const span = Sentry.getActiveSpan();
+  const rootSpan = span ? Sentry.getRootSpan(span) : null;
+  const traceId = rootSpan ? Sentry.spanToJSON(rootSpan).trace_id : 'no-trace';
+
+  // Simulate some async work
+  await new Promise(resolve => setTimeout(resolve, 5));
+
+  return json({
+    childData: 'Child loader data',
+    childTraceId: traceId,
+  });
+};
+
+export default function Child() {
+  const { childData, childTraceId } = useLoaderData<typeof loader>();
+
+  return (
+    <div>
+      <h2>Child Route</h2>
+      <p>Child data: {childData}</p>
+      <p>
+        Child trace ID: <code>{childTraceId}</code>
+      </p>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/parent.tsx

@@ -0,0 +1,43 @@
+import { json, LoaderFunctionArgs } from '@remix-run/node';
+import { Outlet, useLoaderData } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
+// Parent route loader - runs before child loaders
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  // Get current trace info for debugging
+  const span = Sentry.getActiveSpan();
+  const rootSpan = span ? Sentry.getRootSpan(span) : null;
+  const traceId = rootSpan ? Sentry.spanToJSON(rootSpan).trace_id : 'no-trace';
+
+  // Simulate some async work
+  await new Promise(resolve => setTimeout(resolve, 5));
+
+  return json({
+    parentData: 'Parent loader data',
+    parentTraceId: traceId,
+  });
+};
+
+export default function Parent() {
+  const { parentData, parentTraceId } = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
+      <h1>Parent Route</h1>
+      <p>Parent data: {parentData}</p>
+      <p>
+        Parent trace ID: <code>{parentTraceId}</code>
+      </p>
+      <div style={{ border: '1px solid #ccc', padding: '10px', marginTop: '10px' }}>
+        <Outlet />
+      </div>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/prefetch-test.tsx

@@ -0,0 +1,44 @@
+import { json, LoaderFunctionArgs } from '@remix-run/node';
+import { Link, useLoaderData } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  return json({ tag });
+};
+
+export default function PrefetchTest() {
+  const { tag } = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
+      <h1>Prefetch Test</h1>
+      <p>This page tests Server-Timing with prefetch behavior.</p>
+
+      <h3>Links with different prefetch modes:</h3>
+      <ul>
+        <li>
+          <Link id="prefetch-intent" to={`/user/prefetch-target?tag=${tag}`} prefetch="intent">
+            Prefetch on Intent (hover)
+          </Link>
+        </li>
+        <li>
+          <Link id="prefetch-render" to={`/user/prefetch-target2?tag=${tag}`} prefetch="render">
+            Prefetch on Render
+          </Link>
+        </li>
+        <li>
+          <Link id="prefetch-none" to={`/user/prefetch-target3?tag=${tag}`} prefetch="none">
+            No Prefetch
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+}

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/redirect-test.tsx

@@ -0,0 +1,20 @@
+import { LoaderFunctionArgs, redirect } from '@remix-run/node';
+import * as Sentry from '@sentry/remix';
+
+// Route that returns a redirect response
+// Tests that Server-Timing headers are present on redirect responses
+
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  // Redirect to user page, preserving the tag
+  const targetUrl = tag ? `/user/redirected?tag=${tag}` : '/user/redirected';
+  return redirect(targetUrl);
+};
+
+// No default export needed - loader always redirects

dev-packages/e2e-tests/test-applications/remix-server-timing/app/routes/streaming-legacy.tsx

@@ -0,0 +1,51 @@
+import { defer, LoaderFunctionArgs } from '@remix-run/node';
+import { Await, useLoaderData } from '@remix-run/react';
+import * as Sentry from '@sentry/remix';
+import { Suspense } from 'react';
+
+// Simulate a slow async operation
+async function getSlowData(): Promise<{ message: string; timestamp: number }> {
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return {
+    message: 'Deferred data loaded (legacy)!',
+    timestamp: Date.now(),
+  };
+}
+
+// Legacy streaming using defer() - deprecated but still supported
+export const loader = async ({ request }: LoaderFunctionArgs) => {
+  const url = new URL(request.url);
+  const tag = url.searchParams.get('tag');
+
+  if (tag) {
+    Sentry.setTag('sentry_test', tag);
+  }
+
+  // Legacy pattern: use defer() explicitly
+  return defer({
+    immediate: { greeting: 'Hello from legacy streaming route!' },
+    deferred: getSlowData(),
+  });
+};
+
+export default function StreamingLegacy() {
+  const { immediate, deferred } = useLoaderData<typeof loader>();
+
+  return (
+    <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.8' }}>
+      <h1>Legacy Streaming Response Test (defer)</h1>
+      <p>Immediate data: {immediate.greeting}</p>
+
+      <Suspense fallback={<p>Loading deferred data...</p>}>
+        <Await resolve={deferred}>
+          {data => (
+            <div>
+              <p>Deferred message: {data.message}</p>
+              <p>Timestamp: {data.timestamp}</p>
+            </div>
+          )}
+        </Await>
+      </Suspense>
+    </div>
+  );
+}