Prioritize Server-Timing headers over meta tags

Author: onurtemizkan

packages/remix/src/client/performance.tsx

@@ -113,18 +113,18 @@ export function startPageloadSpan(client: Client): void {
     },
   };
 
-  // Priority: meta tags > Server-Timing header > async retry
-  const metaTagTrace = getMetaTagTraceContext();
-  if (metaTagTrace) {
+  // Priority: Server-Timing header > meta tags > async retry
+  const serverTimingTrace = getNavigationTraceContext();
+  if (serverTimingTrace) {
     pageloadSpanStarted = true;
-    startBrowserTracingPageLoadSpan(client, spanContext, metaTagTrace);
+    startBrowserTracingPageLoadSpan(client, spanContext, serverTimingTrace);
     return;
   }
 
-  const serverTimingTrace = getNavigationTraceContext();
-  if (serverTimingTrace) {
+  const metaTagTrace = getMetaTagTraceContext();
+  if (metaTagTrace) {
     pageloadSpanStarted = true;
-    startBrowserTracingPageLoadSpan(client, spanContext, serverTimingTrace);
+    startBrowserTracingPageLoadSpan(client, spanContext, metaTagTrace);
     return;
   }
 

packages/remix/src/server/instrumentServer.ts

@@ -105,34 +105,34 @@ export function wrapHandleErrorWithSentry(
 }
 
 /**
- * Get trace context for injection into loader response data.
- * Prioritizes active span context to ensure client pageload continues from the loader span,
- * not the http.server span, enabling proper trace continuity via Server-Timing headers.
+ * Get trace context for injection into loader response data (for meta tags).
+ * Returns empty object when Server-Timing headers are available, as they take priority.
+ * Only provides trace data for meta tags as a fallback mechanism.
  */
 function getTraceAndBaggage(): {
   sentryTrace?: string;
   sentryBaggage?: string;
 } {
+  // Server-Timing headers take priority over meta tags.
+  // When in Node.js or Cloudflare environments with an active span,
+  // Server-Timing headers will be injected, so skip meta tag data.
   if (isNodeEnv() || isCloudflareEnv()) {
     const activeSpan = getActiveSpan();
     if (activeSpan) {
-      const sentryTrace = spanToTraceHeader(activeSpan);
-      if (sentryTrace) {
-        return {
-          sentryTrace,
-          sentryBaggage: spanToBaggageHeader(activeSpan),
-        };
-      }
+      // Server-Timing header will be available, skip meta tag injection
+      DEBUG_BUILD && debug.log('[getTraceAndBaggage] Skipping meta tag injection - Server-Timing header will be used');
+      return {};
     }
 
+    // No active span - fall back to meta tags via propagation context
     const scope = getCurrentScope();
     const propagationContext = scope.getPropagationContext();
     const traceData = getTraceData();
     const spanId = propagationContext.propagationSpanId ?? propagationContext.parentSpanId;
 
     if (propagationContext.traceId && spanId) {
       const fallbackTrace = generateSentryTraceHeader(propagationContext.traceId, spanId, propagationContext.sampled);
-      DEBUG_BUILD && debug.log('[getTraceAndBaggage] Falling back to propagation context:', fallbackTrace);
+      DEBUG_BUILD && debug.log('[getTraceAndBaggage] Using meta tags fallback - no active span for Server-Timing');
 
       return {
         sentryTrace: fallbackTrace,