Pular para o conteúdo

React Router / Remix

Os loaders e actions do React Router 7 rodam no servidor, então suas chamadas fetch passam pelo proxy sem um contexto de navegador — a mesma situação do SSR do Next.js. O proxy precisa do header x-test-rcrd-id nessas requisições do lado do servidor para atribuí-las à sessão de gravação correta.

Cada loader/action recebe a request de entrada. Leia o header de id de gravação dela e o encaminhe em qualquer fetch do lado do servidor:

import { RECORDING_ID_HEADER } from 'test-proxy-recorder';
import type { LoaderFunctionArgs } from 'react-router';
export async function loader({ request }: LoaderFunctionArgs) {
const headers: Record<string, string> = {};
const id = request.headers.get(RECORDING_ID_HEADER); // 'x-test-rcrd-id'
if (id) headers[RECORDING_ID_HEADER] = id;
// Aponte a base da API para o proxy apenas em dev/teste.
const res = await fetch('http://localhost:8100/api/data', { headers });
return res.json();
}

Aponte a URL base do seu backend para o proxy (http://localhost:8100) apenas em dev/teste, exatamente como na configuração manual. As requisições do lado do navegador continuam sendo tratadas pelo mecanismo HAR do playwrightProxy.before().

Assim que o adaptador for lançado, isso se reduz a um único import de helper — acompanhe o progresso no roadmap.