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
  • JavaScript
  • React
• 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 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.