qa-recorder 라이브러리 개발기

<script src="https://unpkg.com/qa-recorder/dist/qa-recorder.umd.js"></script>

// CDP로 네트워크 캡처 — 우아한형제들 방식
ws.send({ id: 1, method: "Network.enable" });
ws.on("message", (msg) => {
  const data = JSON.parse(msg.toString());
  if (data.method === "Network.requestWillBeSent") { ... }
  if (data.method === "Network.responseReceived") { ... }
});

// 원본 fetch 저장
const originalFetch = window.fetch;

// window.fetch를 래핑해서 교체
window.fetch = async function (input, init) {
  const startTime = Date.now();
  const request = new Request(input, init);

  const response = await originalFetch(input, init);

  // 요청/응답 정보를 버퍼에 기록
  captureRequest({
    url: request.url,
    method: request.method,
    status: response.status,
    duration: Date.now() - startTime,
    requestHeaders: Object.fromEntries(request.headers),
    responseHeaders: Object.fromEntries(response.headers),
  });

  return response;
};

const OriginalXHR = window.XMLHttpRequest;

window.XMLHttpRequest = new Proxy(OriginalXHR, {
  construct(Target, args) {
    const xhr = new Target(...args);
    const meta: RequestMeta = {};

    return new Proxy(xhr, {
      get(target, prop) {
        // 후킹할 메서드만 가로채고, 나머지는 원본으로 위임
        if (prop === 'open') {
          return (method: string, url: string) => {
            meta.method = method;
            meta.url = url;
            meta.startTime = Date.now();
            return target.open(method, url);
          };
        }

        if (prop === 'send') {
          return (body?: BodyInit) => {
            target.addEventListener('loadend', () => {
              captureRequest({
                ...meta,
                status: target.status,
                duration: Date.now() - meta.startTime!,
              });
            });
            return target.send(body);
          };
        }

        // 그 외 모든 프로퍼티는 원본으로 위임
        const value = Reflect.get(target, prop, target);
        return typeof value === 'function' ? value.bind(target) : value;
      },
      set(target, prop, value) {
        return Reflect.set(target, prop, value, target);
      },
    });
  },
}) as any;

// console.error, console.warn 패칭
const originalConsoleError = console.error;
console.error = (...args: unknown[]) => {
  captureConsole({ level: 'error', args: serializeArgs(args), timestamp: Date.now() });
  originalConsoleError(...args); // 원본 동작 유지
};

// 미처리 예외 감지
window.addEventListener('error', (event) => {
  captureConsole({
    level: 'error',
    args: [event.message, event.filename, `line ${event.lineno}`],
    timestamp: Date.now(),
  });
});

// 미처리 Promise 거부 감지
window.addEventListener('unhandledrejection', (event) => {
  captureConsole({
    level: 'error',
    args: [String(event.reason)],
    timestamp: Date.now(),
  });
});

class CircularBuffer<T> {
  private buffer: T[] = [];
  private maxSize: number;

  constructor(maxSize: number) {
    this.maxSize = maxSize;
  }

  push(item: T) {
    if (this.buffer.length >= this.maxSize) {
      this.buffer.shift(); // 가장 오래된 항목 제거
    }
    this.buffer.push(item);
  }

  snapshot(): T[] {
    return [...this.buffer];
  }
}

const container = document.createElement("div");
const shadow = container.attachShadow({ mode: "closed" });
document.body.appendChild(container);

// shadow 내부에서만 스타일이 적용됨
const style = document.createElement("style");
style.textContent = `button { ... }`;
shadow.appendChild(style);
shadow.appendChild(floatingButton);

{
  "log": {
    "version": "1.2",
    "entries": [{
      "request": { "method": "GET", "url": "...", "headers": [...] },
      "response": { "status": 200, "headers": [...], "content": {...} },
      "time": 142
    }]
  }
}

const DEFAULT_MASK_HEADERS = new Set(['authorization', 'cookie', 'set-cookie']);

function maskHeaders(headers: Record<string, string>): Record<string, string> {
  const result: Record<string, string> = {};
  for (const [key, value] of Object.entries(headers)) {
    result[key] = DEFAULT_MASK_HEADERS.has(key.toLowerCase()) ? '[MASKED]' : value;
  }
  return result;
}

qa-report-2026-05-01T14:30:00.zip
├── session.rr.json     ← rrweb DOM 이벤트 시퀀스
├── network.har         ← HAR 1.2 네트워크 로그
└── report.html         ← 세 파일을 인라인으로 품은 통합 뷰어