JavaScript implementation of the Confidence SDK and the Confidence OpenFeature provider, to be used in conjunction wth the OpenFeature SDK.

This monorepo contains four packages:

Read more about the packages in their respective docs.

OpenFeature provides a standardized API for feature flagging that works across different providers and languages.

Set up Confidence as an OpenFeature provider in your Node.js application with the following steps:

yarn add @openfeature/server-sdk @openfeature/core @spotify-confidence/openfeature-server-provider

import { OpenFeature } from '@openfeature/server-sdk';
import { createConfidenceServerProvider } from '@spotify-confidence/openfeature-server-provider';
const provider = createConfidenceServerProvider({
  clientSecret: 'your-client-secret', // Get from Confidence console
  fetchImplementation: fetch,
  timeout: 1000,
});
OpenFeature.setProvider(provider);
const client = OpenFeature.getClient();

const isEnabled = await client.getBooleanValue('feature.enabled', false, {
  visitor_id: `<unique id per visitor>`,
});

Learn more: Server Provider Documentation

The following shows how to set up the client-side provider:

yarn add @openfeature/web-sdk @openfeature/core @spotify-confidence/openfeature-web-provider

import { OpenFeature } from '@openfeature/web-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';
const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
  fetchImplementation: window.fetch.bind(window),
  timeout: 1000,
});
OpenFeature.setContext({
  visitor_id: `<unique id per visitor>`,
});
try {
  await OpenFeature.setProviderAndWait(provider);
} (error) {
  console.error('Failed to initialize Confidence provider:', error);
}
const client = OpenFeature.getClient();
const isEnabled = client.getBooleanValue('feature.enabled', false);

Learn more: Web Provider Documentation

OpenFeature also provides a React SDK for integrating feature flags directly into React applications.

You can check out the example application, which is built with Next.js and uses the Confidence Server Provider together with OpenFeature, to see how the SDK can be applied within an application. This demo app provides a concrete example of integrating feature flags and context management.

See the example app: confidence-sdk-demos

The vanilla sdk can be used in cases where you want direct access to the Confidence SDK, including event tracking and custom context management.

Learn more: SDK Documentation

For React applications, use the dedicated React package that provides hooks and providers for seamless integration. This package is built on top of the direct SDK usage.

Learn more: React Integration Documentation

When using the Confidence SDK in web applications with Content Security Policy enabled, you'll need to configure the following CSP directives to ensure proper functionality.

The SDK makes HTTP requests to Confidence API endpoints. Add these domains to your connect-src directive:

connect-src 'self' https://*.confidence.dev

This covers:

• https://resolver.confidence.dev (global flag resolution)
• https://resolver.eu.confidence.dev (EU region flag resolution)
• https://resolver.us.confidence.dev (US region flag resolution)
• https://events.confidence.dev (global event tracking)
• https://events.eu.confidence.dev (EU region event tracking)
• https://events.us.confidence.dev (US region event tracking)

• Custom resolve URLs: If you use a custom resolveBaseUrl in your configuration, make sure to include that domain in your connect-src directive
• Web Vitals: The SDK includes optional web vitals tracking that uses the web-vitals library, but this doesn't require additional CSP permissions as it only uses browser APIs
• No inline scripts: The SDK doesn't inject any inline scripts or styles, so you don't need unsafe-inline permissions

When using the Confidence React SDK with Next.js Pages Router in development mode, you may need to apply a patch to the Next.js development server to improve error handling during server-side rendering. Run yarn patch-next-dev apply from the @spotify-confidence/react package to apply this patch, which helps prevent development server visual crash overlay when using SSR with feature flags.

Please note that this is purely a development issue and not something that affects production builds.

We'd love to get patches from you! See Contributing for details.

You can install all dependencies by running

yarn

Code is formatted using prettier, you can format all files by running

yarn format

To run the linter, run:

yarn lint

Tests are based on jest and can be run with

yarn test

Before release the sources (and types) are bundled. This process also includes generating an API report to keep track of changes to the public API. If you intend to change the public API you need to run the bundle command locally and commit the changed API report files, otherwise the commit will fail in CI. To update the API report run:

yarn bundle --local

This project adheres to the Open Source Code of Conduct. By participating, you are expected to honor this code.

Copyright 2023 Spotify AB.

Licensed under the Apache License, Version 2.0: https://www.apache.org/licenses/LICENSE-2.0