Bridging the Gap from backend to frontend with Datadog RUM | Part 2

Part 2: Implementing Feature Flag Tracking in Datadog for deeper observability

This is part 2 of a 3 part series in my attempt to learn more about frontend development through observability. If you have not read part 1, it is recommended to get started there before continuing here.

Feature Flag — Empowering Agile Development

Feature flags, also known as feature toggles or feature switches, are a pivotal tool in modern software development. They enable teams to decouple deployment from release, providing the flexibility to control features and functionalities within an application dynamically.

These flags act as conditional statements that determine whether a specific feature or piece of code should be enabled or disabled for a particular set of users or environments. Feature flags empower agile development by allowing developers to roll out new features gradually, A/B test changes, and respond swiftly to user feedback — all without the need for constant code redeployment.

Feature Flag Implementation in Tic-Tac-Toe App

Note: The implementation of Feature Flag in this demo app is purely to show case the concept of Feature Flag. In production systems, Feature Flag activation and toggles are usually decoupled from the main application.

In order to show case feature flag, a simple implementation is done on the existing Tic-Tac-Toe app (https://tictactoe-jon.tiiny.site/)

• This feature flag allows the X user to choose the symbol X or △ in the game. Toggling the button will either activate the feature flag (△ used) or deactivate the feature flag (X used). Refer to the GIF below to see a visual of the explanation.

Visual of Feature Flag on demo Tic-Tac-Toe Application

• In this example, the feature flag is a trivial use case, you could imagine many use cases for a feature flag in a production application. Below are some, just to name a few.

User Access and Permission: Feature flags enable fine-grained control over user permissions and access to specific functionalities. Organizations can limit access to certain features based on user roles or subscription tiers.

A/B Testing: Feature flags are instrumental in A/B testing, where different versions of a feature are presented to different groups of users. This allows organizations to assess user preferences and make data-driven decisions about which version performs better.

Maintenance Page: When performing maintenance or updates, you can use feature flags to gracefully handle downtime. For example, you can display a maintenance page to users while allowing internal teams to access the application for testing.

Feature Flag Tracking in Datadog

• Feature Flag Tracking is also available as part of Datadog’s RUM SDK. At the time of writing, this feature is still in BETA but already integrates with a ton of Feature Flag providers such as Amplitude, DevCycle, Flagsmith, LaunchDarkly, Split, Statsig and even custom feature flag implementation (like in this case).
• To enable feature flag tracking, simply set enableExperimentalFeatures: ["feature_flags"] as part of Datadog RUM SDK init and make use of datadogRum.addFeatureFlagEvaluation(key, value); to send feature flag information to Datadog every time a feature flag is activated.

In the code below, datadogRum.addFeatureFlagEvaluation(key, value); is added to function toggleTriangleSymbol() so that each time the function is triggered, the feature flag information will be sent to Datadog RUM.

This enables you to visualise and correlate frontend vitals and insights to your feature flags. In the case of the TicTacToe app, I am able to visualise the performance of the web app with usage of triangle symbol or no usage of triangle symbol. Again, a trivial use case here, but you get the idea.

GIF showing the feature flag correlation in Datadog RUM

Conclusion for Part 2

In Part 2, we’ve extended the Datadog RUM SDK capabilities to help track feature flag. This enriches the RUM data even further, allowing us to visualise performance of the application with and without feature flag enabled.

In Part 3, we’ll explore how Datadog is able to help your organisation achieve “shift left” with Synthetics, RUM integrated to CI/CD.