Datadog の Feature Flags 機能を試してみた
Datadog の Feature Flag 機能について
2026 年 2 月に Datadog の Feature Flags 機能が GA されました。
元々 Datadog は LaunchDarkly などの Feature Flag 管理ツールと連携することで、Feature Flag に関する情報を RUM (Real User Monitoring) 側に反映させて分析することができました。
今回、Datadog 側で Feature Flags 機能を提供するようになり、より簡単に APM や RUM と Feature Flag を連携できるようになりました。
やってみる
全体構成
Vite + React で簡単な SPA アプリケーションを作成して、下記構成で試してみます。
Datadog が Feature Flag 管理と RUM の両方を提供するようになったので、登場するサービスが減ってシンプルになりましたね。
Datadog 側の設定
まず、Datadog の RUM 機能でアプリケーションを作成します。
Type は React を選択します。
アプリケーションを RUM と統合するためのコードが表示されます。
特に applicationId と clientToken は後で使うのでメモしておきます。
Feature Flags 管理画面で Flag を作成します。
Flag 名は feature1 とします。
参照元は Client を選択し、型は Boolean を選択します。
通知周りはデフォルト設定とします。
「Create Flag」をクリックすると、Feature Flag 機能とアプリケーションの連携方法が表示されます。
各 Flag は環境ごとに管理可能であり、まずは Development 環境のみ有効にします。
アプリケーション側の設定
サンプルアプリケーションとして占いアプリを作成しました。
client.getBooleanValue("feature1", false); で Feature Flag の値を取得し、true の場合はボタンの色をピンクに、false の場合はボタンの色を青に変えるようにしています。
function App() {
const [apiState, setApiState] = useState<ApiState>({ status: "idle" });
const [fetchKey, setFetchKey] = useState(0);
const isFeature1Enabled = client.getBooleanValue("feature1", false);
const errorRate = isFeature1Enabled ? 0.3 : 0;
const handleFetch = async () => {
setFetchKey((k) => k + 1);
setApiState({ status: "loading" });
try {
const data = await fetchFortune(errorRate);
setApiState({ status: "success", data });
} catch (e) {
setApiState({ status: "error", error: e as Error });
}
};
const buttonClass = isFeature1Enabled
? "cursor-pointer rounded-lg border border-transparent px-5 py-2 text-base font-medium bg-pink-400 text-white hover:bg-pink-300 transition-colors disabled:opacity-50"
: "cursor-pointer rounded-lg border border-transparent px-5 py-2 text-base font-medium bg-blue-600 text-white hover:bg-blue-500 transition-colors disabled:opacity-50";
return (
<>
<h1>占いアプリ</h1>
<div className="card">
<button
className={buttonClass}
onClick={handleFetch}
disabled={apiState.status === "loading"}
>
今日の運勢を占う
</button>
<div className="mt-4">
<ErrorBoundary key={fetchKey} fallback={ErrorFallback}>
<ResultCard state={apiState} />
</ErrorBoundary>
</div>
</div>
</>
);
}
また、feature1 が true の場合は 30% の可能性でエラーを発生させるようにしています(実際に API を叩いているわけでは無く、擬似的にエラーを発生させています)。
その他、Datadog と Feature Flag を連携する部分は下記のようになります。
import { datadogRum } from "@datadog/browser-rum";
import { reactPlugin } from "@datadog/browser-rum-react";
import { DatadogProvider } from "@datadog/openfeature-browser";
import { OpenFeature } from "@openfeature/web-sdk";
export async function initDatadog() {
datadogRum.init({
applicationId: import.meta.env.VITE_DATADOG_APPLICATION_ID,
clientToken: import.meta.env.VITE_DATADOG_CLIENT_TOKEN,
site: import.meta.env.VITE_DATADOG_SITE ?? "datadoghq.com",
service: "datadog-feature-flag",
env: import.meta.env.VITE_DATADOG_ENV ?? "dev",
trackUserInteractions: true,
trackResources: true,
trackLongTasks: true,
plugins: [reactPlugin],
});
const provider = new DatadogProvider({
clientToken: import.meta.env.VITE_DATADOG_CLIENT_TOKEN,
applicationId: import.meta.env.VITE_DATADOG_APPLICATION_ID,
site: import.meta.env.VITE_DATADOG_SITE ?? "datadoghq.com",
service: "datadog-feature-flag",
env: import.meta.env.VITE_DATADOG_ENV ?? "dev",
enableFlagEvaluationTracking: true,
enableExposureLogging: true,
});
await OpenFeature.setProviderAndWait(provider);
}
RUM との連携は下記ドキュメントを参考にしました。
Feature Flags 機能との連携は下記ドキュメントを参考にしました。
applicationId と clientToken は Datadog RUM のアプリケーション作成時に取得したものを Amplify の環境変数に設定しています。
使用したコード類は下記リポジトリで公開しているので、もし興味があればご確認下さい。
今回はせっかくなので Amplify にデプロイしてみましたが、ローカル環境で実行しても全く同じようにテストすることが可能です。
動作確認
Feature Flags 機能を利用できるようにはなっていますが、現時点では全てのトラフィックにおいて false が返ってくる状態です。
ボタンも青色で、エラーも発生しません。
「Edit Targeting Rules」をクリックして、ルールを追加します。
「+」をクリックします。
「Add Rollouts Steps」をクリックします。
こちらの機能を利用することで、まず一定割合のトラフィックを新しいバージョンに流しつつ、一定の期間経過後に残りのトラフィックを新しいバージョンに切り替えるようなことができます。
今回はまず 50% のトラフィックを新しいバージョンに流しつつ、10 分後に残りのトラフィックを新しいバージョンに切り替えるようにします。
「Save Changes」をクリックします。
50% の確率で新しいバージョンにトラフィックが流れ始め、ピンク色のボタンやエラーを確認できるようになりました。
Datadog のコンソールから、Feature Flag ごとのエラー率や、レイテンシも良い感じに見れます。
また、RUM の Feature Flag Tracking 機能を利用することで、より詳細な分析も可能です。
個別の RUM イベントも確認してみます。
今回は Chrome からのアクセスのみで面白みが無いですが、調査が捗りそうです。
こんな感じのビューも見れます。
Error Tracking 機能と Feature Flag も関連付けて分析できます。
エラーの詳細画面です。
今回は特にパフォーマンス面の変化は無いですが、パフォーマンス面の分析を行うための良い感じのビューも見れます。
RUM の情報を見て問題があれば、Feature Flags 側のコンソールからロールバックすれば元の状態に切り戻せます。
最後に
Datadog の Feature Flags 機能 を試してみました。
RUM と Feature Flag を簡単に連携できて、ロールバックも同じコンソールから実行できるのは非常に良さそうです。
Feature Flag 管理ツールを検討している方や Datadog RUM を利用している方は是非試してみて下さい！
