Skip to content

batching.mdx

Latest commit

 

History

History
128 lines (106 loc) · 3.78 KB

batching.mdx

File metadata and controls

128 lines (106 loc) · 3.78 KB
Raw

배칭

개요

이벤트 배칭은 여러 이벤트를 묶어서 애널리틱스 서비스에 보내기 전에 진행하는 성능 최적화 기술입니다. 이는 다음과 같은 경우에 특히 유용합니다:

  • 내부 배칭 기능이 있는 애널리틱스 서비스(Amplitude 또는 Google Analytics)를 사용하지 않는 경우
  • 네트워크 요청 수를 줄이고 싶은 경우
  • 성능을 최적화하고 싶은 경우

설정

트래커 설정에서 배칭을 활성화합니다:

const [Track, useTracker] = createTracker({
  // ... other config
  batch: {
    enable: true,
    interval: 2000,
    thresholdSize: 100,
    onFlush: (batch, isBrowserClosing) => {
      if (isBrowserClosing) {
        // 브라우저가 닫힐 때 신뢰할 수 있는 전송을 위해 sendBeacon 사용
        navigator.sendBeacon("/analytics/collect/batch", JSON.stringify(batch));
        return;
      }

      // 일반 배칭 처리
      fetch("/analytics/collect/batch", {
        method: "POST",
        body: JSON.stringify(batch),
      });
    },
  },
});

옵션

  • enable: boolean (기본값: false)
    • 배칭 활성화/비활성화
  • interval: number (기본값: 3000)
    • 배칭 처리 간격 (ms)
  • thresholdSize: number (기본값: 25)
    • 배칭 처리 전 최대 이벤트 수
  • onFlush: (batch: Batch[], isBrowserClosing: boolean) => void | Promise<void>
    • 배칭 활성화 시 필요
    • 배칭 처리 함수
    • isBrowserClosing 브라우저 닫힘 시 배칭 처리 여부
  • onError: (error: Error) => void | Promise<void>
    • 배칭 처리 실패 시 오류 처리 함수

작동 방식

  1. 이벤트는 메모리에 수집됩니다
  2. 다음 중 하나가 발생할 때 배칭이 처리됩니다:
    • 구성된 간격이 도달합니다
    • 배칭 크기가 임계치에 도달합니다
    • 브라우저가 닫힐 때

예시

const [Track, useTracker] = createTracker({
  DOMEvents: {
    onClick: (clickParams, context) => {
      // 반환 값이 배칭됩니다
      return {
        ...clickParams,
        ...context,
        event_type: "click",
        timestamp: new Date().getTime(),
      };
    },
  },
  batch: {
    enable: true,
    interval: 2000,
    thresholdSize: 100,
    onFlush: (batch, isBrowserClosing) => {
      // Process the batch
    },
  },
});

function App() {
  return (
    <Track.Provider initialContext={{ deviceId: "device-123" }}>
      <Track.Click params={{ buttonId: "submit" }}>
        <button>Submit</button>
      </Track.Click>
    </Track.Provider>
  );
}

버튼을 여러 번 클릭했을 때:

  1. 각 클릭은 onClick 핸들러를 실행합니다
  2. 각 핸들러의 반환 값은 배치 큐에 추가됩니다
  3. 2초(또는 임계치에 도달할 때)가 지나면 onFlush가 모든 수집된 이벤트와 함께 호출됩니다

브라우저 닫힘 시 동작

브라우저가 닫힐 때, navigator.sendBeacon을 사용하여 이벤트 전송을 보장합니다:

onFlush: (batch, isBrowserClosing) => {
  if (isBrowserClosing) {
    navigator.sendBeacon("/analytics/collect/batch", JSON.stringify(batch));
    return;
  }

  // 일반 배칭 처리
  fetch("/analytics/collect/batch", {
    method: "POST",
    body: JSON.stringify(batch),
  });
};

유의 사항

  1. 이벤트 핸들러의 반환 값만 배칭되며, 핸들러 자체는 배칭되지 않습니다
  2. 배칭된 이벤트는 원래 매개변수와 컨텍스트를 유지합니다
  3. 이벤트는 순서대로 처리되며, 사용자 작업의 순서를 유지합니다
  4. 브라우저 닫힘 시 이벤트 전송을 보장하기 위해 navigator.sendBeacon을 사용합니다