Confidence JavaScript SDK

https://github.com/spotify/confidence-sdk-js
Admin
JavaScript implementation of the Spotify Confidence SDK, providing feature flag resolution, context...
Tokens:14,566
Snippets:178
Trust Score:9.7
License:Apache-2.0
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Dependencies with Yarn

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Run this command to install all project dependencies. Ensure you have Yarn installed.

```sh
yarn
```

--------------------------------

### Start the development server

Source: https://github.com/spotify/confidence-sdk-js/blob/main/examples/react19/README.md

Run this command to launch the Vite development server for the application.

```sh
yarn dev
```

--------------------------------

### Install Web Dependencies

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Install the required OpenFeature and Confidence web provider packages.

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

--------------------------------

### Install Server-Side Dependencies

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Install the required OpenFeature and Confidence server provider packages.

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

--------------------------------

### Install Confidence SDK dependencies

Source: https://github.com/spotify/confidence-sdk-js/blob/main/examples/react19/README.md

Run this command to install the necessary packages from the monorepo.

```sh
yarn install
```

--------------------------------

### Install Confidence OpenFeature dependencies

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-server-provider/README.md

Run this command to add the required OpenFeature and Confidence SDK packages to your project.

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

--------------------------------

### Install Confidence React SDK

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Add the Confidence React SDK package to your project dependencies using yarn.

```sh
yarn add @spotify-confidence/react
```

--------------------------------

### Install Confidence SDK dependencies

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Add the Confidence SDK package to your project dependencies using yarn.

```sh
yarn add @spotify-confidence/sdk
```

--------------------------------

### Server and Client Component Setup with ConfidenceProvider

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Set up the ConfidenceProvider in your layout to enable feature flagging for both server and client components. Ensure efficient server-side caching with React.cache. The SDK handles synchronization from server to client.

```tsx
// app/layout.tsx
import { ConfidenceProvider } from '@spotify-confidence/react/server';
import { getConfidence } from '../confidence';
import { ClientComponent } from 'components/ClientComponent';
import { ServerComponent } from 'components/ServerComponent';

export default async function Layout() {
  const confidence = await getConfidence();

  return (
    <div>
      <ConfidenceProvider confidence={confidence}>
        <Suspense fallback={<h1>Loading...</h1>}>
          <ClientComponent>
            <ServerComponent>
              <ClientComponent />
            </ServerComponent>
          </ClientComponent>
        </Suspense>
      </ConfidenceProvider>
    </div>
  );
}
```

--------------------------------

### Add Dependencies with Yarn

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-web-provider/README.md

Install the necessary packages for the Confidence OpenFeature web provider and the OpenFeature Web SDK using Yarn.

```sh
yarn add @openfeature/web-sdk @spotify-confidence/openfeature-web-provider
```

--------------------------------

### Create Confidence Instance and Get Flag (Cached)

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Creates a Confidence instance and retrieves a flag. Subsequent calls with the same context and flag name will use the in-memory cache to reduce network calls.

```typescript
const confidence = Confidence.create({...});
const flag = confidence.getFlag('flag', {})
```

--------------------------------

### Set and Get Context

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Manage the context for flag evaluations. Use `setContext` to update the context and `getContext` to retrieve it.

```typescript
confidence.setContext({
    visitor_id: "user-123",
    targeting_key: "user-123",
});
const currentContext = confidence.getContext();
```

--------------------------------

### Automatic Re-rendering on Context Change

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Hooks automatically re-render components when the Confidence context changes, eliminating the need for manual updates. Example shows switching context to 'premium'.

```tsx
function MyComponent() {
  const confidence = useConfidence();
  const theme = useFlag('app.theme', 'light');

  return <button onClick={() => confidence.setContext({ user_type: 'premium' })}>Switch to Premium</button>;
}
```

--------------------------------

### Get Flag Value Asynchronously

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Asynchronously fetch the value of a flag. Provides a default value if the flag is not available. Use this for non-critical flag fetches.

```typescript
const flagValue = await confidence.getFlag("some-flag", "default-value");
console.log(flagValue);
```

--------------------------------

### Initialize the Confidence SDK

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Create a root instance of Confidence using your client secret and configuration options.

```ts
import { Confidence } from '@spotify-confidence/sdk';

const confidence = Confidence.create({
  clientSecret: 'my secret',
  region: 'eu', // or 'us'
  environment: 'client', // or 'backend'
  timeout: 1000,
});
```

--------------------------------

### Initialize provider and evaluate flags

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-server-provider/README.md

Configure the provider with your client secret and use the OpenFeature client to resolve flag values.

```ts
import { createConfidenceServerProvider } from '@spotify-confidence/openfeature-server-provider';
import { OpenFeature } from '@openfeature/server-sdk';

const provider = createConfidenceServerProvider({
  clientSecret: 'your-client-secret',
  fetchImplementation: fetch,
  timeout: 1000,
});

OpenFeature.setProvider(provider);

const client = OpenFeature.getClient();

client
  .getBooleanValue('flagName.bool', false, {
    targetingKey: `your targeting key`,
  })
  .then(result => {
    console.log('result:', result);
  });
```

--------------------------------

### Initialize ConfidenceProvider for Client-Side Rendering

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Initialize the Confidence SDK and wrap your application's component tree with ConfidenceProvider. Ensure to use 'client' as the environment for client-side rendering.

```tsx
import { Confidence } from '@spotify-confidence/sdk/';
import { ConfidenceProvider } from '@spotify-confidence/react';

// Client-side initialization
const confidence = Confidence.create({
  clientSecret: 'mysecret',
  region: 'eu',
  environment: 'client', // Note: For client-side rendering
  timeout: 1000,
});

function App() {
  return (
    <ConfidenceProvider confidence={confidence}>
      <React.Suspense fallback={<p>Loading... </p>}>
        <MyComponent />
      </React.Suspense>
    </ConfidenceProvider>
  );
}
```

--------------------------------

### Run Tests

Source: https://github.com/spotify/confidence-sdk-js/blob/main/CONTRIBUTING.md

Execute all project tests using this command.

```bash
yarn test
```

--------------------------------

### Initialize Confidence Server Provider

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Configure the OpenFeature provider for Node.js environments using your client secret.

```ts
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();
```

--------------------------------

### Confidence SDK Initialization

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Initialize the Confidence SDK with essential configuration options. Requires a client secret and specifies the environment.

```typescript
import { Confidence } from "@spotify-confidence/sdk";

const confidence = Confidence.create({
    clientSecret: "YOUR_CLIENT_SECRET",
    environment: "client",
    timeout: 5000,
});
```

--------------------------------

### Initialize Confidence Web Provider

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Configure the OpenFeature provider for client-side web applications and wait for initialization.

```ts
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);
} catch (error) {
  console.error('Failed to initialize Confidence provider:', error);
}

const client = OpenFeature.getClient();
const isEnabled = client.getBooleanValue('feature.enabled', false);
```

--------------------------------

### Configure Confidence Server Provider

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Initializes the OpenFeature server provider for dynamic flag resolution in Node.js environments.

```typescript
import { OpenFeature } from '@openfeature/server-sdk';
import { createConfidenceServerProvider } from '@spotify-confidence/openfeature-server-provider';

// Create and configure the Confidence server provider
const provider = createConfidenceServerProvider({
  clientSecret: 'your-client-secret', // Get from Confidence console
  fetchImplementation: fetch,
  timeout: 1000,
  region: 'eu', // Optional: 'eu', 'us', or omit for global
});

// Register the provider with OpenFeature
OpenFeature.setProvider(provider);

// Get a client instance
const client = OpenFeature.getClient();

// Evaluate flags with context per-request
async function handleRequest(userId: string) {
  const isEnabled = await client.getBooleanValue('feature.enabled', false, {
    targetingKey: userId,
  });

  const buttonColor = await client.getStringValue('ui.button-color', 'blue', {
    targetingKey: userId,
    plan: 'premium',
  });

  console.log(`Feature enabled: ${isEnabled}, Button color: ${buttonColor}`);
}

handleRequest('user-123');
// Output: Feature enabled: true, Button color: green
```

--------------------------------

### Bundle and Generate API Report

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Run this command locally to bundle sources, generate types, and update the API report. This is necessary before release and if the public API changes.

```sh
yarn bundle --local
```

--------------------------------

### Server ConfidenceProvider for Combined Rendering

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Use the server ConfidenceProvider in your root layout to initialize flag state on the server and transfer it to the client for seamless rendering.

```tsx
// app/layout.tsx - Root layout with server provider
import { ConfidenceProvider } from '@spotify-confidence/react/server';
import { getConfidence } from './confidence';
import { Suspense } from 'react';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const confidence = await getConfidence();

  return (
    <html>
      <body>
        <ConfidenceProvider confidence={confidence}>
          <Suspense fallback={<div>Loading...</div>}>
            {children}
          </Suspense>
        </ConfidenceProvider>
      </body>
    </html>
  );
}
```

```tsx
// app/page.tsx - Page with mixed components
import { ServerFeature } from './components/ServerFeature';
import { ClientFeature } from './components/ClientFeature';

export default function Page() {
  return (
    <main>
      <ServerFeature />
      <ClientFeature />
    </main>
  );
}
```

--------------------------------

### Initialize Core Confidence SDK

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Initializes the core SDK for direct flag resolution and event tracking without OpenFeature dependencies.

```typescript
import { Confidence } from '@spotify-confidence/sdk';

// Create a Confidence instance for client-side usage
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  region: 'eu', // 'eu', 'us', or omit for global
  environment: 'client', // 'client' for browser, 'backend' for server
  timeout: 1000,
  logger: {
    warn: (message) => console.warn('Confidence:', message),
    error: (message) => console.error('Confidence:', message),
  },
});

// For server-side usage
const serverConfidence = Confidence.create({
  clientSecret: process.env.CONFIDENCE_CLIENT_SECRET!,
  region: 'us',
  environment: 'backend',
  timeout: 1000,
  logger: console,
});

console.log('Confidence initialized for environment:', confidence.environment);
// Output: Confidence initialized for environment: client
```

--------------------------------

### Configure connect-src for Confidence SDK

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Add these domains to your `connect-src` directive to allow the SDK to make HTTP requests to Confidence API endpoints. This is required for flag resolution and event tracking.

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

--------------------------------

### Run Linter

Source: https://github.com/spotify/confidence-sdk-js/blob/main/CONTRIBUTING.md

Execute the linter to identify potential code quality issues and style violations.

```bash
yarn lint
```

--------------------------------

### Check Code Style

Source: https://github.com/spotify/confidence-sdk-js/blob/main/CONTRIBUTING.md

Run this command to check if your code adheres to the project's formatting and linting rules defined by prettier and eslint.

```bash
yarn format:check
```

--------------------------------

### Configure React Provider and Hooks

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Wraps applications with ConfidenceProvider and utilizes hooks for flag evaluation and context management.

```tsx
import React, { Suspense } from 'react';
import { Confidence } from '@spotify-confidence/sdk';
import { ConfidenceProvider, useConfidence, useFlag, useEvaluateFlag } from '@spotify-confidence/react';

// Create Confidence instance
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'client',
  region: 'eu',
  timeout: 1000,
});

// App component with provider
function App() {
  return (
    <ConfidenceProvider confidence={confidence}>
      <Suspense fallback={<div>Loading flags...</div>}>
        <FeaturePage />
      </Suspense>
    </ConfidenceProvider>
  );
}

// Component using flag hooks
function FeaturePage() {
  // Simple flag value access
  const showNewDesign = useFlag('redesign.enabled', false);
  const headerColor = useFlag('redesign.header-color', 'blue');

  // Detailed evaluation with metadata
  const { value: maxItems, reason, variant } = useEvaluateFlag('cart.max-items', 10);

  // Access Confidence instance for context updates
  const confidence = useConfidence();

  const handleLogin = (userId: string) => {
    confidence.setContext({ targeting_key: userId });
    confidence.track('user-logged-in');
  };

  return (
    <div style={{ backgroundColor: showNewDesign ? headerColor : 'white' }}>
      <h1>Feature Page</h1>
      <p>Max cart items: {maxItems} (reason: {reason}, variant: {variant})</p>
      <button onClick={() => handleLogin('user-123')}>Login</button>
    </div>
  );
}

export default App;
```

--------------------------------

### Initialize and Use Confidence Provider

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-web-provider/README.md

Initialize the Confidence provider, set the evaluation context, and resolve a boolean flag. The provider initialization involves a network request, and success emits ProviderEvents.Ready, while failure emits ProviderEvent.Error.

```ts
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';
import { OpenFeature } from '@openfeature/web-sdk';

const provider = createConfidenceWebProvider({
  clientSecret: 'mysecret',
  fetchImplementation: window.fetch.bind(window),
  timeout: 1000,
});

OpenFeature.setContext({
  targetingKey: 'myTargetingKey',
});

try {
  await OpenFeature.setProviderAndWait(provider);
} (error) {
  console.error('Failed to initialize Confidence provider:', error);
}

const client = OpenFeature.getClient();
const result = client.getBooleanValue('flagName.my-boolean', false);
```

--------------------------------

### Configure Confidence Web Provider

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Sets up the OpenFeature web provider for static, pre-fetched flag access in browser applications.

```typescript
import { OpenFeature } from '@openfeature/web-sdk';
import { createConfidenceWebProvider } from '@spotify-confidence/openfeature-web-provider';

// Create the web provider
const provider = createConfidenceWebProvider({
  clientSecret: 'your-client-secret',
  fetchImplementation: window.fetch.bind(window),
  timeout: 1000,
  region: 'eu',
  apply: 'access', // 'access' (default) or 'backend'
});

// Set the evaluation context before initializing
OpenFeature.setContext({
  targetingKey: 'user-abc-123',
  subscription: 'premium',
});

// Initialize provider and wait for flags to be ready
async function initializeFlags() {
  try {
    await OpenFeature.setProviderAndWait(provider);
    console.log('Confidence provider ready');

    const client = OpenFeature.getClient();

    // Synchronous flag access after initialization
    const showBanner = client.getBooleanValue('homepage.show-banner', false);
    const bannerText = client.getStringValue('homepage.banner-text', 'Welcome!');
    const maxItems = client.getNumberValue('cart.max-items', 10);

    console.log(`Show banner: ${showBanner}, Text: ${bannerText}, Max items: ${maxItems}`);
  } catch (error) {
    console.error('Failed to initialize Confidence provider:', error);
  }
}

initializeFlags();
// Output: Confidence provider ready
// Output: Show banner: true, Text: Special Offer!, Max items: 25
```

--------------------------------

### Configure Confidence Provider Apply Strategy

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-web-provider/README.md

Set the apply strategy for the Confidence provider. Defaults to 'access' with a 250ms timeout. Can be set to 'backend' to use Backend Apply.

```ts
const provider = createConfidenceWebProvider({
    ...,
    apply: 'backend'
});
```

--------------------------------

### Configure Confidence SDK for Server-Side

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Initializes the Confidence instance with React.cache for server-side scoping and provides a helper function to retrieve a context-aware client.

```ts
// app/confidence.ts (Server-side configuration)
import { Confidence } from '@spotify-confidence/sdk';
import { cookies } from 'next/headers';

import React from 'react';

const confidence = Confidence.create({
  clientSecret: process.env.CONFIDENCE_CLIENT_SECRET!,
  environment: 'backend',
  timeout: 1000,
  logger: console,
  cache: {
    scope: React.cache, // Use React.cache for server-side caching
  },
});

export async function getConfidence() {
  const cookieStore = await cookies();
  const targeting_key = cookieStore.get('visitorId')?.value; // a unique targeting value of your choice

  return confidence.withContext({ targeting_key });
}
```

--------------------------------

### Context and Cache Interfaces

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Interfaces for managing context and cache options.

```APIDOC
## Context and Cache Interfaces

### `Context` Interface

#### Description
Represents the context for flag evaluations, including user attributes and page information.

#### Properties

- **`targeting_key?: string`** - Optional - The key used for targeting rules.
- **`visitor_id?: string`** - Optional - The unique identifier for the visitor.
- **`page?: { path: string; referrer: string; search: string; title: string; url: string; }`** - Optional - Information about the current page.

### `CacheOptions` Interface

#### Description
Options for configuring the SDK's cache.

#### Properties

- **`entries?: AsyncIterable<CacheEntry>`** - Optional - An asynchronous iterable of cache entries.
- **`scope?: CacheScope`** - Optional - Defines the scope of the cache.
```

--------------------------------

### Configuration Interfaces

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Interfaces related to configuring the Confidence SDK.

```APIDOC
## Configuration Interfaces

### `ConfidenceOptions` Interface

#### Description
Options used to configure the `Confidence` SDK instance.

#### Properties

- **`clientSecret: string`** - Required - The client secret for authentication.
- **`environment: 'client' | 'backend'`** - Required - The environment where the SDK is running.
- **`timeout: number`** - Required - The timeout for network requests.
- **`region?: 'eu' | 'us'`** - Optional - The region for the service endpoint.
- **`applyBaseUrl?: string`** - Optional - Base URL for apply requests.
- **`applyDebounce?: number`** - Optional - Debounce time for apply requests.
- **`cache?: CacheOptions`** - Optional - Cache configuration.
- **`context?: Context`** - Optional - Initial context to set.
- **`disableTelemetry?: boolean`** - Optional - Disable telemetry reporting.
- **`fetchImplementation?: SimpleFetch`** - Optional - Custom fetch implementation.
- **`library?: 'openfeature' | 'react'`** - Optional - Specifies the library integration.
- **`logger?: Logger`** - Optional - Custom logger instance.
- **`resolveBaseUrl?: string`** - Optional - Base URL for resolve requests.
- **`waitUntil?: WaitUntil`** - Optional - Function to control when the SDK is ready.

### `Configuration` Interface

#### Description
Internal configuration object used by the SDK.

#### Properties

- **`cacheProvider: CacheProvider`** - The configured cache provider.
- **`clientSecret: string`** - The client secret.
- **`emitEvaluationTrace: (trace: EvaluationTrace) => void`** - Internal function to emit evaluation traces.
- **`eventSenderEngine: EventSenderEngine`** - The event sender engine.
- **`flagResolverClient: FlagResolverClient`** - The client for resolving flags.
- **`logger: Logger`** - The logger instance.
- **`staleFlagTraceConsumer: TraceConsumer`** - Consumer for stale flag traces.
```

--------------------------------

### Evaluate Flags in Server Components

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Demonstrates direct flag evaluation within an asynchronous server component using the configured helper.

```tsx
// app/components/ServerComponent.tsx
import { getConfidence } from '../confidence';

export const ServerComponent = async () => {
  const confidence = await getConfidence();

  // Direct flag evaluation in server components
  const color = await confidence.getFlag('my-feature-flag.color', 'blue');

  return <div style={{ color }}>Server rendered content</div>;
};
```

--------------------------------

### Helper Types

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Common types and interfaces used within the SDK.

```APIDOC
## Helper Types

### `Closer` Type

#### Description
A function type that represents an operation to be closed or cleaned up.

### `Closer.combine(...closers: Closer[]): Closer`

#### Description
Combines multiple `Closer` functions into a single `Closer` function.

### `CacheScope` Type

#### Description
A type alias for a function that takes a `CacheProvider` and returns a `CacheProvider`, used for defining cache scopes.
```

--------------------------------

### Manage Context with Confidence SDK

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Use setContext to update global state or withContext to create isolated child instances for request-specific targeting.

```typescript
import { Confidence } from '@spotify-confidence/sdk';

const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'backend',
  timeout: 1000,
});

// Set context on the current instance (mutates state)
confidence.setContext({ app_version: '2.1.0' });

// Create child instances with additional context (recommended for servers)
function handleUserRequest(userId: string, planType: string) {
  // Creates isolated context per request - won't leak to other requests
  const requestConfidence = confidence.withContext({
    targeting_key: userId,
    plan: planType,
    request_time: new Date().toISOString(),
  });

  // Get merged context
  const ctx = requestConfidence.getContext();
  console.log('Request context:', ctx);
  // Output: { app_version: '2.1.0', targeting_key: 'user-123', plan: 'premium', request_time: '2024-...' }

  return requestConfidence;
}

// Clear context to reset
const userConfidence = handleUserRequest('user-123', 'premium');
userConfidence.clearContext();
console.log('After clear:', userConfidence.getContext());
// Output: After clear: { app_version: '2.1.0' } (inherits from parent)
```

--------------------------------

### Pass Flag Values to Client Components

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Shows how to fetch a flag value on the server and pass it as a prop to a client-side component.

```tsx
// app/components/ClientComponent.tsx
'use client';

type ClientComponentProps = {
  color: string;
};

export default function ClientComponent({ color }: ClientComponentProps) {
  return <div style={{ color }}>Client rendered content</div>;
}
```

```tsx
// app/components/ServerComponent.tsx
import { getConfidence } from '../confidence';
import ClientComponent from './ClientComponent';

export default async function ServerComponent() {
  const confidence = await getConfidence();

  // Fetch the flag value server-side with user context
  const color = await confidence.getFlag('my-feature-flag.color', 'blue');

  // Pass the flag value as a prop to the client component
  return <ClientComponent color={color} />;
}
```

--------------------------------

### Format Code

Source: https://github.com/spotify/confidence-sdk-js/blob/main/CONTRIBUTING.md

Automatically format your code to fix issues detected by prettier.

```bash
yarn format
```

--------------------------------

### Client-Side Feature Component with Confidence Hooks

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Implement interactive client components using `useConfidence` and `useFlag` hooks. Context changes trigger re-fetches, and events can be tracked.

```tsx
'use client';

import { useConfidence, useFlag } from '@spotify-confidence/react';

export function ClientFeature() {
  const confidence = useConfidence();
  const theme = useFlag('app.theme', 'light');

  const handleThemeChange = () => {
    // Update context triggers re-fetch on client
    confidence.setContext({
      preferred_theme: theme === 'light' ? 'dark' : 'light'
    });
  };

  return (
    <div className={`theme-${theme}`}>
      <button onClick={handleThemeChange}>
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>
      <button onClick={() => confidence.track('theme-toggled', { new_theme: theme })}>
        Track Theme Change
      </button>
    </div>
  );
}
```

--------------------------------

### Run Commit Lint

Source: https://github.com/spotify/confidence-sdk-js/blob/main/CONTRIBUTING.md

Use this command to ensure your commit messages adhere to the conventional commits standard, which is enforced by commitlint.

```bash
yarn cm
```

--------------------------------

### Confidence Configuration Interface

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Defines the configuration options for the Confidence SDK, including client secret, environment, and timeouts.

```typescript
interface ConfidenceOptions {
    applyBaseUrl?: string;
    applyDebounce?: number;
    cache?: CacheOptions;
    clientSecret: string;
    context?: Context;
    disableTelemetry?: boolean;
    environment: 'client' | 'backend';
    fetchImplementation?: SimpleFetch;
    library?: 'openfeature' | 'react';
    logger?: Logger;
    region?: 'eu' | 'us';
    resolveBaseUrl?: string;
    timeout: number;
    waitUntil?: WaitUntil;
}
```

--------------------------------

### Configure a custom logger

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Implement a custom logger interface to capture SDK logs during integration or debugging.

```ts
import { Confidence } from '@spotify-confidence/sdk';

const myLogger = {
  warn: message => {
    console.log('Confidence warning: ', message);
  },
  error: message => {
    console.log('Confidence error: ', message);
  },
};

const confidence = Confidence.create({
  clientSecret: 'mysecret',
  region: 'eu',
  environment: 'client',
  logger: myLogger,
  timeout: 1000,
});
```

--------------------------------

### Manage SDK context

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Update the SDK context manually or create a scoped child instance with modified context.

```ts
confidence.setContext({ 'pants-color': 'yellow' });
```

```ts
const childInstance = confidence.withContext({ 'pants-color': 'blue', 'pants-fit': 'slim' });
```

--------------------------------

### Context Interface

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Represents the context for flag evaluations, including optional page details and visitor/targeting keys.

```typescript
interface Context extends Value.Struct {
    page?: {
        path: string;
        referrer: string;
        search: string;
        title: string;
        url: string;
    };
    targeting_key?: string;
    visitor_id?: string;
}
```

--------------------------------

### Content Security Policy for Confidence API

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Configure the `connect-src` directive in your CSP to allow requests to Confidence API endpoints for flag resolution and event tracking. Custom resolve URLs must also be included.

```html
<!-- Example CSP header configuration -->
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  connect-src 'self'
    https://*.confidence.dev
    https://resolver.confidence.dev
    https://resolver.eu.confidence.dev
    https://resolver.us.confidence.dev
    https://events.confidence.dev
    https://events.eu.confidence.dev
    https://events.us.confidence.dev
;
">

<!-- Or in your server's response headers -->
<!--
Content-Security-Policy:
  default-src 'self';
  connect-src 'self' https://*.confidence.dev;
-->
```

```typescript
// If using custom resolve URLs, include them in CSP
const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'client',
  timeout: 1000,
  resolveBaseUrl: 'https://custom-resolver.example.com', // Add to connect-src
});

// No additional CSP needed for web vitals tracking (uses browser APIs only)
// No unsafe-inline required (SDK doesn't inject inline scripts)
```

--------------------------------

### Tracking Events with Confidence SDK

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Track events and associated data using the `track` method available on the Confidence instance. This is useful for monitoring feature usage or user interactions.

```ts
const confidence = useConfidence();
confidence.track('my-event-name', { my_data: 4 });
```

--------------------------------

### Configure provider region

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-server-provider/README.md

Set the region option to specify the Confidence backend location, defaulting to global if omitted.

```ts
const provider = createConfidenceServerProvider({
  region: 'eu', // or 'us'
  // ... other options
});
```

--------------------------------

### Server-Side Rendering with Next.js and Confidence SDK

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Configure Confidence on the server for SSR applications like Next.js, utilizing React.cache for request-scoped caching. Resolved flag values are then passed as props to client components.

```tsx
// app/confidence.ts - Server-side configuration
import { Confidence } from '@spotify-confidence/sdk';
import { cookies } from 'next/headers';
import React from 'react';

const confidence = Confidence.create({
  clientSecret: process.env.CONFIDENCE_CLIENT_SECRET!,
  environment: 'backend',
  timeout: 1000,
  logger: console,
  cache: {
    scope: React.cache, // Use React.cache for server-side caching
  },
});

export async function getConfidence() {
  const cookieStore = await cookies();
  const targetingKey = cookieStore.get('visitorId')?.value || 'anonymous';

  // Return child instance with request-specific context
  return confidence.withContext({ targeting_key: targetingKey });
}
```

```tsx
// app/components/ServerComponent.tsx - Server component
import { getConfidence } from '../confidence';

export default async function ServerComponent() {
  const confidence = await getConfidence();

  // Direct flag evaluation in server components
  const heroTitle = await confidence.getFlag('homepage.hero-title', 'Welcome');
  const showPromo = await confidence.getFlag('homepage.show-promo', false);

  return (
    <div>
      <h1>{heroTitle}</h1>
      {showPromo && <PromoBanner />}
      {/* Pass flag values to client components */}
      <InteractiveSection showPromo={showPromo} />
    </div>
  );
}
```

```tsx
// app/components/InteractiveSection.tsx - Client component
'use client';

interface Props {
  showPromo: boolean;
}

export default function InteractiveSection({ showPromo }: Props) {
  // Use server-resolved flag values
  return (
    <div>
      {showPromo && <button>Claim Offer</button>}
    </div>
  );
}
```

--------------------------------

### EventSender API

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Interface for tracking events within the application.

```APIDOC
## EventSender.track

### Description
Tracks an event with a given name and associated data.

### Parameters
#### Request Body
- **name** (string) - Required - The name of the event.
- **data** (EventData) - Optional - The event payload.
```

--------------------------------

### Client Component with Confidence SDK Hooks

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Utilize `useConfidence` and `useFlag` hooks within client components for interactive features. Note that mutating context on the client does not affect the server-side instance.

```tsx
// app/components/ClientComponent.tsx
('use client');
import { useConfidence, useFlag } from '@spotify-confidence/react/client';

export const ClientComponent = () => {
  // Use hooks in client components
  const confidence = useConfidence();
  const fontSize = useFlag('my-feature-flag.size', '12pt');

  return (
    <div>
      <div style={{ fontSize }}>Client rendered content</div>
      <button onClick={() => confidence.setContext({ locale: 'sv-SE' })}>Choose Swedish</button>
    </div>
  );
};
```

--------------------------------

### Enable Auto-Tracking with Trackers

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Configures automatic tracking for visitor identity, page views, and web vitals. Call the returned stop functions to disable tracking when no longer needed.

```typescript
import { Confidence, pageViews, webVitals, visitorIdentity } from '@spotify-confidence/sdk';

const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'client',
  timeout: 1000,
});

// Enable automatic visitor ID generation (stored in cookie 'cnfdVisitorId')
// Adds visitor_id to context for all subsequent events
const stopVisitorTracking = confidence.track(visitorIdentity());

// Enable automatic page view tracking
// Tracks 'page-viewed' events on: load, pushState, replaceState, popstate, hashchange
const stopPageViewTracking = confidence.track(pageViews());

// Enable web vitals tracking (LCP, INP, CLS, TTFB)
const stopWebVitalsTracking = confidence.track(webVitals({
  lcp: true,  // Largest Contentful Paint
  inp: true,  // Interaction to Next Paint
  cls: true,  // Cumulative Layout Shift
  ttfb: false, // Time to First Byte (disabled by default)
}));

// Events automatically tracked:
// - 'page-viewed' with page context (path, search, referrer, title, url)
// - 'web-vitals-lcp', 'web-vitals-inp', 'web-vitals-cls' with metric data

// Stop tracking when needed (e.g., on component unmount)
function cleanup() {
  stopVisitorTracking();
  stopPageViewTracking();
  stopWebVitalsTracking();
}
```

--------------------------------

### Auto Track Page Views (Web)

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Automatically tracks page views by listening to browser events like 'load', 'pushState', 'replaceState', 'popstate', and 'hashchange'.

```typescript
import { Confidence, pageViews } from '@spotify-confidence/sdk';
confidence.track(pageViews());
```

--------------------------------

### Track Events

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Send custom events to the Confidence SDK. Events can include additional data for tracking purposes.

```typescript
confidence.track("button_click", {
    button_name: "submit",
});
```

--------------------------------

### Confidence Class

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

The main class for interacting with the Confidence SDK. It provides methods for evaluating flags, managing context, and tracking events.

```APIDOC
## Confidence Class

### Description
The `Confidence` class is the primary interface for using the SDK. It allows you to evaluate feature flags, manage user context, and track events.

### Methods

- **`Confidence.create(options: ConfidenceOptions): Confidence`**: Static method to create a new instance of the `Confidence` class.
- **`evaluateFlag<T extends Value>(path: string, defaultValue: T): FlagEvaluation<T>`**: Evaluates a feature flag and returns its value or a default value.
- **`getFlag<T extends Value>(path: string, defaultValue: T): Promise<T>`**: Asynchronously retrieves the value of a feature flag.
- **`setContext(context: Context): boolean`**: Sets the current context for flag evaluations.
- **`getContext(): Context`**: Retrieves the current context.
- **`withContext(context: Context): Confidence`**: Returns a new `Confidence` instance with the provided context merged.
- **`clearContext(): void`**: Clears the current context.
- **`track(name: string, data?: EventData): void`**: Tracks a custom event.
- **`subscribe(onStateChange?: StateObserver): () => void`**: Subscribes to changes in the flag state.
- **`toOptions(): ConfidenceOptions`**: Returns the current configuration options.

### Properties

- **`config: Configuration`**: The SDK configuration.
- **`environment: string`**: The current environment (e.g., 'client', 'backend').
- **`flagState: State`**: The current state of the feature flags.
```

--------------------------------

### Track Custom Event

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Tracks a custom event with optional context data. Any context data set on the Confidence instance will be appended to the tracking event.

```typescript
confidence.track('event_name', { 'message-detail1': 'something interesting' });
```

--------------------------------

### Subscribe to Confidence Flag State Changes

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Subscribe to flag state changes to manage UI states like loading, ready, stale, or error. Context changes can trigger re-fetches and state transitions.

```typescript
import { Confidence } from '@spotify-confidence/sdk';

const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'client',
  timeout: 1000,
});

// Subscribe to flag state changes
const unsubscribe = confidence.subscribe((state) => {
  switch (state) {
    case 'NOT_READY':
      console.log('Flags not yet loaded');
      showLoadingSpinner();
      break;
    case 'READY':
      console.log('Flags are ready for use');
      hideLoadingSpinner();
      renderFeatureFlags();
      break;
    case 'STALE':
      console.log('Flags are stale, fetching new values');
      showRefreshIndicator();
      break;
    case 'ERROR':
      console.log('Error loading flags, using defaults');
      hideLoadingSpinner();
      showErrorBanner();
      break;
  }
});

// Check current state
console.log('Current flag state:', confidence.flagState);
// Output: Current flag state: NOT_READY (initially)

// Context changes trigger re-fetch and state transitions
confidence.setContext({ targeting_key: 'user-456' });
// State transitions: READY -> STALE -> READY

// Cleanup subscription
function cleanup() {
  unsubscribe();
}
```

--------------------------------

### FlagResolver API

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Methods for evaluating feature flags and subscribing to state changes.

```APIDOC
## FlagResolver.evaluateFlag

### Description
Evaluates a feature flag based on a path and a default value.

### Parameters
#### Path Parameters
- **path** (string) - Required - The flag path to evaluate.
- **defaultValue** (string | boolean | number | Value) - Required - The default value to return if evaluation fails.

### Response
- **FlagEvaluation<T>** - Returns a resolved, stale, or failed evaluation result.
```

```APIDOC
## FlagResolver.getFlag

### Description
Asynchronously retrieves a flag value.

### Parameters
#### Path Parameters
- **path** (string) - Required - The flag path.
- **defaultValue** (string | boolean | number | Value) - Required - The default value.

### Response
- **Promise<T>** - A promise resolving to the flag value.
```

--------------------------------

### Evaluate Feature Flags

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Retrieve flag values using getFlag for simple access or evaluateFlag for detailed metadata and evaluation reasons.

```typescript
import { Confidence } from '@spotify-confidence/sdk';

const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'backend',
  timeout: 1000,
});

async function evaluateFeatureFlags(userId: string) {
  const userConfidence = confidence.withContext({ targeting_key: userId });

  // Simple flag value access
  const isEnabled = await userConfidence.getFlag('tutorial-feature.enabled', false);
  const title = await userConfidence.getFlag('tutorial-feature.title', 'Default Title');
  const maxRetries = await userConfidence.getFlag('api-config.max-retries', 3);

  console.log(`Enabled: ${isEnabled}, Title: ${title}, Max retries: ${maxRetries}`);

  // Detailed evaluation with metadata
  const evaluation = await userConfidence.evaluateFlag('tutorial-feature.color', 'blue');
  console.log('Evaluation result:', {
    value: evaluation.value,
    reason: evaluation.reason, // 'MATCH', 'NO_SEGMENT_MATCH', 'ERROR', etc.
    variant: evaluation.variant,
    errorCode: evaluation.errorCode, // Present if reason is 'ERROR'
  });

  // Access full flag object
  const fullFlag = await userConfidence.getFlag('tutorial-feature', {});
  console.log('Full flag:', fullFlag);
}

evaluateFeatureFlags('user-abc');
// Output: Enabled: true, Title: Welcome to the Tutorial, Max retries: 5
// Output: Evaluation result: { value: 'green', reason: 'MATCH', variant: 'treatment-a' }
// Output: Full flag: { enabled: true, title: 'Welcome to the Tutorial', color: 'green' }
```

--------------------------------

### React Context Scoping with ConfidenceProvider

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Use ConfidenceProvider.WithContext or the useWithContext hook to create scoped contexts for component subtrees. This prevents global context from affecting specific sections of your application.

```tsx
import React, { Suspense } from 'react';
import { Confidence } from '@spotify-confidence/sdk';
import { ConfidenceProvider, useConfidence, useFlag, useWithContext } from '@spotify-confidence/react';

const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'client',
  timeout: 1000,
});

function App() {
  return (
    <ConfidenceProvider confidence={confidence}>
      <Suspense fallback={<div>Loading...</div>}>
        {/* Global context applies here */}
        <Header />

        {/* Scoped context for premium section */}
        <ConfidenceProvider.WithContext context={{ user_tier: 'premium' }}>
          <PremiumSection />
        </ConfidenceProvider.WithContext>

        {/* Different scoped context for trial section */}
        <ConfidenceProvider.WithContext context={{ user_tier: 'trial' }}>
          <TrialSection />
        </ConfidenceProvider.WithContext>
      </Suspense>
    </ConfidenceProvider>
  );
}

function PremiumSection() {
  // This hook creates a child Confidence instance with additional context
  const premiumConfidence = useWithContext({ feature_set: 'advanced' });

  // Flags evaluated with merged context: { user_tier: 'premium', feature_set: 'advanced' }
  const showAdvancedFeatures = useFlag('premium.advanced-features', false, premiumConfidence);

  return (
    <div>
      <h2>Premium Features</h2>
      {showAdvancedFeatures && <AdvancedDashboard />}
    </div>
  );
}

function TrialSection() {
  // Inherits { user_tier: 'trial' } from WithContext wrapper
  const trialLimit = useFlag('trial.usage-limit', 100);
  return <div>Trial Usage Limit: {trialLimit}</div>;
}
```

--------------------------------

### Combine Closers

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Combine multiple closer functions into a single function that executes all of them sequentially.

```typescript
import { Closer } from "@spotify-confidence/sdk";

const closer1 = () => console.log("Closing 1");
const closer2 = () => console.log("Closing 2");

const combinedCloser = Closer.combine(closer1, closer2);
combinedCloser();
```

--------------------------------

### Auto Track Web Vitals (Web)

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Automatically sends tracking events containing web vitals data, such as performance metrics for loading and interactivity.

```typescript
import { Confidence, webVitals } from '@spotify-confidence/sdk';
confidence.track(webVitals());
```

--------------------------------

### Fetch Feature Flag Value

Source: https://github.com/spotify/confidence-sdk-js/blob/main/README.md

Retrieve a boolean flag value using the OpenFeature client with a provided visitor context.

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

--------------------------------

### Subscribe to State Changes

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Register a callback function to be notified when the flag state changes. Returns an unsubscribe function.

```typescript
const unsubscribe = confidence.subscribe((state) => {
    console.log("Flag state changed:", state);
});

// To stop listening:
unsubscribe();
```

--------------------------------

### React Suspense Integration for Flag Hooks

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Wrap components that use `useFlag` or `useEvaluateFlag` within a React Suspense boundary to handle loading states gracefully.

```tsx
<Suspense fallback={<LoadingSpinner />}>
  <MyComponent />
</Suspense>
```

--------------------------------

### Bypass Cache for Latest Flag Values

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Creates a new Confidence instance with an empty cache to always fetch the latest flag values. Useful for testing or debugging.

```typescript
const confidence = Confidence.create({...});
const flag = confidence.withContext({}).getFlag('flag', {})
```

--------------------------------

### Value Utility API

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

Utility functions for manipulating and validating values.

```APIDOC
## Value.serialize / Value.deserialize

### Description
Functions to serialize and deserialize values for transport.

### Parameters
- **value** (Value) - Required - The value to serialize.
- **data** (string) - Required - The string to deserialize.
```

--------------------------------

### Access feature flags

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Retrieve flag values or full evaluation details using the flag value or evaluate APIs.

```ts
const flag = await confidence.getFlag('tutorial-feature', {});
const flagEvaluation = await confidence.evaluateFlag('tutorial-feature', {});
```

--------------------------------

### Track Custom Events

Source: https://context7.com/spotify/confidence-sdk-js/llms.txt

Send analytics data to Confidence using track, which automatically includes the current context with event-specific payloads.

```typescript
import { Confidence } from '@spotify-confidence/sdk';

const confidence = Confidence.create({
  clientSecret: 'your-client-secret',
  environment: 'client',
  timeout: 1000,
});

confidence.setContext({
  targeting_key: 'user-123',
  subscription: 'premium',
});

// Track a simple event
confidence.track('button-clicked');

// Track event with additional data
confidence.track('purchase-completed', {
  product_id: 'prod-456',
  amount: 29.99,
  currency: 'USD',
  items_count: 3,
});

// Track page navigation
confidence.track('page-viewed', {
  page_name: 'checkout',
  referrer: '/cart',
  load_time_ms: 245,
});

console.log('Events tracked successfully');
// All events include context: { targeting_key: 'user-123', subscription: 'premium' }
```

--------------------------------

### Auto Track Visitor ID (Web)

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/sdk/README.md

Adds a browser-specific visitor ID to the context for tracking events and flag resolves. The visitor ID is stored in a cookie named 'cnfdVisitorId'.

```typescript
import { visitorIdentity } from './trackers';
confidence.track(visitorIdentity());
```

--------------------------------

### Configure Confidence Provider Region

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/openfeature-web-provider/README.md

Set the region for network requests to the Confidence backend. Supported regions are 'eu' and 'us'.

```ts
const provider = createConfidenceWebProvider({
  region: 'eu', // or 'us'
  // ... other options
});
```

--------------------------------

### Access Flags with useFlag and useEvaluateFlag Hooks

Source: https://github.com/spotify/confidence-sdk-js/blob/main/packages/react/README.md

Utilize the `useFlag` hook for simple flag value retrieval or `useEvaluateFlag` for detailed evaluation results including reason and variant. Both hooks integrate with React Suspense.

```tsx
import { useFlag, useEvaluateFlag } from '@spotify-confidence/react';

function MyComponent() {
  // Simple flag access - returns the flag value or default
  const color = useFlag('my-feature-flag.color', 'blue');

  // Detailed flag evaluation - returns evaluation details
  const { value, reason } = useEvaluateFlag('my-feature-flag.size', 12);

  return (
    <div style={{ color, fontSize: value }}>
      <p>Color: {color}</p>
      <p>Size: {value}</p>
      <p>Reason: {reason}</p>
    </div>
  );
}
```

--------------------------------

### webVitals Function

Source: https://github.com/spotify/confidence-sdk-js/blob/main/api/sdk.api.md

The webVitals function allows you to track core web vital metrics like LCP, INP, CLS, and TTFB. It accepts an optional options object to specify which metrics to track.

```APIDOC
## webVitals Function

### Description
Tracks core web vital metrics.

### Method
Function Call

### Parameters
#### Options Object (Optional)
- **lcp** (boolean) - Optional - Whether to track Largest Contentful Paint.
- **inp** (boolean) - Optional - Whether to track Interaction to Next Paint.
- **cls** (boolean) - Optional - Whether to track Cumulative Layout Shift.
- **ttfb** (boolean) - Optional - Whether to track Time to First Byte.

### Usage Example
```javascript
import { webVitals } from '@spotify/confidence-sdk-js';

// Track all web vitals
webVitals({
  lcp: true,
  inp: true,
  cls: true,
  ttfb: true
});

// Track only LCP and CLS
webVitals({
  lcp: true,
  cls: true
});
```

### Response
Returns a Trackable.Manager instance.
```
Tokens:
Raw