DataDog RUM Integration
Overview
DevCycle's clientside Javascript SDKs - including JS and React, can now be easily integrated with DataDog RUM Feature Flag Tracking - enabling the enrichment of your RUM data with DevCycle's variable data.
Table of Contents
Configuration
Tracking variable evaluations with DataDog RUM is very simple, requiring only two steps.
- Enable the experimental feature in your
datadogRum.init
configuration
datadogRum.init({
...
enableExperimentalFeatures: ["feature_flags"],
...
});
- Call
datadogRum.addFeatureFlagEvaluation(key, value)
whenever a variable is evaluated. Since the JavaScript and React SDKs emit an event on every variable evaluation, this code should run within the subscription callback.
See below for more specific examples:
JavaScript
To track all variable evaluations:
const user = { user_id: "my_user" };
const dvcOptions = { logLevel: "debug" };
const dvcClient = initialize("<DVC_CLIENT_SDK_KEY>", user, dvcOptions);
...
dvcClient.subscribe(
"variableEvaluted:*",
(key, variable) => {
datadogRum.addFeatureFlagEvaluation(key, variable.value);
}
)
To track a specific variable evaluation (in this case a variable whose key is my-variable-key
):
const user = { user_id: "my_user" };
const dvcOptions = { logLevel: "debug" };
const dvcClient = initialize("<DVC_CLIENT_SDK_KEY>", user, dvcOptions);
...
dvcClient.subscribe(
"variableEvaluted:my-variable-key",
(key, variable) => {
datadogRum.addFeatureFlagEvaluation(key, variable.value);
}
)
React
We recommend encapsulating your RUM code within a React hook, so consider the following example:
import { datadogRum } from '@datadog/browser-rum'
import { DVCVariableValue, useDVCClient } from '@devcycle/devcycle-react-sdk'
import { DVCVariable } from '@devcycle/devcycle-js-sdk'
let didInit = false
export const useDatadogRum = () => {
const dvcClient = useDVCClient()
if (!didInit) {
didInit = true
datadogRum.init({
...
})
datadogRum.startSessionReplayRecording()
dvcClient.subscribe(
'variableEvaluated:*',
(key, variable) => {
datadogRum.addFeatureFlagEvaluation(key, variable.value)
},
)
}
}
export default useDatadogRum
Then simply call the hook from your root component:
export const App = () => {
useDatadogRum()
...
return (
...
)
}
Coming Soon
DevCycle plans to release similar updates for both iOS and Android.