Feature flags & experiments

Monitor errors as you roll out features or run experiments and A/B tests by declaring your feature flag and experiment usage in the BugSnag client. You can use the Features dashboard to identify whether these features have introduced errors into your app.

This documentation is for version 7+ of the BugSnag JavaScript notifier. If you are using older versions, we recommend upgrading to the latest release using our Upgrade guide. Documentation for the previous release can be found on our legacy pages.

Declaring active feature flags and experiments

You should declare feature flag and experiment usage to BugSnag at the time a feature or experiment is activated in your app. This ensures that subsequent errors will be associated with the feature flag or experiment usage accurately.

These operations are also available in configuration options. If feature or experiment usage is known at the time you initialize BugSnag, you may wish to declare it in configuration, then update it later in the same app session if required.

You can either declare the usage using the following methods on the BugSnag client or in a callback on an Event object.

`addFeatureFlag`

Declare a single feature flag or experiment with variant as an optional second parameter.

Bugsnag.addFeatureFlag('Checkout button color', 'Blue')
Bugsnag.addFeatureFlag('New checkout flow')

`addFeatureFlags`

Declare multiple feature flags or experiments.

Bugsnag.addFeatureFlags([
  { name: 'Checkout button color', variant: 'Blue' },
  { name: 'Special offer', variant: 'Free Coffee' },
  { name: 'New checkout flow' },
])

If addFeatureFlags is called again, the new data will be merged with any existing feature flags with the newer variant values taking precedence.

`clearFeatureFlag`

Remove a single feature flag or experiment.

Bugsnag.clearFeatureFlag('Checkout button color')

`clearFeatureFlags`

Remove all feature flags and experiments.

Bugsnag.clearFeatureFlags()

Feature and experiment management tools

LaunchDarkly

To use BugSnag with LaunchDarkly, you need to declare the flag to BugSnag whenever you read it from LaunchDarkly. If using withLDConsumer or a LaunchDarkly hook, you should wrap the flag access so you can declare to BugSnag.

For example, using the useFlags hook:

import { useFlags } from 'launchdarkly-react-client-sdk'

const App = () => {
  const flags = useFlags()

  const getBooleanFlag = (key) => {
    const booleanFlag = flags[key]

    if (booleanFlag) {
      Bugsnag.addFeatureFlag(key)
    } else {
      Bugsnag.clearFeatureFlag(key)
    }

    return booleanFlag
  }

  const getStringFlag = (key) => {
    const stringFlag = flags[key]

    if (stringFlag !== null) {
      Bugsnag.addFeatureFlag(key, stringFlag)
    } else {
      Bugsnag.clearFeatureFlag(key)
    }

    return stringFlag
  }

  return (
    <div>
      <p>{getBooleanFlag('booleanFlagKey') ? 'On' : 'Off'}</p>

      <p>{getStringFlag('stringFlagKey')}</p>
    </div>
  )
}

Split

To use BugSnag with Split, we recommend adding an impression listener to keep BugSnag updated with the active experiments:

function bugsnagListener(impressionData) {
  Bugsnag.addFeatureFlag(
    impressionData.impression.feature,
    impressionData.impression.treatment
  )
}

const sdkConfig = {
  /* ... */
  impressionListener: {
    logImpression: bugsnagListener
  }
})

const App = () => (
  <SplitFactory config={sdkConfig}>
    <MyApp />
  </SplitFactory>
)

For more information, please see the Split React SDK documentation.

To use BugSnag with Split:

const factory = SplitFactory(/* ... */)
const client = factory.client()

app.get('/purchase/:productId', function (req, res, next) {
  const treatment = client.getTreatment('key', 'SPLIT_NAME')

  Bugsnag.addFeatureFlag('SPLIT_NAME', treatment)

  // ...
})

For more information, please see the Split Node.js SDK documentation.