@teamsparta/datadog-feature-flags

Datadog Feature Flags를 OpenFeature 기반으로 React 앱에서 사용할 수 있도록 래핑한 패키지입니다.

Datadog OpenFeature browser provider를 초기화하고 @openfeature/react-sdk의 OpenFeatureProvider와 React hooks를 제공합니다. Datadog provider는 기본적으로 RUM feature flag tracking을 활성화하므로, 같은 앱에서 Datadog RUM이 초기화되어 있으면 flag evaluation이 RUM에 함께 보고됩니다.

Installation

pnpm install @teamsparta/datadog-feature-flags

Provider

import { DatadogFeatureFlagsProvider } from '@teamsparta/datadog-feature-flags';

function App() {
  return (
    <DatadogFeatureFlagsProvider
      applicationId={import.meta.env.VITE_DATADOG_APPLICATION_ID}
      clientToken={import.meta.env.VITE_DATADOG_CLIENT_TOKEN}
      env={import.meta.env.MODE === 'production' ? 'prod' : 'test'}
      service="my-service"
      version={import.meta.env.VITE_APP_VERSION}
      evaluationContext={{
        targetingKey: user.id,
        email: user.email,
        plan: user.plan,
      }}
    >
      <Routes />
    </DatadogFeatureFlagsProvider>
  );
}

evaluationContext.targetingKey is required for stable user targeting and Experiments. Use a durable user ID when the user is signed in, or a persisted anonymous ID before sign-in.

Boolean Flags

import { useFeatureFlag } from '@teamsparta/datadog-feature-flags';

function NewFeature() {
  const enabled = useFeatureFlag('union-docs-new-feature', false);

  if (!enabled) return <CurrentFeature />;
  return <TreatmentFeature />;
}

String Flags

import { useFeatureFlagString } from '@teamsparta/datadog-feature-flags';

function ButtonCopy() {
  const copy = useFeatureFlagString('checkout-button-copy', 'Start');

  return <button>{copy}</button>;
}

Evaluation Details

import { useFeatureFlagDetails } from '@teamsparta/datadog-feature-flags';

function DebugFlag() {
  const details = useFeatureFlagDetails('union-docs-new-feature', false);

  return (
    <pre>
      {JSON.stringify(
        {
          value: details.value,
          variant: details.variant,
          reason: details.reason,
        },
        null,
        2,
      )}
    </pre>
  );
}

Props

interface DatadogFeatureFlagsProviderProps {
  applicationId: string;
  clientToken: string;
  site?: string;
  env: string;
  service?: string;
  version?: string;
  evaluationContext?: {
    targetingKey: string;
    [key: string]: EvaluationContextValue;
  };
  children: React.ReactNode;
}

• site defaults to datadoghq.com.
• env should match the Datadog environment where the flag is configured.
• service and version should match RUM configuration when RUM is enabled in the same app.
• evaluationContext.targetingKey should be stable for the same user/session so Experiments split traffic consistently.