feat: [FFM-10880]: Allow logger to be overridden (#118)

Author: knagurski

Diff for: README.md

@@ -57,6 +57,7 @@ interface Options {
   streamEnabled?: boolean
   debug?: boolean,
   cache?: boolean | CacheOptions
+  logger?: Logger
 }
 ```
 
@@ -303,6 +304,38 @@ interface Evaluation {
 }
 ```
 
+## Logging
+By default, the Javascript Client SDK will log errors and debug messages using the `console` object. In some cases, it
+can be useful to instead log to a service or silently fail without logging errors.
+
+```typescript
+const myLogger = {
+  debug: (...data) => {
+    // do something with the logged debug message
+  },
+  info: (...data) => {
+    // do something with the logged info message
+  },
+  error: (...data) => {
+    // do something with the logged error message
+  },
+  warn: (...data) => {
+    // do something with the logged warning message
+  }
+}
+
+const client = initialize(
+  '00000000-1111-2222-3333-444444444444',
+  {
+    identifier: YOUR_TARGET_IDENTIFIER,
+    name: YOUR_TARGET_NAME
+  },
+  {
+    logger: myLogger // override logger
+  }
+)
+```
+
 ## Import directly from unpkg
 
 In case you want to import this library directly (without having to use npm or yarn):

Diff for: examples/preact/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@harnessio/ff-javascript-client-sdk",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "author": "Harness",
   "license": "Apache-2.0",
   "main": "dist/sdk.cjs.js",

Diff for: examples/react-redux/package-lock.json

@@ -2,16 +2,19 @@ import Poller from '../poller'
 import type { FetchFlagsResult, Options } from '../types'
 import { getRandom } from '../utils'
 import { Event } from '../types'
+import type { Emitter } from 'mitt'
 
 jest.useFakeTimers()
 
 jest.mock('../utils.ts', () => ({
-  getRandom: jest.fn(),
-  logError: jest.fn()
+  getRandom: jest.fn()
 }))
 
-const mockEventBus = {
-  emit: jest.fn()
+const mockEventBus: Emitter = {
+  emit: jest.fn(),
+  on: jest.fn(),
+  off: jest.fn(),
+  all: new Map()
 }
 
 interface PollerArgs {
@@ -27,6 +30,9 @@ interface TestArgs {
   delayMs: number
 }
 
+const logError = jest.fn()
+const logDebug = jest.fn()
+
 let currentPoller: Poller
 const getPoller = (overrides: Partial<PollerArgs> = {}): Poller => {
   const args: PollerArgs = {
@@ -36,7 +42,7 @@ const getPoller = (overrides: Partial<PollerArgs> = {}): Poller => {
     ...overrides
   }
 
-  currentPoller = new Poller(args.fetchFlags, args.configurations, args.eventBus)
+  currentPoller = new Poller(args.fetchFlags, args.configurations, args.eventBus, logDebug, logError)
 
   return currentPoller
 }
@@ -47,7 +53,7 @@ const getTestArgs = (overrides: Partial<TestArgs> = {}): TestArgs => {
   return {
     delayMs,
     delayFunction: (getRandom as jest.Mock).mockReturnValue(delayMs),
-    logSpy: jest.spyOn(console, 'debug').mockImplementation(() => {}),
+    logSpy: logDebug,
     mockError: new Error('Fetch Error'),
     ...overrides
   }
@@ -58,6 +64,7 @@ describe('Poller', () => {
     currentPoller.stop()
     jest.clearAllMocks()
   })
+
   it('should not start polling if it is already polling', () => {
     getPoller({ configurations: { debug: true } })
     const testArgs = getTestArgs()

Diff for: examples/react/package-lock.json

@@ -1,18 +1,21 @@
 import { getConfiguration, MIN_EVENTS_SYNC_INTERVAL, MIN_POLLING_INTERVAL } from '../utils'
+import type { Logger } from '../types'
 
 describe('utils', () => {
   describe('getConfiguration', () => {
     test('it should set defaults', async () => {
-      expect(getConfiguration({})).toEqual({
-        debug: false,
-        baseUrl: 'https://config.ff.harness.io/api/1.0',
-        eventUrl: 'https://events.ff.harness.io/api/1.0',
-        eventsSyncInterval: MIN_EVENTS_SYNC_INTERVAL,
-        pollingInterval: MIN_POLLING_INTERVAL,
-        streamEnabled: true,
-        pollingEnabled: true,
-        cache: false
-      })
+      expect(getConfiguration({})).toEqual(
+        expect.objectContaining({
+          debug: false,
+          baseUrl: 'https://config.ff.harness.io/api/1.0',
+          eventUrl: 'https://events.ff.harness.io/api/1.0',
+          eventsSyncInterval: MIN_EVENTS_SYNC_INTERVAL,
+          pollingInterval: MIN_POLLING_INTERVAL,
+          streamEnabled: true,
+          pollingEnabled: true,
+          cache: false
+        })
+      )
     })
 
     test('it should enable polling when streaming is enabled', async () => {
@@ -54,5 +57,24 @@ describe('utils', () => {
     test('it should allow pollingInterval to be set above 60s', async () => {
       expect(getConfiguration({ pollingInterval: 100000 })).toHaveProperty('pollingInterval', 100000)
     })
+
+    test('it should use console as a logger by default', async () => {
+      expect(getConfiguration({})).toHaveProperty('logger', console)
+    })
+
+    test('it should allow the default logger to be overridden', async () => {
+      const logger: Logger = {
+        debug: jest.fn(),
+        error: jest.fn(),
+        info: jest.fn(),
+        warn: jest.fn()
+      }
+
+      const result = getConfiguration({ logger })
+      expect(result).toHaveProperty('logger', logger)
+
+      result.logger.debug('hello')
+      expect(logger.debug).toHaveBeenCalledWith('hello')
+    })
   })
 })

Diff for: package-lock.json

@@ -15,7 +15,7 @@ import type {
   VariationValue
 } from './types'
 import { Event } from './types'
-import { defer, getConfiguration, logError } from './utils'
+import { defer, getConfiguration } from './utils'
 import { addMiddlewareToFetch } from './request'
 import { Streamer } from './stream'
 import { getVariation } from './variation'
@@ -30,29 +30,6 @@ const fetch = globalThis.fetch
 // Flag to detect is Proxy is supported (not under IE 11)
 const hasProxy = !!globalThis.Proxy
 
-const convertValue = (evaluation: Evaluation) => {
-  let { value } = evaluation
-
-  try {
-    switch (evaluation.kind.toLowerCase()) {
-      case 'int':
-      case 'number':
-        value = Number(value)
-        break
-      case 'boolean':
-        value = value.toString().toLowerCase() === 'true'
-        break
-      case 'json':
-        value = JSON.parse(value as string)
-        break
-    }
-  } catch (error) {
-    logError(error)
-  }
-
-  return value
-}
-
 const initialize = (apiKey: string, target: Target, options?: Options): Result => {
   let closed = false
   let environment: string
@@ -79,10 +56,37 @@ const initialize = (apiKey: string, target: Target, options?: Options): Result =
 
   const logDebug = (message: string, ...args: any[]) => {
     if (configurations.debug) {
-      // tslint:disable-next-line:no-console
-      console.debug(`[FF-SDK] ${message}`, ...args)
+      configurations.logger.debug(`[FF-SDK] ${message}`, ...args)
+    }
+  }
+
+  const logError = (message: string, ...args: any[]) => {
+    configurations.logger.error(`[FF-SDK] ${message}`, ...args)
+  }
+
+  const convertValue = (evaluation: Evaluation) => {
+    let { value } = evaluation
+
+    try {
+      switch (evaluation.kind.toLowerCase()) {
+        case 'int':
+        case 'number':
+          value = Number(value)
+          break
+        case 'boolean':
+          value = value.toString().toLowerCase() === 'true'
+          break
+        case 'json':
+          value = JSON.parse(value as string)
+          break
+      }
+    } catch (error) {
+      logError(error)
     }
+
+    return value
   }
+
   const updateMetrics = (metricsInfo: MetricsInfo) => {
     if (metricsCollectorEnabled) {
       const now = Date.now()
@@ -460,7 +464,7 @@ const initialize = (apiKey: string, target: Target, options?: Options): Result =
   }
 
   // We instantiate the Poller here so it can be used as a fallback for streaming, but we don't start it yet.
-  poller = new Poller(fetchFlags, configurations, eventBus)
+  poller = new Poller(fetchFlags, configurations, eventBus, logDebug, logError)
 
   const startStream = () => {
     const handleFlagEvent = (event: StreamEvent): void => {
@@ -526,13 +530,23 @@ const initialize = (apiKey: string, target: Target, options?: Options): Result =
 
     const url = `${configurations.baseUrl}/stream?cluster=${clusterIdentifier}`
 
-    eventSource = new Streamer(eventBus, configurations, url, apiKey, standardHeaders, poller, event => {
-      if (event.domain === 'flag') {
-        handleFlagEvent(event)
-      } else if (event.domain === 'target-segment') {
-        handleSegmentEvent(event)
+    eventSource = new Streamer(
+      eventBus,
+      configurations,
+      url,
+      apiKey,
+      standardHeaders,
+      poller,
+      logDebug,
+      logError,
+      event => {
+        if (event.domain === 'flag') {
+          handleFlagEvent(event)
+        } else if (event.domain === 'target-segment') {
+          handleSegmentEvent(event)
+        }
       }
-    })
+    )
     eventSource.start()
   }
 

Diff for: package.json

@@ -1,6 +1,7 @@
 import type { Options } from './types'
-import { getRandom, logError } from './utils'
+import { getRandom } from './utils'
 import { Event, FetchFlagsResult } from './types'
+import type { Emitter } from 'mitt'
 
 export default class Poller {
   private timeoutId: any
@@ -10,20 +11,21 @@ export default class Poller {
   constructor(
     private fetchFlagsFn: () => Promise<FetchFlagsResult>,
     private configurations: Options,
-    private eventBus: any
-  ) // Used to emit the updates retrieved in polling intervals
-  {}
+    private eventBus: Emitter, // Used to emit the updates retrieved in polling intervals
+    private logDebug: (...data: any[]) => void,
+    private logError: (...data: any[]) => void
+  ) {}
 
   public start(): void {
     if (this.isPolling()) {
-      this.logDebug('Already polling.')
+      this.logDebugMessage('Already polling.')
       return
     }
 
     this.isRunning = true
     this.eventBus.emit(Event.POLLING)
 
-    this.logDebug(`Starting poller, first poll will be in ${this.configurations.pollingInterval}ms`)
+    this.logDebugMessage(`Starting poller, first poll will be in ${this.configurations.pollingInterval}ms`)
 
     // Don't start polling immediately as we have already fetched flags on client initialization
     this.timeoutId = setTimeout(() => this.poll(), this.configurations.pollingInterval)
@@ -40,21 +42,23 @@ export default class Poller {
       const result = await this.fetchFlagsFn()
 
       if (result.type === 'success') {
-        this.logDebug(`Successfully polled for flag updates, next poll in ${this.configurations.pollingInterval}ms. `)
+        this.logDebugMessage(
+          `Successfully polled for flag updates, next poll in ${this.configurations.pollingInterval}ms. `
+        )
         return
       }
 
-      logError('Error when polling for flag updates', result.error)
+      this.logErrorMessage('Error when polling for flag updates', result.error)
 
       // Retry fetching flags
       if (attempt >= this.maxAttempts) {
-        this.logDebug(
+        this.logDebugMessage(
           `Maximum attempts reached for polling for flags. Next poll in ${this.configurations.pollingInterval}ms.`
         )
         return
       }
 
-      this.logDebug(
+      this.logDebugMessage(
         `Polling for flags attempt #${attempt} failed. Remaining attempts: ${this.maxAttempts - attempt}`,
         result.error
       )
@@ -70,17 +74,21 @@ export default class Poller {
       this.timeoutId = undefined
       this.isRunning = false
       this.eventBus.emit(Event.POLLING_STOPPED)
-      this.logDebug('Polling stopped')
+      this.logDebugMessage('Polling stopped')
     }
   }
 
   public isPolling(): boolean {
     return this.isRunning
   }
 
-  private logDebug(message: string, ...args: unknown[]): void {
+  private logDebugMessage(message: string, ...args: unknown[]): void {
     if (this.configurations.debug) {
-      console.debug(`[FF-SDK] Poller: ${message}`, ...args)
+      this.logDebug(`Poller: ${message}`, ...args)
     }
   }
+
+  private logErrorMessage(message: string, ...args: unknown[]): void {
+    this.logError(`Poller: ${message}`, ...args)
+  }
 }

Diff for: src/__tests__/poller.test.ts

@@ -1,32 +1,28 @@
-import { Event, StreamEvent } from './types'
-import { getRandom, logError } from './utils'
+import { Event, type Options, StreamEvent } from './types'
+import { getRandom } from './utils'
 import type Poller from './poller'
+import type { Emitter } from 'mitt'
 
 const SSE_TIMEOUT_MS = 30000
 
 export class Streamer {
-  private readonly eventBus: any
-  private readonly configurations: any
-  private readonly url: string
-  private readonly standardHeaders: any
-  private readonly apiKey: string
-  private readonly eventCallback: any
   private xhr: XMLHttpRequest
   private closed: boolean = false
   private readTimeoutCheckerId: any
-  private fallbackPoller: Poller
   private connectionOpened = false
   private disconnectEventEmitted = false
 
-  constructor(eventBus, configurations, url, apiKey, standardHeaders, fallbackPoller, eventCallback) {
-    this.eventBus = eventBus
-    this.configurations = configurations
-    this.url = url
-    this.apiKey = apiKey
-    this.standardHeaders = standardHeaders
-    this.eventCallback = eventCallback
-    this.fallbackPoller = fallbackPoller
-  }
+  constructor(
+    private eventBus: Emitter,
+    private configurations: Options,
+    private url: string,
+    private apiKey: string,
+    private standardHeaders: Record<string, string>,
+    private fallbackPoller: Poller,
+    private logDebug: (...data: any[]) => void,
+    private logError: (...data: any[]) => void,
+    private eventCallback: (e: StreamEvent) => void
+  ) {}
 
   start() {
     const processData = (data: any): void => {
@@ -36,20 +32,20 @@ export class Streamer {
     const processLine = (line: string): void => {
       if (line.startsWith('data:')) {
         const event: StreamEvent = JSON.parse(line.substring(5))
-        this.logDebug('Received event from stream: ', event)
+        this.logDebugMessage('Received event from stream: ', event)
         this.eventCallback(event)
       }
     }
 
     const onConnected = () => {
-      this.logDebug('Stream connected')
+      this.logDebugMessage('Stream connected')
       this.eventBus.emit(Event.CONNECTED)
     }
 
     const onDisconnect = () => {
       clearInterval(this.readTimeoutCheckerId)
       const reconnectDelayMs = getRandom(1000, 10000)
-      this.logDebug('Stream disconnected, will reconnect in ' + reconnectDelayMs + 'ms')
+      this.logDebugMessage('Stream disconnected, will reconnect in ' + reconnectDelayMs + 'ms')
       if (!this.disconnectEventEmitted) {
         this.eventBus.emit(Event.DISCONNECTED)
         this.disconnectEventEmitted = true
@@ -59,7 +55,7 @@ export class Streamer {
 
     const onFailed = (msg: string) => {
       if (!!msg) {
-        logError('Stream has issue', msg)
+        this.logErrorMessage('Stream has issue', msg)
       }
 
       // Fallback to polling while we have a stream failure
@@ -77,7 +73,7 @@ export class Streamer {
       ...this.standardHeaders
     }
 
-    this.logDebug('SSE HTTP start request', this.url)
+    this.logDebugMessage('SSE HTTP start request', this.url)
 
     this.xhr = new XMLHttpRequest()
     this.xhr.open('GET', this.url)
@@ -91,7 +87,7 @@ export class Streamer {
     }
     this.xhr.onabort = () => {
       this.connectionOpened = false
-      this.logDebug('SSE aborted')
+      this.logDebugMessage('SSE aborted')
       if (!this.closed) {
         onFailed(null)
       }
@@ -132,14 +128,14 @@ export class Streamer {
       lastActivity = Date.now()
       const data = this.xhr.responseText.slice(offset)
       offset += data.length
-      this.logDebug('SSE GOT: ' + data)
+      this.logDebugMessage('SSE GOT: ' + data)
       processData(data)
     }
 
     this.readTimeoutCheckerId = setInterval(() => {
       // this task will kill and restart the SSE connection if no data or heartbeat has arrived in a while
       if (lastActivity < Date.now() - SSE_TIMEOUT_MS) {
-        logError('SSE read timeout')
+        this.logErrorMessage('SSE read timeout')
         this.xhr.abort()
       }
     }, SSE_TIMEOUT_MS)
@@ -163,21 +159,25 @@ export class Streamer {
 
   private fallBackToPolling() {
     if (!this.fallbackPoller.isPolling() && this.configurations.pollingEnabled) {
-      this.logDebug('Falling back to polling mode while stream recovers')
+      this.logDebugMessage('Falling back to polling mode while stream recovers')
       this.fallbackPoller.start()
     }
   }
 
   private stopFallBackPolling() {
     if (this.fallbackPoller.isPolling()) {
-      this.logDebug('Stopping fallback polling mode')
+      this.logDebugMessage('Stopping fallback polling mode')
       this.fallbackPoller.stop()
     }
   }
 
-  private logDebug(message: string, ...args: unknown[]): void {
+  private logDebugMessage(message: string, ...args: unknown[]): void {
     if (this.configurations.debug) {
-      console.debug(`[FF-SDK] Streaming:  ${message}`, ...args)
+      this.logDebug(`Streaming:  ${message}`, ...args)
     }
   }
+
+  private logErrorMessage(message: string, ...args: unknown[]): void {
+    this.logError(`Streaming:  ${message}`, ...args)
+  }
 }

Diff for: src/__tests__/utils.test.ts

@@ -139,6 +139,11 @@ export interface Options {
    * @default false
    */
   cache?: boolean | CacheOptions
+  /**
+   * Logger to use instead of the default console.log, console.error and console.info functions
+   * @default console
+   */
+  logger?: Logger
 }
 
 export interface MetricsInfo {
@@ -173,3 +178,10 @@ export interface CacheOptions {
    */
   storage?: AsyncStorage | SyncStorage
 }
+
+export interface Logger {
+  debug: (...data: any[]) => void
+  error: (...data: any[]) => void
+  warn: (...data: any[]) => void
+  info: (...data: any[]) => void
+}

Diff for: src/index.ts

@@ -28,12 +28,13 @@ export const getConfiguration = (options: Options): Options => {
     config.pollingInterval = MIN_POLLING_INTERVAL
   }
 
+  if (!config.logger || !config.logger.debug || !config.logger.error || !config.logger.info || !config.logger.warn) {
+    config.logger = console
+  }
+
   return config
 }
 
-// tslint:disable-next-line:no-console
-export const logError = (message: string, ...args: any[]) => console.error(`[FF-SDK] ${message}`, ...args)
-
 export const defer = (fn: Function, doDefer = true): void => {
   if (doDefer) {
     setTimeout(fn, 0)