React Router / Remix

React Router 7의 로더와 액션은 서버에서 실행되므로 그 fetch 호출이 브라우저 컨텍스트 없이 프록시를 통과합니다. Next.js SSR과 같은 상황입니다. 프록시는 그 서버 측 요청을 올바른 기록 세션에 귀속시키기 위해 x-test-rcrd-id 헤더가 필요합니다.

수동 패턴 (지금 동작)

각 로더/액션은 들어오는 request를 받습니다. 거기서 기록 id 헤더를 읽어 모든 서버 측 fetch에 전달하세요.

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;

  // 개발/테스트에서만 API 기본값을 프록시로 연결하세요.
  const res = await fetch('http://localhost:8100/api/data', { headers });
  return res.json();
}

개발/테스트에서만 백엔드 기본 URL을 프록시(http://localhost:8100)로 연결하세요. 수동 설정과 동일합니다. 브라우저 측 요청은 여전히 playwrightProxy.before()의 HAR 메커니즘이 처리합니다.

어댑터가 출시되면 이는 단일 헬퍼 임포트로 줄어듭니다. 진행 상황은 로드맵에서 확인하세요.