# Feature Flags for the Web SDK

{{< glossary_definition "feature_flag" >}}

## Accessing flags

> **Note:** Feature Flags are only available after a channel has been registered in the browser. For information on how to register
> a channel, see [Creating a channel](https://www.airship.com/docs/developer/sdk-integration/web/getting-started/#creating-a-channel) in the Web *Getting Started* documentation.


The Airship SDK will automatically refresh Feature Flag definitions on flag request if the current definitions are out of date.  Once [defined in the dashboard](https://www.airship.com/docs/guides/experimentation/feature-flags/#create-feature-flags), a Feature Flag can be accessed by its name after the Airship SDK is loaded.

The SDK provides asynchronous access to Feature Flags using [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), which are supported in all browser versions that the Airship SDK targets. If `async/await` syntax is available in  your toolchain, it is recommended for simplifying interactions with Feature Flags.

Flags are accessed through the [Feature Flag Manager](https://www.airship.com/docs/reference/libraries/web-notify-sdk/v2-latest/FeatureFlagManager.html)
 interface:

**Determining Feature Flag eligibility**

```javascript
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

if (flag.eligible) {
  // user is eligible for the flag, enable the feature
} else {
  // user is not eligible, disable the feature or use default behavior
}
```


A user is said to be eligible for a flag if the flag exists and if the current user is a member of the flag's audience. You may also check if the flag *exists*, if you are verifying correct operation during development. A flag is said to exist when:

* A flag with a given name has been created in the dashboard
* If the flag has a start or end date, the current time falls within that range

> **Note:** A user can never be eligible for a flag that does not exist.


**Checking Feature Flag properties**

```javascript
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

let booleanProperty = flag.data?.["bool_property_name"]
let stringProperty = flag.data?.["string_property_name"]
let jsonProperty = flag.data?.["json_property_name"]
let numberProperty = flag.data?.["number_property_name"]
```


**Checking if a Feature Flag definition exists**

```javascript
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

if (!flag.exists) {
  // for debugging purposes; not recommended for production deployments
  console.debug("flag did not exist!")
} else if (flag.eligible) {
  // user is eligible for the flag, enable the feature
} else {
  // user is not eligible, disable the feature or use default behavior
}
```


## Tracking interaction

If a user has interacted with a feature that is controlled by a Feature Flag, you will want to emit an event to inform Airship of that usage. This event will be collated for reporting purposes and may also be used to trigger [Scenes](https://www.airship.com/docs/reference/glossary/#scene) and [Sequences](https://www.airship.com/docs/reference/glossary/#sequence). See [Using Feature Flags with messaging](https://www.airship.com/docs/guides/experimentation/feature-flags/#using-feature-flags-with-messaging) in our *Feature Flags* user guide.

**Emitting an Interaction Event**

```javascript
const sdk = await UA
const flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")

// later, when the feature the flag controls is interacted with by the user
await sdk.components.featureFlags.trackInteraction(flag)
```


## Error handling

The Airship SDK will always return a [Feature Flag](https://www.airship.com/docs/reference/libraries/web-notify-sdk/v2-latest/FeatureFlag.html)
 object, regardless of the flag existing or not. The promise returned from the `featureFlags.get` method will only reject if there was an exceptional event while fetching flag data.

**Guarding against errors while checking a flag**

```javascript
const sdk = await UA
let flag
try {
  flag = await sdk.components.featureFlags.get("YOUR_FLAG_NAME")
} catch (e) {
  // report or handle error as necessary for your app
}

if (flag && flag.eligible) {
  // user is eligible for the flag, enable the feature
} else {
  // user is not eligible, disable the feature or use default behavior
}
```