Skip to main content

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.

DataDog RUM Feature Flag Tracking screen shot

Table of Contents

Configuration

Tracking variable evaluations with DataDog RUM is very simple, requiring only two steps.

  1. Enable the experimental feature in your datadogRum.init configuration
datadogRum.init({
...
enableExperimentalFeatures: ["feature_flags"],
...
});
  1. 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.