JavaScript Confidence SDK Monorepo

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

Overview

This monorepo contains four packages:

Package	Description
openfeature-server-provider	OpenFeature provider for server-side environments
openfeature-web-provider	OpenFeature provider for client-side web applications
sdk	Core Confidence SDK for flag resolution, context, and tracking
react	React hooks and providers for client-side applications

Read more about the packages in their respective docs.

---

Usage with OpenFeature

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

Server Applications (Node.js)

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

1. Install Dependencies

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

2. Initialize and Set the 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();

3. Fetch a Flag

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

Learn more: Server Provider Documentation

Web Applications (Client-Side)

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 React SDK

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

Example Application

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

---

Direct SDK Usage

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

React Integration

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

---

Content Security Policy (CSP)

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.

Required CSP Directives

connect-src

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)

Additional Considerations

• 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

Next.js Pages Router Development Patch

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.

Contributions and Development

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

Setup

You can install all dependencies by running

yarn

Formatting

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

yarn format

Linting

To run the linter, run:

yarn lint

Testing

Tests are based on jest and can be run with

yarn test

Bundling and API reports

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

Code of Conduct

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

License

Copyright 2023 Spotify AB.

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