Feature flag client

Examples

Typescript ❤️

A client to take care of feature flag evaluation and tracking of exposure events

Install

yarn add @atlaskit/feature-flag-client

npm

@atlaskit/feature-flag-client

Source

Bitbucket

Bundle

unpkg.com

Changelog

Latest

5.6.0

Minor Changes

#130824 25171e868b831 - Tokenize growth (https://product-fabric.atlassian.net/browse/PYX-881)

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

This client makes it easy to work with feature flags and dark features. By using it, exposure events will be fired automatically allowing analysis of important metrics out of the box.

Usage

Bootstrap

  import FrontendFeatureFlagClient from '@atlaskit/feature-flag-client';

  const client = new FrontendFeatureFlagClient({
    analyticsHandler: myAnalyticsHandler,
    flags: {
      'my.experiment': {
        value: 'experiment',
        explanation: {
          reason: 'RULE_MATCH',
          ruleId: '111-bbbbb-ccc',
        },
      },
      'my.boolean.flag': {
        value: false
      },
      'my.json.flag': {
        value: {
          nav: 'blue',
          footer: 'black',
        },
        explanation: {
          reason: 'RULE_MATCH',
          ruleId: '111-bbbbb-ccc',
        },
      },
      'my.detailed.boolean.flag': {
        value: false,
        explanation: {
          reason: 'RULE_MATCH',
          ruleId: '111-bbbbb-ccc',
        },
      },
    },
  });

Retrieving values

  // flag set, returns real value
  client.getBooleanValue('my.detailed.boolean.flag', { default: true }); // > false

  // flag set, returns real value
  client.getVariantValue('my.experiment', {
    default: 'control',
    oneOf: ['control', 'experiment'],
  }); // > experiment

  // flag unset, returns default value
  client.getBooleanValue('my.unlisted.boolean.flag', { default: false }); // > false

  // flag value doesn't match expected, returns default
  client.getVariantValue('my.experiment', {
    default: 'control',
    oneOf: ['control', 'variant-a'],
  }); // > control

  client.getJSONFlag('my.json.flag'); // > { nav: 'blue', footer: 'black' }

Setting flags asynchronously?

If you load your flags after the app bootstrap, you set the to the client through the 'setFlags' method.

  client.setFlags({
    'my.async.boolean.flag': {
      value: false,
      explanation: {
        reason: 'RULE_MATCH',
        ruleId: '333-bbbbb-ccc',
      },
    }
  });

How to avoid firing the exposure event?

You can skip the exposure event by setting 'shouldTrackExposureEvent' to 'false'

  client.getBooleanValue('my.detailed.boolean.flag', {
    default: true,
    shouldTrackExposureEvent: false,
  });

How to fire the exposure event manually?

  client.trackExposure('my.detailed.boolean.flag', {
    value: true,
    explanation: {
      reason: 'RULE_MATCH',
      ruleId: 'aaaa-vbbbb-ccccc'
    }
  });

Basic

Feature flag client

getVariantValue

Value for flag "my.experiment" is "experiment"

getBooleanValue

Value for flag "my.boolean.flag" is "false"

getJSONFlag

Nav color is blue

Footer color is black

Using the trackFeatureFlag endpoint

The trackFeatureFlag endpoint can be used to trigger both manual and automatic exposures depending on how your client is configured and what trigger reason is provided to the endpoint. It is possible to but not required to supply a trigger reason, value and explanation. The trigger reason will be defaulted to ExposureTriggerReason.Manual and value and explanation will be retrieved from the flags field on the client.

####Accessing ExposureTriggerReason This enum can be imported like so super-secret-react-markings-placeholder-if-you-are-seeing-this-then-there-is-a-bug-in-react-markings

####Firing manually If no ExposureTriggerReason is provided then trackFeatureFlag will default to ExposureTriggerReason.Manual.

import { ExposureTriggerReason } from '@atlaskit/feature-flag-client';

####Firing automatically If isAutomaticExposuresEnabled is enabled via the setAutomaticExposuresMode API and the triggerReason is ExposureTriggerReason.Automatic then trackFeatureFlag will trigger an automatic exposure.

  client.trackFeatureFlag('my.detailed.boolean.flag'
  });