DataDog RUM

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
  • JavaScript
  • React
• Best Practices
• Coming Soon

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"],
    ...
});

2. 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 devcycleOptions = { logLevel: "debug" };
const devcycleClient = initialize("<DEVCYCLE_CLIENT_SDK_KEY>", user, devcycleOptions);
...
devcycleClient.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 devcycleOptions = { logLevel: "debug" };
const devcycleClient = initialize("<DEVCYCLE_CLIENT_SDK_KEY>", user, devcycleOptions);
...
devcycleClient.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, useDevCycleClient } from '@devcycle/react-client-sdk'
import { DVCVariable } from '@devcycle/js-client-sdk'

let didInit = false

export const useDatadogRum = () => {
  const devcycleClient = useDevCycleClient()
  if (!didInit) {
    didInit = true
    datadogRum.init({
      ...
    })
    datadogRum.startSessionReplayRecording()
    devcycleClient.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 (
    ...
  )
}

Best Practices

In our "Observability Best Practices Using DevCycle with Datadog's RUM Feature Flag Tracking" article, we explore best practices for enriching RUM data with DevCycle's variable data, giving you more granular control over data collection and event tracking based on user-specific configurations.

Coming Soon

DevCycle plans to release similar updates for both iOS and Android.

Contributing to DevCycle or creating a new Integration:

If you would like to contribute to an existing integration or tool, all of DevCycle's tools and integrations are open source on the DevCycle github repository.

Further, if you'd like to create a new tool or integration, a great starting point is DevCycle's Management API which allows you to modify and interact with features and more within a devcycle project, as well as the DevCycle Bucketing API which is used to give users features and variables (as used within the DevCycle SDKs!)