[FE] React Native에서 Amplitude 쿠키 에러 해결하기
FE · FE

[FE] React Native에서 Amplitude 쿠키 에러 해결하기

· 4min read

React Native 앱에 Amplitude를 붙이다 마주친 성가신 에러가 있었습니다.

Failed to set cookie for key: AMP_TEST
Failed to set cookie for key: AMP_123456789

분명 앱은 잘 돌아가는데 콘솔은 지저분해지는 상황이 발생하길래,, 클로드와 함께 이게 왜 발생하는지, 그리고 어떻게 깔끔하게 해결하는지 정리해봤습니다.

문제의 원인

React Native는 Browser가 아니다.

문제의 핵심은 간단합니다. React Native는 웹 브라우저가 아닙니다.

브라우저에 있는 것들:

  • ✅ document.cookie
  • ✅ localStorage, sessionStorage
  • ✅ 쿠키 스토리지

React Native에 있는 것들:

  • ❌ 위의 모든 것
    • 하 이것 때문에 처음 RN 할 때 레전드 빡쳤었구요
  • ✅ AsyncStorage (네이티브 모듈) 얘만 믿고 가야하구요.

Amplitude SDK의 동작 방식

Amplitude의 TypeScript 코어는 기본적으로 브라우저 환경을 전제로 설계되어 있습니다. 초기화 과정을 보면:

  1. 쿠키 스토리지 사용 시도 (최우선 순위)
  2. RN에는 쿠키가 없으므로 실패
  3. Failed to set cookie... 에러 로그 출력
  4. AsyncStorage로 fallback하여 정상 작동

결과적으로는 잘 작동하지만, 불필요한 시도와 에러 로그가 남는 구조입니다.

해결 방법

한 줄로 끝내기

import * as amplitude from "@amplitude/analytics-react-native";

export const initAmplitude = async (apiKey: string) => {
  await amplitude.init(apiKey, undefined, {
    disableCookies: true,
    trackingOptions: {
      deviceId: true,
      sessionId: true,
      platform: true,
    },
  }).promise;
};

disableCookies: true가 하는 일

  • 쿠키 저장 경로 자체를 완전히 비활성화

  • 쿠키 시도 -> 실패 -> fallback 과정 제거

  • 콘솔 경고 완전 제거

  • 초기화 속도 미세하게 개선

    • disableCookies: false (기본값)

      • 쿠키 접근 시도 (1-3ms) → 실패 처리 → AsyncStorage 접근
      • 총 초기화: ~50-100ms

    • disableCookies: true

      • AsyncStorage 직접 접근
      • 총 초기화: ~45-95ms

개발/프로덕션 환경 분리

당연하게도 환경별로 설정을 분리하는 게 좋습니다. 프로덕션은 달라야겠죠?

const getAmplitudeConfig = () => {
  const base = {
    disableCookies: true,
    trackingOptions: {
      deviceId: true,
      sessionId: true,
      platform: true,
    },
  };

  if (__DEV__) {
    return {
      ...base,
      logLevel: amplitude.Types.LogLevel.Verbose,
      minIdLength: 1,
    };
  }

  return base;
};

주의사항

RN에서 쓰면 안 되는 웹 전용 옵션들

아래 옵션들은 Browser SDK 전용입니다.RN 공식 문서에 없다면 절대 사용하시면 안되구요..

{
  defaultTracking: { ... },
  cookieDomain: "...",
  cookieExpiration: 365,
  useBatch: true,
  fileDownloads: true,
  pageViews: true,
  formInteractions: true
}

Session Replay를 사용하는 경우

Session Replay는 민감 정보를 포함할 수 있어 마스킹 설정이 매우 중요합니다.

const sessionReplay = new SessionReplayPlugin({
  autoStart: false,
  maskAllInputs: true,
  maskAllTextContent: true,
  sampleRate: __DEV__ ? 0.05 : 0.01,
});

성능 비교

항목disableCookies: falsedisableCookies: true
콘솔 경고지속적으로 출력완전 제거
초기화 성능fallback 비용 존재AsyncStorage 직행
스토리지 일관성쿠키 실패 후 AsyncStorageAsyncStorage만 사용
RN 호환성경고 가능성가장 안전함

최종 권장 코드

import * as amplitude from "@amplitude/analytics-react-native";

export const initAmplitude = async (apiKey: string) => {
  if (!apiKey) {
    console.warn("Amplitude API key missing");
    return;
  }

  await amplitude.init(apiKey, undefined, {
    disableCookies: true,
    trackingOptions: {
      deviceId: true,
      sessionId: true,
      platform: true,
    },
  }).promise;
};

마무리

React Native에서 Amplitude를 쓴다면 disableCookies: true는 선택이 아닌 필수 설정입니다.

브라우저가 아닌 환경에서 브라우저 API를 시도하는 게 문제의 본질이니, 아예 그 경로를 차단하는 게 정답입니다. 이 한 줄로 콘솔은 깔끔하게, Amplitude는 안정적으로 돌아갑니다.

관련 글