본문으로 건너뛰기

클라이언트 라이브러리

패키지TypeScript SDKDart SDKPython SDK

프레임워크 어댑터

React 래퍼Flutter 래퍼

TypeScript SDK

하나의 패키지에 여섯 개의 진입점이 있습니다. 런타임에 맞는 것을 가져오면, 트리 셰이킹된 빌드가 나머지를 번들에서 제외합니다.

배포 위치

@prodantix/sdk on npm.

설치

Bash
bun add @prodantix/sdk

진입점

각 서브패스는 자체 ESM 및 CommonJS 빌드와 타입을 함께 제공합니다. 루트는 런타임에 중립적이고, 나머지는 특정 런타임에 필요한 것을 더합니다.

SubpathWhat it exports
@prodantix/sdkProdantixClient, createClient, evaluateFlag, FlagsClient, MessagesClient
@prodantix/sdk/webcreateWebClient, installAutocapture, installSessionReplay, WebTransport
@prodantix/sdk/nodecreateNodeClient
@prodantix/sdk/cspprodantixConnectSrc, prodantixScriptSrc
@prodantix/sdk/chatmountChat, ChatClient, ChatPanel, resolveAppearance
@prodantix/sdk/messengerfetchMessengerConfig, cachedMessengerConfig, MESSENGER_CACHE_KEY

@prodantix/sdk

클라이언트, 플래그 평가기, 그리고 저장소와 전송 인터페이스입니다. 여기에는 DOM을 건드리는 코드가 없으므로, 저장소와 전송, 시계, id 팩토리를 직접 넘겨 어디서든 실행할 수 있습니다.

TypeScript
import { createClient, MemoryStorage } from '@prodantix/sdk';

const prodantix = createClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  storage: new MemoryStorage(),
});

prodantix.capture('order.completed', { properties: { amount: 4200, currency: 'XAF' } });
await prodantix.flush();

@prodantix/sdk/web

같은 클라이언트 위에 얹는 브라우저 배선입니다. 로컬 스토리지 보존, 페이지가 숨겨질 때 비컨 전송, 그리고 페이지뷰와 클릭 자동 수집을 제공합니다. 세션 리플레이는 리플레이 호스트를 지정하기 전까지 꺼져 있습니다.

TypeScript
import { createWebClient } from '@prodantix/sdk/web';

const prodantix = createWebClient({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  flagsHost: 'https://api.prodantix.com',
  autocaptureOptions: { clicks: true, pageviews: true },
});

prodantix.identify('user-42', { set: { plan: 'pro' } });

if (await prodantix.isFeatureEnabled('new-checkout')) {
  // ...
}

// Every per-flag read records one $feature_flag_called exposure.
const variant = await prodantix.getVariant('new-checkout');
if (variant?.key === 'treatment') {
  // ...
}

// A flag targeting a cohort reads this user's memberships from the store;
// pass them yourself to skip the lookup.
if (await prodantix.isFeatureEnabledLocal('members', { cohorts: ['<cohort id>'] })) {
  // ...
}

@prodantix/sdk/node

서버 기본값을 적용한 같은 클라이언트입니다. 이벤트는 버퍼에 모였다가 백그라운드에서 전송되므로, 프로세스가 종료되기 전에 shutdown을 호출하지 않으면 마지막 배치는 끝내 나가지 않습니다.

TypeScript
import { createNodeClient } from '@prodantix/sdk/node';

// A node client streams flag changes over Socket.IO by default and refetches
// the snapshot on push; streamFlags: false leaves only the 30s poll.
const prodantix = createNodeClient({
  apiKey: process.env.PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.api.prodantix.com',
  streamFlags: true,
});

prodantix.capture('job.completed', { properties: { queue: 'emails' } });
await prodantix.shutdown();

@prodantix/sdk/csp

앱이 Prodantix에 도달하기 위해 필요한 콘텐츠 보안 정책 소스입니다. React나 브라우저에서 아무것도 가져오지 않으므로 빌드 설정 파일이 직접 읽을 수 있습니다.

TypeScript
import { prodantixConnectSrc, prodantixScriptSrc } from '@prodantix/sdk/csp';

const hosts = {
  ingest: 'https://eu.api.prodantix.com',
  edge: 'https://eu.edge.prodantix.com',
  replay: 'https://eu.replay.prodantix.com',
};

const policy = [
  `connect-src ${prodantixConnectSrc(hosts)}`,
  `script-src ${prodantixScriptSrc(hosts)}`,
].join('; ');

@prodantix/sdk/chat

지원 위젯입니다. 마운트하면 열기, 닫기, 파기, 사용자 식별을 제공하는 핸들을 얻습니다. 닫힌 섀도 루트 안에서 렌더링되므로 호스트 페이지의 스타일이 위젯에 닿지 않습니다.

TypeScript
import { mountChat } from '@prodantix/sdk/chat';

const messenger = mountChat({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
  distinctId: prodantix.distinctId,
});

document.querySelector('#help')?.addEventListener('click', () => messenger.open());

@prodantix/sdk/messenger

위젯 뒤에 있는 설정 리더입니다. 프로젝트의 메신저 구성을 가져와 캐시하고, 해당 프로젝트가 메신저를 켜 두었는지 알려줍니다. 자체 실행 스니펫은 따로 빌드되며 이 서브패스로는 가져올 수 없습니다.

TypeScript
import { fetchMessengerConfig } from '@prodantix/sdk/messenger';

const config = await fetchMessengerConfig({
  apiKey: PRODANTIX_PUBLIC_KEY,
  host: 'https://eu.edge.prodantix.com',
});

if (config?.enabled) {
  // the project has the messenger switched on
}