@openfeature/web-sdk

OpenFeature Web SDK

OpenFeature is an open specification that provides a vendor-agnostic, community-driven API for feature flagging that works with your favorite feature flag management tool or in-house solution.

🚀 Quick start

Requirements

• ES2015-compatible web browser (Chrome, Edge, Firefox, etc)

Install

npm

npm install --save @openfeature/web-sdk

[!TIP] This SDK is designed to run in the browser. If you're interested in server support, check out the Node.js SDK.

yarn

# yarn requires manual installation of the @openfeature/core peer-dependency
yarn add @openfeature/web-sdk @openfeature/core

[!NOTE] @openfeature/core contains common components used by all OpenFeature JavaScript implementations. Every SDK version has a requirement on a single, specific version of this dependency. For more information, and similar implications on libraries developed with OpenFeature see considerations when extending.

Usage

import { OpenFeature } from '@openfeature/web-sdk';

// Register your feature flag provider
await OpenFeature.setProviderAndWait(new YourProviderOfChoice());

// create a new client
const client = OpenFeature.getClient();

// Evaluate your feature flag
const v2Enabled = client.getBooleanValue('v2_enabled', false);

if (v2Enabled) {
  console.log("v2 is enabled");
}

API Reference

See here for the complete API documentation.

🌟 Features

Status	Features	Description
✅	Providers	Integrate with a commercial, open source, or in-house feature management tool.
✅	Targeting	Contextually-aware flag evaluation using evaluation context.
✅	Hooks	Add functionality to various stages of the flag evaluation life-cycle.
✅	Logging	Integrate with popular logging packages.
✅	Domains	Logically bind clients with providers.
✅	Eventing	React to state changes in the provider or flag management system.
✅	Tracking	Associate user actions with feature flag evaluations, particularly for A/B testing.
✅	Shutdown	Gracefully clean up a provider during application shutdown.
✅	Extending	Extend OpenFeature with custom providers and hooks.

_{Implemented: ✅ | In-progress: ⚠️ | Not implemented yet: ❌}

Providers

Providers are an abstraction between a flag management system and the OpenFeature SDK. Look here for a complete list of available providers. If the provider you're looking for hasn't been created yet, see the develop a provider section to learn how to build it yourself.

Once you've added a provider as a dependency, it can be registered with OpenFeature like this:

Awaitable

To register a provider and ensure it is ready before further actions are taken, you can use the setProviderAndWait method as shown below:

await OpenFeature.setProviderAndWait(new MyProvider());

Synchronous

To register a provider in a synchronous manner, you can use the setProvider method as shown below:

OpenFeature.setProvider(new MyProvider());

Once the provider has been registered, the status can be tracked using events.

In some situations, it may be beneficial to register multiple providers in the same application. This is possible using domains, which is covered in more detail below.

Flag evaluation flow

When a new provider is added to OpenFeature client the following process happens:

sequenceDiagram
    autonumber
    Client-->+Feature Flag Provider: ResolveAll (context)
    Feature Flag Provider-->-Client: Flags values

In (1) the Client sends a request to the provider backend in order to get all values from all feature flags that it has. Once the provider backend replies (2) the client holds all flag values and therefore the flag evaluation process is synchronous.

In order to prevent flag evaluations from defaulting while the provider is initializing, it is highly recommended to evaluate flags only after the provider is ready. This can be done using the setProviderAndWait method or using the setProvider method and listening for the READY event.

Targeting and Context

Sometimes, the value of a flag must consider some dynamic criteria about the application or user, such as the user's location, IP, email address, or the server's location. In OpenFeature, we refer to this as targeting. If the flag management system you're using supports targeting, you can provide the input data using the evaluation context.

// Sets global context during provider registration
await OpenFeature.setProvider(new MyProvider(), { origin: document.location.host });

Change context after the provider has been registered using setContext.

// Set a value to the global context
await OpenFeature.setContext({ targetingKey: localStorage.getItem("targetingKey") });

Context is global and setting it is async. Providers may implement an onContextChanged method that receives the old and newer contexts. Given a context change, providers can use this method internally to detect if the flag values cached on the client are still valid. If needed, a request will be made to the provider with the new context in order to get the correct flag values.

Hooks

Hooks allow for custom logic to be added at well-defined points of the flag evaluation life-cycle. Look here for a complete list of available hooks. If the hook you're looking for hasn't been created yet, see the develop a hook section to learn how to build it yourself.

Once you've added a hook as a dependency, it can be registered at the global, client, or flag invocation level.

import { OpenFeature } from "@openfeature/web-sdk";

// add a hook globally, to run on all evaluations
OpenFeature.addHooks(new ExampleGlobalHook());

// add a hook on this client, to run on all evaluations made by this client
const client = OpenFeature.getClient();
client.addHooks(new ExampleClientHook());

// add a hook for this evaluation only
const boolValue = client.getBooleanValue("bool-flag", false, { hooks: [new ExampleHook()]});

Logging

The Web SDK will log warnings and errors to the console by default. This behavior can be overridden by passing a custom logger either globally or per client. A custom logger must implement the Logger interface.

import type { Logger } from "@openfeature/web-sdk";

// The logger can be anything that conforms with the Logger interface
const logger: Logger = console;

// Sets a global logger
OpenFeature.setLogger(logger);

// Sets a client logger
const client = OpenFeature.getClient();
client.setLogger(logger);

Domains

Clients can be assigned to a domain. A domain is a logical identifier which can be used to associate clients with a particular provider. If a domain has no associated provider, the default provider is used.

import { OpenFeature, InMemoryProvider } from "@openfeature/web-sdk";

// Registering the default provider
OpenFeature.setProvider(InMemoryProvider(myFlags));
// Registering a provider to a domain
OpenFeature.setProvider("my-domain", new InMemoryProvider(someOtherFlags));

// A Client bound to the default provider
const clientWithDefault = OpenFeature.getClient();
// A Client bound to the InMemoryProvider provider
const domainScopedClient = OpenFeature.getClient("my-domain");

Domains can be defined on a provider during registration. For more details, please refer to the providers section.

Manage evaluation context for domains

By default, domain-scoped clients use the global context. This can be overridden by explicitly setting context when registering the provider or by referencing the domain when updating context:

OpenFeature.setProvider("my-domain", new NewCachedProvider(), { targetingKey: localStorage.getItem("targetingKey") });

To change context after the provider has been registered, use setContext with a domain:

await OpenFeature.setContext("my-domain", { targetingKey: localStorage.getItem("targetingKey") })

Once a domain's context has been defined, it will override the global context for all clients bound to the domain. Context can be cleared for a domain by calling OpenFeature.clearContext("my-domain") or OpenFeature.clearContexts() to reset all context.

Eventing

Events allow you to react to state changes in the provider or underlying flag management system, such as flag definition changes, provider readiness, or error conditions. Initialization events (PROVIDER_READY on success, PROVIDER_ERROR on failure) are dispatched for every provider. Some providers support additional events, such as PROVIDER_CONFIGURATION_CHANGED.

Please refer to the documentation of the provider you're using to see what events are supported.

import { OpenFeature, ProviderEvents } from '@openfeature/web-sdk';

// OpenFeature API
OpenFeature.addHandler(ProviderEvents.Ready, (eventDetails) => {
  console.log(`Ready event from: ${eventDetails?.providerName}:`, eventDetails);
});

// Specific client
const client = OpenFeature.getClient();
client.addHandler(ProviderEvents.Error, (eventDetails) => {
  console.log(`Error event from: ${eventDetails?.providerName}:`, eventDetails);
});

Tracking

The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations. This is essential for robust experimentation powered by feature flags. For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a hook or provider can be associated with telemetry reported in the client's track function.

// flag is evaluated
client.getBooleanValue('new-feature', false);

// new feature is used and track function is called recording the usage
useNewFeature();
client.track('new-feature-used');

Shutdown

The OpenFeature API provides a close function to perform a cleanup of all registered providers. This should only be called when your application is in the process of shutting down.

import { OpenFeature } from '@openfeature/web-sdk';

await OpenFeature.close()

Extending

Develop a provider

To develop a provider, you need to create a new project and include the OpenFeature SDK as a dependency. This can be a new repository or included in the existing contrib repository available under the OpenFeature organization. You’ll then need to write the provider by implementing the Provider interface exported by the OpenFeature SDK.

import {
  AnyProviderEvent,
  EvaluationContext,
  Hook,
  JsonValue,
  Logger,
  Provider,
  ProviderEventEmitter,
  ResolutionDetails
} from '@openfeature/web-sdk';

// implement the provider interface
class MyProvider implements Provider {
  // Adds runtime validation that the provider is used with the expected SDK
  public readonly runsOn = 'client';
  readonly metadata = {
    name: 'My Provider',
  } as const;
  // Optional provider managed hooks
  hooks?: Hook[];
  resolveBooleanEvaluation(flagKey: string, defaultValue: boolean, context: EvaluationContext, logger: Logger): ResolutionDetails<boolean> {
    // code to evaluate a boolean
  }
  resolveStringEvaluation(flagKey: string, defaultValue: string, context: EvaluationContext, logger: Logger): ResolutionDetails<string> {
    // code to evaluate a string
  }
  resolveNumberEvaluation(flagKey: string, defaultValue: number, context: EvaluationContext, logger: Logger): ResolutionDetails<number> {
    // code to evaluate a number
  }
  resolveObjectEvaluation<T extends JsonValue>(flagKey: string, defaultValue: T, context: EvaluationContext, logger: Logger): ResolutionDetails<T> {
    // code to evaluate an object
  }

  onContextChange?(oldContext: EvaluationContext, newContext: EvaluationContext): Promise<void> {
    // reconcile the provider's cached flags, if applicable
  }

  // implement with "new OpenFeatureEventEmitter()", and use "emit()" to emit events
  events?: ProviderEventEmitter<AnyProviderEvent> | undefined;

  initialize?(context?: EvaluationContext | undefined): Promise<void> {
    // code to initialize your provider
  }
  onClose?(): Promise<void> {
    // code to shut down your provider
  }
}

Built a new provider? Let us know so we can add it to the docs!

Develop a hook

To develop a hook, you need to create a new project and include the OpenFeature SDK as a dependency. This can be a new repository or included in the existing contrib repository available under the OpenFeature organization. Implement your own hook by conforming to the Hook interface.

import type { Hook, HookContext, EvaluationDetails, FlagValue } from "@openfeature/web-sdk";

export class MyHook implements Hook {
  after(hookContext: HookContext, evaluationDetails: EvaluationDetails<FlagValue>) {
    // code that runs after flag values are successfully resolved from the provider
  }
}

Built a new hook? Let us know so we can add it to the docs!

Considerations

When developing a library based on OpenFeature components, it's important to list the @openfeature/web-sdk as a peerDependency of your package. This is a general best-practice when developing JavaScript libraries that have dependencies in common with their consuming application. Failing to do this can result in multiple copies of the OpenFeature SDK in the consumer, which can lead to type errors, and broken singleton behavior. The @openfeature/core package itself follows this pattern: the @openfeature/web-sdk has a peer dependency on @openfeature/core, and uses whatever copy of that module the consumer has installed (note that NPM installs peers automatically unless --legacy-peer-deps is set, while yarn does not, and PNPM does so based on its configuration). When developing such libraries, it's NOT necessary to add a peerDependency on @openfeature/core, since the @openfeature/web-sdk establishes that dependency itself transitively.