@featbit/js-client-sdk 2.0.0

package/src/featbit.ts

@@ -0,0 +1,343 @@
+import { eventHub } from "./events";
+import { logger } from "./logger";
+import store from "./store";
+import { networkService } from "./network.service";
+import {
+  FeatureFlagValue,
+  ICustomEvent,
+  IFeatureFlag,
+  IFeatureFlagBase,
+  IFeatureFlagSet,
+  IFeatureFlagVariationBuffer,
+  IInsight,
+  InsightType,
+  IOption,
+  IStreamResponse,
+  IUser,
+  StreamResponseEventType,
+  VariationDataType
+} from "./types";
+import {
+  generateorGetGuid,
+  isNullOrUndefinedOrWhiteSpace,
+  parseVariation,
+  serializeUser,
+  validateOption,
+  validateUser
+} from "./utils";
+import { Queue } from "./queue";
+import {
+  currentUserStorageKey,
+  featureFlagEvaluatedBufferTopic,
+  featureFlagEvaluatedTopic,
+  insightsFlushTopic,
+  insightsTopic,
+  websocketReconnectTopic
+} from "./constants";
+
+
+function createOrGetAnonymousUser(): IUser {
+  const sessionId = generateorGetGuid();
+
+  return {
+    name: sessionId,
+    keyId: sessionId
+  };
+}
+
+function mapFeatureFlagsToFeatureFlagBaseList(featureFlags: { [key: string]: IFeatureFlag }): IFeatureFlagBase[] {
+  return Object.keys(featureFlags).map((cur) => {
+    const {id, variation} = featureFlags[cur];
+    const variationType = featureFlags[cur].variationType || VariationDataType.string;
+    return {id, variation: parseVariation(variationType, variation), variationType};
+  });
+}
+
+export class FB {
+  private _readyEventEmitted: boolean = false;
+  private _readyPromise: Promise<IFeatureFlagBase[]>;
+
+  private _insightsQueue: Queue<IInsight> = new Queue<IInsight>(1, insightsFlushTopic);
+  private _featureFlagEvaluationBuffer: Queue<IFeatureFlagVariationBuffer> = new Queue<IFeatureFlagVariationBuffer>();
+  private _option: IOption = {
+    secret: '',
+    api: '',
+    streamingUri: '',
+    eventsUri: '',
+    enableDataSync: true,
+    appType: 'javascript'
+  };
+
+  constructor() {
+    this._readyPromise = new Promise<IFeatureFlagBase[]>((resolve, reject) => {
+      this.on('ready', () => {
+        const featureFlags = store.getFeatureFlags();
+        resolve(mapFeatureFlagsToFeatureFlagBaseList(featureFlags));
+        if (this._option.enableDataSync) {
+          const buffered = this._featureFlagEvaluationBuffer.flush().map(f => {
+            const featureFlag = featureFlags[f.id];
+            if (!featureFlag) {
+              logger.log(`Called unexisting feature flag: ${ f.id }`);
+              return null;
+            }
+
+            const variation = featureFlag.variationOptions.find(o => o.value === f.variationValue);
+            if (!variation) {
+              logger.log(`Sent buffered insight for feature flag: ${ f.id } with unexisting default variation: ${ f.variationValue }`);
+            } else {
+              logger.logDebug(`Sent buffered insight for feature flag: ${ f.id } with variation: ${ variation.value }`);
+            }
+
+            return {
+              insightType: InsightType.featureFlagUsage,
+              id: featureFlag.id,
+              timestamp: f.timestamp,
+              sendToExperiment: featureFlag.sendToExperiment,
+              variation: variation || {id: -1, value: f.variationValue}
+            }
+          });
+
+          networkService.sendInsights(buffered.filter(x => !!x));
+        }
+      });
+    });
+
+    // reconnect to websocket
+    eventHub.subscribe(websocketReconnectTopic, async () => {
+      try {
+        logger.logDebug('reconnecting');
+        await this.dataSync();
+        if (!this._readyEventEmitted) {
+          this._readyEventEmitted = true;
+          eventHub.emit('ready', mapFeatureFlagsToFeatureFlagBaseList(store.getFeatureFlags()));
+        }
+      } catch (err) {
+        logger.log('data sync error', err);
+      }
+    });
+
+    eventHub.subscribe(featureFlagEvaluatedBufferTopic, (data: IFeatureFlagVariationBuffer) => {
+      this._featureFlagEvaluationBuffer.add(data);
+    });
+
+    // track feature flag usage data
+    eventHub.subscribe(insightsFlushTopic, () => {
+      if (this._option.enableDataSync) {
+        networkService.sendInsights(this._insightsQueue.flush());
+      }
+    });
+
+    eventHub.subscribe(featureFlagEvaluatedTopic, (data: IInsight) => {
+      this._insightsQueue.add(data);
+    });
+
+    eventHub.subscribe(insightsTopic, (data: IInsight) => {
+      this._insightsQueue.add(data);
+    });
+  }
+
+  on(name: string, cb: Function) {
+    eventHub.subscribe(name, cb);
+  }
+
+  off(name: string, cb: Function) {
+    eventHub.unsubscribe(name, cb);
+  }
+
+  waitUntilReady(): Promise<IFeatureFlagBase[]> {
+    return this._readyPromise;
+  }
+
+  async init(option: IOption) {
+    const validateOptionResult = validateOption({...this._option, ...option});
+    if (validateOptionResult !== null) {
+      logger.log(validateOptionResult);
+      return;
+    }
+
+    this._option = {
+      ...this._option,
+      ...option,
+      ...{
+        api: (option.api || this._option.api)?.replace(/\/$/, '')
+      }
+    };
+
+    if (this._option.enableDataSync) {
+      networkService.init(this._option.streamingUri!, this._option.eventsUri!, this._option.secret, this._option.appType!);
+    }
+
+    await this.identify(option.user || createOrGetAnonymousUser());
+  }
+
+  async identify(user: IUser): Promise<void> {
+    const validateUserResult = validateUser(user);
+    if (validateUserResult !== null) {
+      logger.log(validateUserResult);
+      return;
+    }
+
+    user.customizedProperties = user.customizedProperties?.map(p => ({name: p.name, value: `${ p.value }`}));
+
+    const isUserChanged = serializeUser(user) !== localStorage.getItem(currentUserStorageKey);
+    this._option.user = Object.assign({}, user);
+    localStorage.setItem(currentUserStorageKey, serializeUser(this._option.user));
+
+    store.userId = this._option.user.keyId;
+    networkService.identify(this._option.user, isUserChanged);
+
+    await this.bootstrap(this._option.bootstrap, isUserChanged);
+  }
+
+  async logout(): Promise<IUser> {
+    const anonymousUser = createOrGetAnonymousUser();
+    await this.identify(anonymousUser);
+    return anonymousUser;
+  }
+
+  /**
+   * bootstrap with predefined feature flags.
+   * @param {array} featureFlags the predefined feature flags.
+   * @param {boolean} forceFullFetch if a forced full fetch should be made.
+   * @return {Promise<void>} nothing.
+   */
+  async bootstrap(featureFlags?: IFeatureFlag[], forceFullFetch?: boolean): Promise<void> {
+    featureFlags = featureFlags || this._option.bootstrap;
+    if (featureFlags && featureFlags.length > 0) {
+      const data = {
+        featureFlags: featureFlags.reduce((res, curr) => {
+          const {id, variation, timestamp, variationOptions, sendToExperiment, variationType} = curr;
+          res[id] = {
+            id,
+            variation,
+            timestamp,
+            variationOptions: variationOptions || [{id: 1, value: variation}],
+            sendToExperiment,
+            variationType: variationType || VariationDataType.string
+          };
+
+          return res;
+        }, {} as { [key: string]: IFeatureFlag })
+      };
+
+      store.setFullData(data);
+      logger.logDebug('bootstrapped with full data');
+    }
+
+    if (this._option.enableDataSync) {
+      // start data sync
+      try {
+        await this.dataSync(forceFullFetch);
+      } catch (err) {
+        logger.log('data sync error', err);
+      }
+    }
+
+    if (!this._readyEventEmitted) {
+      this._readyEventEmitted = true;
+      eventHub.emit('ready', mapFeatureFlagsToFeatureFlagBaseList(store.getFeatureFlags()));
+    }
+  }
+
+  private async dataSync(forceFullFetch?: boolean): Promise<any> {
+    return new Promise<void>((resolve, reject) => {
+      const timestamp = forceFullFetch ? 0 : Math.max(...Object.values(store.getFeatureFlags()).map(ff => ff.timestamp), 0);
+
+      networkService.createConnection(timestamp, (message: IStreamResponse) => {
+        if (message && message.userKeyId === this._option.user?.keyId) {
+          const {featureFlags} = message;
+
+          switch (message.eventType) {
+            case StreamResponseEventType.full: // full data
+            case StreamResponseEventType.patch: // partial data
+              const data = {
+                featureFlags: featureFlags.reduce((res, curr) => {
+                  const {id, variation, timestamp, variationOptions, sendToExperiment, variationType} = curr;
+                  res[id] = {
+                    id,
+                    variation,
+                    timestamp,
+                    variationOptions,
+                    sendToExperiment,
+                    variationType: variationType || VariationDataType.string
+                  };
+
+                  return res;
+                }, {} as { [key: string]: IFeatureFlag })
+              };
+
+              if (message.eventType === StreamResponseEventType.full) {
+                store.setFullData(data);
+                logger.logDebug('synchonized with full data');
+              } else {
+                store.updateBulkFromRemote(data);
+                logger.logDebug('synchonized with partial data');
+              }
+
+              break;
+            default:
+              logger.logDebug('invalid stream event type: ' + message.eventType);
+              break;
+          }
+        }
+
+        resolve();
+      });
+    });
+  }
+
+  variation(key: string, defaultResult: FeatureFlagValue): FeatureFlagValue {
+    const variation = variationWithInsightBuffer(key, defaultResult);
+    return variation === undefined ? defaultResult : variation;
+  }
+
+  /**
+   * deprecated, you should use variation method directly
+   */
+  boolVariation(key: string, defaultResult: boolean): boolean {
+    const variation = variationWithInsightBuffer(key, defaultResult);
+    return variation === undefined ? defaultResult : variation?.toLocaleLowerCase() === 'true';
+  }
+
+  getUser(): IUser {
+    return {...this._option.user!};
+  }
+
+  sendCustomEvent(data: ICustomEvent[]): void {
+    (data || []).forEach(d => this._insightsQueue.add({
+      insightType: InsightType.customEvent,
+      timestamp: Date.now(),
+      type: 'CustomEvent',
+      ...d
+    }))
+  }
+
+  sendFeatureFlagInsight(key: string, variation: string) {
+    this.variation(key, variation);
+  }
+
+  getAllFeatureFlags(): IFeatureFlagSet {
+    const flags = store.getFeatureFlags();
+
+    return Object.values(flags).reduce((acc, curr) => {
+      acc[curr.id] = parseVariation(curr.variationType, curr.variation);
+      return acc;
+    }, {});
+  }
+}
+
+const variationWithInsightBuffer = (key: string, defaultResult: string | boolean) => {
+  const variation = store.getVariation(key);
+  if (variation === undefined) {
+    eventHub.emit(featureFlagEvaluatedBufferTopic, {
+      id: key,
+      timestamp: Date.now(),
+      variationValue: `${ defaultResult }`
+    } as IFeatureFlagVariationBuffer);
+  }
+
+  return variation;
+}
+
+export default new FB();
+

package/src/index.ts

@@ -0,0 +1,6 @@
+import fbClient, { FB } from './featbit';
+import { logger } from "./logger";
+
+export * from './types';
+
+export { FB, fbClient, logger };

package/src/logger.ts

@@ -0,0 +1,18 @@
+import { debugModeQueryStr } from "./constants";
+
+// get debug mode from query string
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const debugModeParam = urlParams.get(debugModeQueryStr);
+
+export const logger = {
+    logDebug(...args) {
+        if (debugModeParam === 'true') {
+            console.log(...args);
+        }
+    },
+
+    log(...args) {
+        console.log(...args);
+    }
+}

package/src/network.service.ts

@@ -0,0 +1,223 @@
+import { websocketReconnectTopic } from "./constants";
+import { eventHub } from "./events";
+import { logger } from "./logger";
+import { IInsight, InsightType, IStreamResponse, IUser } from "./types";
+import { generateConnectionToken } from "./utils";
+import throttleUtil from "./throttleutil";
+
+const socketConnectionIntervals = [250, 500, 1000, 2000, 4000, 8000];
+
+class NetworkService {
+  private user: IUser | undefined;
+  private streamingUri: string | undefined;
+  private eventsUri: string | undefined;
+  private secret: string | undefined;
+  private appType: string | undefined;
+
+  private retryCounter = 0;
+
+  constructor(){}
+
+  init(streamingUri: string, eventsUri: string, secret: string, appType: string) {
+    this.streamingUri = streamingUri;
+    this.eventsUri = eventsUri;
+    this.secret = secret;
+    this.appType = appType;
+  }
+
+  identify(user: IUser, sendIdentifyMessage: boolean) {
+    this.user = { ...user };
+    throttleUtil.setKey(this.user?.keyId);
+
+    if (sendIdentifyMessage && this.socket) {
+      this.sendUserIdentifyMessage(0);
+    }
+  }
+
+  private sendUserIdentifyMessage(timestamp: number) {
+    const { name, keyId, customizedProperties } = this.user!;
+    const payload = {
+      messageType: 'data-sync',
+      data: {
+        user: {
+          name,
+          keyId,
+          customizedProperties,
+        },
+        timestamp
+      }
+    };
+
+    try {
+      if (this.socket?.readyState === WebSocket.OPEN) {
+        logger.logDebug('sending user identify message');
+        this.socket?.send(JSON.stringify(payload));
+      } else {
+        logger.logDebug(`didn't send user identify message because socket not open`);
+      }
+    } catch (err) {
+      logger.logDebug(err);
+    }
+  }
+
+  private socket: WebSocket | undefined | any;
+
+  private reconnect() {
+    this.socket = null;
+    const waitTime = socketConnectionIntervals[Math.min(this.retryCounter++, socketConnectionIntervals.length - 1)];
+    setTimeout(() => {
+      logger.logDebug('emit reconnect event');
+      eventHub.emit(websocketReconnectTopic, {});
+    }, waitTime);
+    logger.logDebug(waitTime);
+  }
+
+  private sendPingMessage() {
+    const payload = {
+      messageType: 'ping',
+      data: null
+    };
+
+    setTimeout(() => {
+      try {
+        if (this.socket?.readyState === WebSocket.OPEN) {
+          logger.logDebug('sending ping')
+          this.socket.send(JSON.stringify(payload));
+          this.sendPingMessage();
+        } else {
+          logger.logDebug(`socket closed at ${new Date()}`);
+          this.reconnect();
+        }
+      } catch (err) {
+        logger.logDebug(err);
+      }
+    }, 18000);
+  }
+
+  createConnection(timestamp: number, onMessage: (response: IStreamResponse) => any) {
+    const that = this;
+    if (that.socket) {
+      onMessage({} as IStreamResponse);
+      return;
+    }
+
+    const startTime = Date.now();
+    // Create WebSocket connection.
+    const url = `${this.streamingUri}/streaming?type=client&token=${generateConnectionToken(this.secret!)}`;
+    that.socket = new WebSocket(url);
+
+    // Connection opened
+    that.socket.addEventListener('open', function (this: WebSocket, event) {
+      that.retryCounter = 0;
+      // this is the websocket instance to which the current listener is binded to, it's different from that.socket
+      logger.logDebug(`Connection time: ${Date.now() - startTime} ms`);
+      that.sendUserIdentifyMessage(timestamp);
+      that.sendPingMessage();
+    });
+  
+    // Connection closed
+    that.socket.addEventListener('close', function (event) {
+      logger.logDebug('close');
+      if (event.code === 4003) { // do not reconnect when 4003
+        return;
+      }
+
+      that.reconnect();
+    });
+  
+    // Connection error
+    that.socket!.addEventListener('error', function (event) {
+      // reconnect
+      logger.logDebug('error');
+    });
+  
+    // Listen for messages
+    that.socket.addEventListener('message', function (event) {
+      const message = JSON.parse(event.data);
+      if (message.messageType === 'data-sync') {
+        onMessage(message.data);
+        if (message.data.featureFlags.length > 0) {
+          logger.logDebug('socket push update time(ms): ', Date.now() - message.data.featureFlags[0].timestamp);
+        }
+      }
+    });
+  }
+
+  private __getUserInfo(): any {
+    const { name, keyId, customizedProperties } = this.user!;
+    return {
+      name: name,
+      keyId: keyId,
+      customizedProperties: customizedProperties,
+    }
+  }
+
+  sendInsights = throttleUtil.throttleAsync(async (data: IInsight[]): Promise<void> => {
+    if (!this.secret || !this.user || !data || data.length === 0) {
+      return;
+    }
+  
+    try {
+      const payload = [{
+        user: this.__getUserInfo(),
+        variations: data.filter(d => d.insightType === InsightType.featureFlagUsage).map(v => ({
+          featureFlagKey: v.id,
+          sendToExperiment: v.sendToExperiment,
+          timestamp: v.timestamp,
+          variation: {
+            id: v.variation!.id,
+            value: v.variation!.value
+          }
+        })),
+        metrics: data.filter(d => d.insightType !== InsightType.featureFlagUsage).map(d => ({
+          route: location.pathname,
+          timestamp: d.timestamp,
+          numericValue: d.numericValue === null || d.numericValue === undefined? 1 : d.numericValue,
+          appType: this.appType,
+          eventName: d.eventName,
+          type: d.type
+        }))
+      }];
+  
+      await post(`${this.eventsUri}/api/public/insight/track`, payload, { Authorization: this.secret });
+    } catch (err) {
+      logger.logDebug(err);
+    }
+  })
+}
+
+export const networkService = new NetworkService();
+
+export async function post(url: string = '', data: any = {}, headers: { [key: string]: string } = {}) {
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: Object.assign({
+        'Content-Type': 'application/json'
+      }, headers),
+      body: JSON.stringify(data) // body data type must match "Content-Type" header
+    });
+
+    return response.status === 200 ? response.json() : {};
+  } catch (err) {
+    logger.logDebug(err);
+    return {};
+  }
+}
+
+export async function get(url: string = '', headers: { [key: string]: string } = {}) {
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: Object.assign({
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+      }, headers)
+    });
+
+    return response.status === 200 ? response.json() : {};
+  } catch (err) {
+    logger.logDebug(err);
+    return null;
+  }
+}

package/src/optionMessages.ts

@@ -0,0 +1,13 @@
+export default class OptionMessages {
+  static partialEndpoint(name: string): string {
+    return `You have set custom uris without specifying the ${ name } URI; connections may not work properly`;
+  }
+
+  static invalidParam(name: string): string {
+    return `The ${ name } option is not passed in or its value is invalid`;
+  }
+
+  static mandatory(name: string): string {
+    return `${ name } is mandatory`;
+  }
+}

package/src/queue.ts

@@ -0,0 +1,23 @@
+import { eventHub } from "./events";
+
+export class Queue<T> {
+    private queue: T[];
+    // flushLimit === 0 means no limit
+    // and 
+    constructor(private flushLimit: number = 0, private arriveflushLimitTopic: string = '') {
+        this.queue = [];
+    }
+
+    add(element: T): void {
+        this.queue.push(element);
+        if (this.flushLimit > 0 && this.queue.length >= this.flushLimit) {
+            eventHub.emit(this.arriveflushLimitTopic, {});
+        }
+    }
+
+    flush(): T[] {
+        const allElements = [...this.queue];
+        this.queue = [];
+        return allElements;
+    }
+}