OpenFeature Provider for Web SDK

Overview

The Web OpenFeature ProviderAn OpenFeature Provider wraps the Harness FME SDK, acting as a bridge between the OpenFeature SDK and the FME SDK. It translates OpenFeature function calls into operations handled by the FME SDK, which communicates with Harness services to evaluate flags and retrieve configuration updates. allows your web applications to integrate with Harness FME using a standardized, vendor-agnostic feature flagging API. This provider implements the OpenFeature specification and bridges the OpenFeature SDK with the Harness FME Browser SDK.

This page walks you through installing, configuring, and using the Web OpenFeature provider to evaluate feature flagsA feature flag is a conditional toggle in Harness FME that enables or disables specific functionality without deploying new code. It allows for controlled feature rollouts, A/B testing, and quick rollbacks if issues arise. in your web applications.

Prerequisites

Before you begin, ensure you have the following:

• A valid Harness FME SDK key for your project
• A modern browser environment that supports ES6 modules
• Access to npm or yarn to install dependencies

Version compatibility

Component	Minimum Version
Browser SDK (@splitsoftware/splitio-browserjs)	≥ 1.0.0
@splitsoftware/openfeature-web-split-provider	≥ 1.0.0
OpenFeature Web SDK	≥ 1.0.0

Install the provider and dependencies

Install the FME OpenFeature provider and required peer dependencies:

npm install @splitsoftware/openfeature-web-split-provider
npm install @splitsoftware/splitio-browserjs
npm install @openfeature/web-sdk

Initialize the provider

Register the FME OpenFeature provider by using a SplitFactory instance.

For example:

import { OpenFeature } from '@openfeature/web-sdk';
import { SplitFactory } from '@splitsoftware/splitio-browserjs';
import { OpenFeatureSplitProvider } from '@splitsoftware/openfeature-web-split-provider';

const splitFactory = SplitFactory({
  core: {
    authorizationKey: '<YOUR_AUTH_KEY>' 
  }
});
const provider = new OpenFeatureSplitProvider(splitFactory);
OpenFeature.setProvider(provider);

Construct an evaluation context

To evaluate flags, you'll need to provide an evaluation contextThe Evaluation Context holds contextual information used during flag evaluation. It can include static data (like application or host identifiers) and dynamic data (such as a client IP address), which can be passed explicitly or propagated automatically. Static and dynamic values can be merged for richer, more targeted evaluations. with a targeting keyA unique identifier used to target specific users or entities when evaluating feature flags. It helps determine which variation of a flag should be served based on predefined rules and conditions.. The evaluation context passes targeting information such as user IDs, email addresses, or plan types for flag targeting.

For example:

const context: EvaluationContext = {
  targetingKey: '<TARGETING_KEY>',
  trafficType: 'account'
};
OpenFeature.setContext(context)

Evaluate with details

Use the get*Details(...) APIs to get flag values and metadata (such as variant, reason, error code, and configuration). The FME treatment configuration is returned as a raw JSON string under flagMetadata["config"].

For example:

const booleanTreatment = client.getBooleanDetails('boolFlag', false);
const config = booleanTreatment.flagMetadata.config;

Evaluate with attributes

To include user or session attributes in flag evaluations, define them in the evaluation context before calling the evaluation methods.

For example:

const context = {
  targetingKey: '<TARGETING_KEY>',
  trafficType: 'account',
  plan: 'premium',
  coupon: 'WELCOME10'
};

OpenFeature.setContext(context);
const booleanTreatment = client.getBooleanDetails('boolFlag', false);

Track events

The FME OpenFeature provider supports tracking user actions or conversion eventsEvents allow your application to respond to changes in provider state or flag configuration, such as readiness changes, errors, or updates to flag values. directly from your web application.

To enable event tracking, your evaluation context must include the following:

• A non-empty targetingKey
• A trafficType (for example, "user" or "account")
• A non-blank event name

Optionally, you can include a numeric value (defaults to 0) and additional event properties (prefers primitives such as string, number, boolean, or null). For more information, see Sending Events.

For example:

const context = { targetingKey: 'user-123', trafficType: 'account' }
const details = { value: 19.99, properties: { plan: 'pro', coupon: 'WELCOME10' }}

client.setEvaluationContext(context)
client.track('checkout.completed', details)

For more information, see the Harness FME Web OpenFeature Provider GitHub repository.