Skip to main content

OpenFeature Provider for Web SDK

Integrate your web applications with Harness FME using 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., 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​

ComponentMinimum 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 Harness 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 Harness 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_CLIENT_SIDE_SDK_KEY>' 
    key: '<TARGETING_KEY>'
  }
});
const provider = new OpenFeatureSplitProvider(splitFactory);

// Wait for the default SDK client for '<TARGETING_KEY>' to be ready
await OpenFeature.setProviderAndWait(provider);

Construct an evaluation context​

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. to evaluate flags. 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'
};
await 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'
};

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

Track events​

The Harness 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' }}

await client.setContext(context)
client.track('checkout.completed', details)

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