OpenFeature Provider for Web SDK

Overview

The Web OpenFeature ProviderProviders act as a bridge between the Evaluation API and the underlying flag management system. They translate API calls into the format required by the provider, which could be a vendor SDK, a custom REST API, or a local data source. 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

Use 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 pass attributes used for flag targeting. You can include identifiers such as user IDs, email addresses, or plan types.

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 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.