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:
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,
},
...
})
Feature flags appear in the context of your RUM Sessions, Views, and Errors as a list.
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.
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.
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
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:
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: