React Router / Remix

Loaders và actions của React Router 7 chạy trên máy chủ, nên các lời gọi fetch của chúng đi qua proxy mà không có browser context — tình huống tương tự SSR của Next.js. Proxy cần header x-test-rcrd-id trên các request phía máy chủ đó để gán chúng vào đúng session ghi lại.

Pattern thủ công (hoạt động ngay hôm nay)

Mỗi loader/action nhận request đến. Đọc header recording-id từ nó và chuyển tiếp nó trên bất kỳ fetch phía máy chủ nào:

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;

  // Chỉ trỏ base API về proxy trong dev/test.
  const res = await fetch('http://localhost:8100/api/data', { headers });
  return res.json();
}

Chỉ trỏ base URL backend của bạn về proxy (http://localhost:8100) trong dev/test, đúng như trong thiết lập thủ công. Các request phía trình duyệt vẫn được xử lý bởi cơ chế HAR của playwrightProxy.before().

Khi adapter ra mắt, việc này sẽ rút gọn thành một import helper duy nhất — theo dõi tiến độ trên lộ trình.