Getting Started with Feature Flag Data in RUM

Join the Beta!

Feature Flag analysis for RUM is in private beta. To request access, contact Support at support@datadoghq.com. In the meantime, follow the instructions below to enrich your RUM events with feature flag context.

Overview

Feature flag data gives you greater visibility into your user experience and performance monitoring by allowing you to determine which users are being shown a specific feature and if any change you introduce is impacting your user experience or negatively affecting performance.

By enriching your RUM data with feature flag data, you can be confident that your feature will successfully launch without unintentionally causing a bug or performance regression. With this additional layer of insight, you can correlate feature releases with performance, pinpoint issues to specific releases, and troubleshoot faster.

Setup

Feature flag tracking is available in the RUM Browser SDK. To start, set up RUM browser monitoring. You need the Browser RUM SDK version >= 4.25.0.

You can start collecting feature flag data for custom feature flag management solutions, or using one of our integration partners.

We currently support integrations with:

launchdarkly

split

flagsmith

Custom feature flag management

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

import { datadogRum } from '@datadog/browser-rum';

// Initialize Datadog Browser SDK
datadogRum.init({
  ...
  enableExperimentalFeatures: ["feature_flags"],
  ...
});

Each time a feature flag is evaluated, add the following function to send the feature flag information to RUM
```
datadogRum.addFeatureFlagEvaluation(key, value);
```

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script>
  (function(h,o,u,n,d) {
     h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
     d=o.createElement(u);d.async=1;d.src=n
     n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v4.js','DD_RUM')
  DD_RUM.onReady(function() {
    DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
  })
</script>

Each time a feature flag is evaluated, add the following function to send the feature flag information to RUM:
```
datadogRum.addFeatureFlagEvaluation(key, value);
```

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.js" type="text/javascript"></script>
<script>
  window.DD_RUM &&
    window.DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
</script>

Each time a feature flag is evaluated, add the following function to send the feature flag information to RUM:
```
datadogRum.addFeatureFlagEvaluation(key, value);
```

LaunchDarkly Integration

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

import { datadogRum } from '@datadog/browser-rum';

// Initialize Datadog Browser SDK
datadogRum.init({
  …
  enableExperimentalFeatures: ["feature_flags"],
  …
});

Initialize LaunchDarkly’s SDK and create an inspector reporting feature flags evaluations to Datadog using the snippet of code shown below.

For more information about initializing LaunchDarkly’s SDK, check out LaunchDarkly’s JavaScript SDK documentation.

const client = LDClient.initialize("<APP_KEY>", "<USER_ID>", {
  inspectors: [
    {
      type: "flag-used",
      name: "dd-inspector",
      method: (key: string, detail: LDClient.LDEvaluationDetail) => {
        datadogRum.addFeatureFlagEvaluation(key, detail.value);
      },
    },
  ],
});

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script>
  (function(h,o,u,n,d) {
     h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
     d=o.createElement(u);d.async=1;d.src=n
     n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v4.js','DD_RUM')
  DD_RUM.onReady(function() {
    DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
  })
</script>

Initialize LaunchDarkly’s SDK and create an inspector reporting feature flags evaluations to Datadog using the snippet of code below.

For more information about initializing LaunchDarkly’s SDK, check out LaunchDarkly’s JavaScript SDK documentation.

const client = LDClient.initialize("<APP_KEY>", "<USER_ID>", {
  inspectors: [
    {
      type: "flag-used",
      name: "dd-inspector",
      method: (key: string, detail: LDClient.LDEvaluationDetail) => {
        datadogRum.addFeatureFlagEvaluation(key, detail.value);
      },
    },
  ],
});

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.js" type="text/javascript"></script>
<script>
  window.DD_RUM &&
    window.DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
</script>

Initialize LaunchDarkly’s SDK and create an inspector reporting feature flags evaluations to Datadog using the snippet of code below.

For more information about initializing LaunchDarkly’s SDK, check out LaunchDarkly’s JavaScript SDK documentation.

const client = LDClient.initialize("<APP_KEY>", "<USER_ID>", {
  inspectors: [
    {
      type: "flag-used",
      name: "dd-inspector",
      method: (key: string, detail: LDClient.LDEvaluationDetail) => {
        datadogRum.addFeatureFlagEvaluation(key, detail.value);
      },
    },
  ],
});

Split Integration

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

import { datadogRum } from '@datadog/browser-rum';

// Initialize Datadog Browser SDK
datadogRum.init({
  …
  enableExperimentalFeatures: ["feature_flags"],
  …
});

Initialize Split’s SDK and and create an impression listener reporting feature flags evaluations to Datadog using the following snippet of code

For more information about initializing Split’s SDK, check out Split’s JavaScript SDK documentation.

const factory = SplitFactory({
    core: {
      authorizationKey: "<APP_KEY>",
      key: "<USER_ID>",
    },
    impressionListener: {
      logImpression(impressionData) {              
          datadogRum
              .addFeatureFlagEvaluation(
                   impressionData.impression.feature,
                   impressionData.impression.treatment
              );
     },
  },
});

const client = factory.client();

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script>
  (function(h,o,u,n,d) {
     h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
     d=o.createElement(u);d.async=1;d.src=n
     n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v4.js','DD_RUM')
  DD_RUM.onReady(function() {
    DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
  })
</script>

Initialize Split’s SDK and create an inspector reporting feature flags evaluations to Datadog using the snippet of code below.

For more information about initializing Split’s SDK, check out Split’s JavaScript SDK documentation.

const factory = SplitFactory({
    core: {
      authorizationKey: "<APP_KEY>",
      key: "<USER_ID>",
    },
    impressionListener: {
      logImpression(impressionData) {              
          datadogRum
              .addFeatureFlagEvaluation(
                   impressionData.impression.feature,
                   impressionData.impression.treatment
              );
     },
  },
});

const client = factory.client();

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.js" type="text/javascript"></script>
<script>
  window.DD_RUM &&
    window.DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
</script>

Initialize Split’s SDK and create an inspector reporting feature flags evaluations to Datadog using the snippet of code below.

For more information about initializing Split’s SDK, check out Split’s JavaScript SDK documentation.

const factory = SplitFactory({
    core: {
      authorizationKey: "<APP_KEY>",
      key: "<USER_ID>",
    },
    impressionListener: {
      logImpression(impressionData) {              
          datadogRum
              .addFeatureFlagEvaluation(
                   impressionData.impression.feature,
                   impressionData.impression.treatment
              );
     },
  },
});

const client = factory.client();

Flagsmith Integration

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

import { datadogRum } from '@datadog/browser-rum';

// Initialize Datadog Browser SDK
datadogRum.init({
  …
  enableExperimentalFeatures: ["feature_flags"],
  …
});

Initialize Flagsmith’s SDK with the datadogRum option, which reports feature flags evaluations to Datadog using the snippet of code shown below.
Optionally, you can configure the client so that Flagsmith traits are sent to Datadog via datadogRum.setUser(). For more information about initializing Flagsmith’s SDK, check out Flagsmith’s JavaScript SDK documentation.
```
 // Initialize the Flagsmith SDK
 flagsmith.init({
     datadogRum: {
         client: datadogRum,
         trackTraits: true,
     },
     ...
 })
```

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script>
  (function(h,o,u,n,d) {
     h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
     d=o.createElement(u);d.async=1;d.src=n
     n=o.getElementsByTagName(u)[0];n.parentNode.insertBefore(d,n)
  })(window,document,'script','https://www.datadoghq-browser-agent.com/datadog-rum-v4.js','DD_RUM')
  DD_RUM.onReady(function() {
    DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
  })
</script>

Initialize Flagsmith’s SDK with the datadogRum option, which reports feature flags evaluations to Datadog using the snippet of code shown below.
Optionally, you can configure the client so that Flagsmith traits are sent to Datadog via datadogRum.setUser(). For more information about initializing Flagsmith’s SDK, check out Flagsmith’s JavaScript SDK documentation.
```
 // Initialize the Flagsmith SDK
 flagsmith.init({
     datadogRum: {
         client: datadogRum,
         trackTraits: true,
     },
     ...
 })
```

To start collecting feature flag data, initialize the RUM SDK and configure the enableExperimentalFeatures initialization parameter with ["feature_flags"].

<script src="https://www.datadoghq-browser-agent.com/datadog-rum-v4.js" type="text/javascript"></script>
<script>
  window.DD_RUM &&
    window.DD_RUM.init({
      ...
      enableExperimentalFeatures: ["feature_flags"],
      ...
    })
</script>

Initialize Flagsmith’s SDK with the datadogRum option, which reports feature flags evaluations to Datadog using the snippet of code shown below.
Optionally, you can configure the client so that Flagsmith traits are sent to Datadog via datadogRum.setUser(). For more information about initializing Flagsmith’s SDK, check out Flagsmith’s JavaScript SDK documentation.
```
 // Initialize the Flagsmith SDK
 flagsmith.init({
     datadogRum: {
         client: datadogRum,
         trackTraits: true,
     },
     ...
 })
```

Analyze your Feature Flag performance in RUM

Feature flags appear in the context of your RUM Sessions, Views, and Errors as a list.

Feature Flag list of attributes in RUM Explorer

Search feature flags using the RUM Explorer

Search through all the data collected by RUM in the RUM Explorer to surface trends on feature flags, analyze patterns with greater context, or export them into dashboards and monitors. You can search your Sessions, Views, or Errors in the RUM Explorer, with the @feature_flags.{flag_name} attribute.

Sessions

Filtering your Sessions with the @feature_flags.{flag_name} attribute, you will find all sessions in the given time frame where your feature flag was evaluated.

Search Sessions for Feature Flags in the RUM Explorer

Views

Filtering your Views with the @feature_flags.{flag_name} attribute, you will find the specific views in the given time frame where your feature flag was evaluated.

Search Views for Feature Flags in the RUM Explorer

Errors

Filtering your Errors with the @feature_flags.{flag_name} attribute, you will find all the errors in the given time frame that occurred on the View where your feature flag was evaluated

Search Errors for Feature Flags in the RUM Explorer

Why doesn’t my feature flag data reflect what I expect to see?

Feature flags will show up in the context of events where they are evaluated, meaning they should show up on the views that the feature flag code logic is run on.

Depending on how you’ve structured your code and set up your feature flags, you may see unexpected feature flags appear in the context of some events.

For example, to see what Views your feature flag is being evaluated on, you can use the RUM Explorer to make a similar query:

Search Views for Feature Flags in the RUM Explorer

Here are a few examples of reasons why your feature flag is being evaluated on unrelated Views that can help with your investigations:

A common react component that appears on multiple pages which evaluates feature flags whenever they run.
A routing issue where components with a feature flag evaluation are rendered before/after URL changes.

When performing your investigations, you can also scope your data for View Name’s that are relevant to your feature flag.

Further Reading

Additional helpful documentation, links, and articles:

Visualize your RUM data in the RUM ExplorerDOCUMENTATION