fix(react-router): Avoid the TransformStream constructor in injectTraceMetaTags

workerd only supports a custom TransformStream transformer from compatibility date 2024-11-11, and Hydrogen's MiniOxygen runs with an older one, so the constructor threw and no trace meta tags were injected. Use a ReadableStream with a pull handler instead, as before, while keeping the shared </head> handling.

Author: lfantone

packages/react-router/src/server/injectTraceMetaTags.ts

@@ -13,31 +13,46 @@ export function injectTraceMetaTags(body: ReadableStream): ReadableStream {
     return body;
   }
 
+  // Resolved now, while the request's async context is still active. Runtimes like workerd run
+  // stream callbacks outside of it, where there is no client and no trace data.
+  const traceMetaTags = getTraceMetaTags();
+  const injector = createHeadTagInjector(() => traceMetaTags);
+
+  const reader = body.getReader();
   const encoder = new TextEncoder();
   // A single streaming decoder carries incomplete multi-byte sequences across chunk
   // boundaries. A fresh, non-streaming decoder per chunk would flush a split character
   // as U+FFFD, corrupting the response (see https://github.com/whatwg/encoding/issues/184).
   const decoder = new TextDecoder();
-  // Resolved now, while the request's async context is still active. Runtimes like workerd run
-  // stream transforms outside of it, where there is no client and no trace data.
-  const traceMetaTags = getTraceMetaTags();
-  const injector = createHeadTagInjector(() => traceMetaTags);
 
-  return body.pipeThrough(
-    new TransformStream<unknown, Uint8Array>({
-      transform(value, controller) {
+  // Not a TransformStream: workerd only supports a custom transformer from compatibility date
+  // 2024-11-11, and Hydrogen's MiniOxygen runs with an older one.
+  return new ReadableStream({
+    async pull(controller) {
+      // `pull` is not called again until a chunk is enqueued, so keep reading while text is held back.
+      for (;;) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          const rest = injector.push(decoder.decode()) + injector.flush();
+          if (rest) {
+            controller.enqueue(encoder.encode(rest));
+          }
+          controller.close();
+          return;
+        }
+
         const html = value instanceof Uint8Array ? decoder.decode(value, { stream: true }) : String(value);
         const out = injector.push(html);
+
         if (out) {
           controller.enqueue(encoder.encode(out));
+          return;
         }
-      },
-      flush(controller) {
-        const out = injector.push(decoder.decode()) + injector.flush();
-        if (out) {
-          controller.enqueue(encoder.encode(out));
-        }
-      },
-    }),
-  );
+      }
+    },
+    cancel(reason) {
+      return reader.cancel(reason);
+    },
+  });
 }

packages/react-router/test/cloudflare/injectTraceMetaTags.test.ts

@@ -131,6 +131,44 @@ describe('injectTraceMetaTags', () => {
     expect(output).toBe('<html><body></he');
   });
 
+  test('does not rely on the TransformStream constructor, which older workerd compatibility dates reject', async () => {
+    vi.stubGlobal(
+      'TransformStream',
+      class {
+        constructor() {
+          throw new Error('TransformStream is not supported');
+        }
+      },
+    );
+
+    try {
+      const input = streamFromChunks([new TextEncoder().encode('<html><head></head></html>')]);
+      const output = new TextDecoder().decode(await readAll(injectTraceMetaTags(input)));
+
+      expect(output).toContain('<meta name="sentry-trace" content="test-trace-id"></head>');
+    } finally {
+      vi.unstubAllGlobals();
+    }
+  });
+
+  test('keeps reading while a partial tag is held back so the stream does not stall', async () => {
+    const encoder = new TextEncoder();
+    const input = streamFromChunks([encoder.encode('<head><'), encoder.encode('/'), encoder.encode('head><body>')]);
+
+    const output = new TextDecoder().decode(await readAll(injectTraceMetaTags(input)));
+
+    expect(output).toBe('<head><meta name="sentry-trace" content="test-trace-id"></head><body>');
+  });
+
+  test('cancels the source stream when the consumer cancels', async () => {
+    const cancel = vi.fn();
+    const input = new ReadableStream({ cancel });
+
+    await injectTraceMetaTags(input).cancel('done');
+
+    expect(cancel).toHaveBeenCalledWith('done');
+  });
+
   test('resolves the trace meta tags synchronously, before the stream is read', async () => {
     const encoder = new TextEncoder();
     const input = streamFromChunks([encoder.encode('<html><head></head></html>')]);