Get notified when feature rollout rules change

[scampos-smarttech]

Hello,
I would like to get some help. If I modify conditions within role rules targeting specific users, that role's event listener does not notify those who no longer meet the requirements.

My setup is as follows:
I create a new feature in the dashboard and configure its rules with a custom field for it. The configurations is as follow:

Key: enable_beta_features
Type: Boolean
default value: Off
rule: "beta-user" > Boolean > equals > true

In the code, using featurehub-javascript-client-sdk, I set an addListener for that feature, and then I update the user-context by adding the beta-user attribute and. But if I change the feature rules in the panel, the users who are using the app do not receive the live-update. My expectations are that those users that don't meet the new conditions will receive the default feature value.

It is possible to get the live-update in this case?

As a workaround, it works after I refresh the browser, but my expectation is to receive the live-update.

Thanks in advance!

[IrinaSouth]

Hi @scampos-smarttech,

I assume you are using polling client? How often you poll for the features to update? It is a featurehub-interval option as described here https://www.npmjs.com/package/featurehub-javascript-client-sdk?activeTab=readme#2-create-featurehub-config

Cheers

[scampos-smarttech]

Hi Irina, thanks for your answer!

I did not set any interval, just I'm using the SEE connection method as it is documented here: https://www.npmjs.com/package/featurehub-javascript-client-sdk?activeTab=readme#changing-to-sse-server-sent-events---real-time-streaming-updates

And also set the listener for the specific feature to be notified in real-time to get new values like this: https://www.npmjs.com/package/featurehub-javascript-client-sdk?activeTab=readme#feature-updates-listener

This is my current code that initialize the Featurehub client and listen for updates.

async loadFeaturehub() {
  if (!this._loadFeatureHubState) {
    await this.createFeatureHubClient(this.credentials)
    return new Promise((resolve, reject) => {
      this._featureHubConfig.addReadinessListener((newReadyState, firstTimeReady) => {
        if (firstTimeReady) {
          const flags = this._readFlagsFromFeatureHub()
          this._listenForFeatureUpdates(flags)
          this._loadFeatureHubState = true
          resolve(flags)
        }
      })
    })
  }
}

async createFeatureHubClient(credentials) {
  //  swapping to the Streaming connector (SSE)
  EdgeFeatureHubConfig.defaultEdgeServiceSupplier = (repository, config) => {
    return new FeatureHubEventSourceClient(config, repository)
  }
  this.featureHubConfig = new EdgeFeatureHubConfig(credentials.host, credentials.key)
  this.featureHubClient = await this._featureHubConfig.newContext().build()
}

readFlagsFromFeatureHub() {
  const flags = this.featureHubClient.repository().features
  return this.getFeaturesMap(flags)
}

listenForFeatureUpdates(flagsList) {
  Object.keys(flagsList).forEach(flag => {
    this.featureHubClient.feature(flag).addListener(feature => {
      // Save the new feature value
      this.updateFeature(flag)
    })
  }
}

async updateFeaturesUserContext(key, value) {
  this.featureHubClient.attributeValue(key, value)
  await this.featureHubClient.build()
}

First of all I call loadFeaturehub and then eventually I do call to updateFeaturesUserContext to update the user context.

My problem is that the listener didn't handle updates in case a rule if changed in fh dashboard

[rvowles]

Hey there! Its expected that the listener, even when filtering, will trigger updates, but the triggers occur off your current context, and you get a tree of contexts, so if you did this for example:

let listener1 = client.feature('x').addListener(....);
let listener2 = client.attributeValue(key,value).feature('x').addListener(...);

then they will trigger off different contexts, when this builds the first context, it remembers the values and triggers only off those values.

That would be my first idea of what is possibly being unexpected? What you absolutely should see is a listener being fired when it is attached to a context with the appropriate attributes already set.

If you could perhaps include in the example of when the updateFeatureUserContext is called? Otherwise I would recommend storing the listeners and unlistening and reattaching the listeners when you change the context but before you do the build().

[scampos-smarttech]

Hello again,
I'm already renewing the listener. I simply omitted it in the previous message. This is my updated code:

async loadFeaturehub() {
  if (!this._loadFeatureHubState) {
    await this.createFeatureHubClient(this.credentials)
    return new Promise((resolve, reject) => {
      this._featureHubConfig.addReadinessListener((newReadyState, firstTimeReady) => {
        if (firstTimeReady) {
          const flags = this.readFlagsFromFeatureHub()
          this.listenForFeatureUpdates(flags)
          this._loadFeatureHubState = true
          resolve(flags)
        }
      })
    })
  }
}

async createFeatureHubClient(credentials) {
  //  swapping to the Streaming connector (SSE)
  EdgeFeatureHubConfig.defaultEdgeServiceSupplier = (repository, config) => {
    return new FeatureHubEventSourceClient(config, repository)
  }
  this.featureHubConfig = new EdgeFeatureHubConfig(credentials.host, credentials.key)
  this.featureHubClient = await this._featureHubConfig.newContext().build()
}

readFlagsFromFeatureHub() {
  const flags = this.featureHubClient.repository().features
  return this.getFeaturesMap(flags)
}

listenForFeatureUpdates(flagsList) {
  Object.keys(flagsList).forEach(flag => {
    this.featureHubClient.feature(flag).addListener(feature => {
      // Save the new feature value
      this.updateFeature(flag)
    })
  }
}

async updateFeaturesUserContext(key, value) {
  this.featureHubClient.attributeValue(key, value)
  await this.featureHubClient.build()
  this.renewListeners()
}

renewListeners() {
  this.clearListeners()
  const flags = this.readFlagsFromFeatureHub()
  Object.keys(flags).forEach(flag => {
    this.updateFeature(flag)
  })
  this.listenForFeatureUpdates(flags)
}

getFeaturesMap(flags) {
  const resultFlags = {}
  for (const [key, val] of flags) {
    switch (val.type) {
      case 'Boolean': {
        // FeatureHub didn't support '-' in its flag keys so we need to replace '-' by '_'
        resultFlags[normalizeFlagKey(key)] = val.value
        break
      }
      case 'json': {
        let parsedVal = {}
        try {
          parsedVal = JSON.parse(val.rawJson)
        } catch (e) {
          console.error(`%c There was an error parsing value for key: ${key}.\n ${e}.\n Check in Featurehub the ${key} has a defined value"`, 'color: #E9D502')
        }
        // FeatureHub didn't support '-' in its flag keys so we need to replace by '_'
        resultFlags[normalizeFlagKey(key)] = parsedVal
        break
      }
    }
  }

  return resultFlags
}

When my app initializes, first of all is to initializes featuremanager by calling loadFeaturehub
Then when the user logs in I update the context by calling updateFeaturesUserContext like updateFeaturesUserContext('role', 'viewer')

[rvowles]

Hey there, so I have replicated this in a test in a branch, so give me a few days to get back to you with an update and I will have it working, that ok?

As a side note, why do you say that FH keys cannot contain "-"? They can't for react because react doesn't like them, but they can contain pretty much anything...

[IrinaSouth]

added an issue here to track this #1108

[rvowles]

This is fixed now with an update to the js-sdk

[scampos-smarttech]

🤩 Kudos and cheers to the team!
Great work!