feat: fire event when error is present and http call succeeds (#185)

This PR adds a new event that fires when an error was recorded and the subsequent HTTP call is successful.

### Why
Our React Proxy SDK will set an error based on the error event fired from this SDK when the HTTP call fails. Without this event we have no way to effectively reset this error, because the only event that is fired consistently is the UPDATE event, which is only fired when the response is not 304. This does not cover the case when you intermittently lose connection and the next call succeeds with 304.

### How
We keep track of the sdkState internally in the SDK. When the HTTP calls error we change the state of the SDK to be in an error state. If the internal SDK state is set to error, and the HTTP call is successful we will emit a RECOVERED event that will allow subscribers to clear out stale errors and set the sdkState back to 'healthy'.

README.md

@@ -143,6 +143,8 @@ unleash.on('update', () => {
 - **initialized** - emitted after the SDK has read local cached data in the storageProvider. 
 - **ready** - emitted after the SDK has successfully started and performed the initial fetch towards the Unleash Proxy. 
 - **update** - emitted every time the Unleash Proxy return a new feature toggle configuration. The SDK will emit this event as part of the initial fetch from the SDK.  
+- **recovered** - emitted when the SDK has recovered from an error. This event will only be emitted if the SDK has previously emitted an error.
+- **sent** - emitted when the SDK has successfully sent metrics to Unleash.
 
 > PS! Please remember that you should always register your event listeners before your call `unleash.start()`. If you register them after you have started the SDK you risk loosing important events. 
 

src/index.test.ts

@@ -1573,3 +1573,56 @@ test('Should report metrics', async () => {
     });
     client.stop();
 });
+
+test('Should emit RECOVERED event when sdkStatus is error and status is less than 400', (done) => {
+    const data = { status: 200 }; // replace with the actual data you want to test
+    fetchMock.mockResponseOnce(JSON.stringify(data), { status: 200 });
+
+    const config: IConfig = {
+        url: 'http://localhost/test',
+        clientKey: '12',
+        appName: 'web',
+    };
+
+    const client = new UnleashClient(config);
+
+    client.start();
+
+    client.on(EVENTS.INIT, () => {
+        // Set error after the SDK has moved through the sdk states internally
+        // eslint-disable-next-line
+        // @ts-ignore - Private method by design, but we want to access it in tests
+        client.sdkState = 'error';
+    });
+
+    client.on(EVENTS.RECOVERED, () => {
+        // eslint-disable-next-line
+        // @ts-ignore - Private method by design. but we want to access it in tests
+        expect(client.sdkState).toBe('healthy');
+        client.stop();
+        done();
+    });
+});
+
+test('Should set sdkState to healthy when client is started', (done) => {
+    const config: IConfig = {
+        url: 'http://localhost/test',
+        clientKey: '12',
+        appName: 'web',
+    };
+
+    const client = new UnleashClient(config);
+    // eslint-disable-next-line
+    // @ts-ignore - Private method by design, but we want to access it in tests
+    expect(client.sdkState).toBe('initializing');
+
+    client.start();
+
+    client.on(EVENTS.INIT, () => {
+        // eslint-disable-next-line
+        // @ts-ignore - Private method by design, but we want to access it in tests
+        expect(client.sdkState).toBe('healthy');
+        client.stop();
+        done();
+    });
+});

src/index.ts

@@ -67,6 +67,7 @@ export const EVENTS = {
     UPDATE: 'update',
     IMPRESSION: 'impression',
     SENT: 'sent',
+    RECOVERED: 'recovered',
 };
 
 const IMPRESSION_EVENTS = {
@@ -81,6 +82,8 @@ const defaultVariant: IVariant = {
 };
 const storeKey = 'repo';
 
+type SdkState = 'initializing' | 'healthy' | 'error';
+
 export const resolveFetch = () => {
     try {
         if (typeof window !== 'undefined' && 'fetch' in window) {
@@ -130,6 +133,7 @@ export class UnleashClient extends TinyEmitter {
     private readyEventEmitted = false;
     private usePOSTrequests = false;
     private started = false;
+    private sdkState: SdkState;
 
     constructor({
         storageProvider,
@@ -177,11 +181,13 @@ export class UnleashClient extends TinyEmitter {
         this.refreshInterval = disableRefresh ? 0 : refreshInterval * 1000;
         this.context = { appName, environment, ...context };
         this.usePOSTrequests = usePOSTrequests;
+        this.sdkState = 'initializing';
         this.ready = new Promise((resolve) => {
             this.init()
                 .then(resolve)
                 .catch((error) => {
                     console.error(error);
+                    this.sdkState = 'error';
                     this.emit(EVENTS.ERROR, error);
                     resolve();
                 });
@@ -324,6 +330,8 @@ export class UnleashClient extends TinyEmitter {
             this.toggles = this.bootstrap;
             this.emit(EVENTS.READY);
         }
+
+        this.sdkState = 'healthy';
         this.emit(EVENTS.INIT);
     }
 
@@ -415,11 +423,20 @@ export class UnleashClient extends TinyEmitter {
                     body,
                     signal,
                 });
+                if (this.sdkState === 'error' && response.status < 400) {
+                    this.sdkState = 'healthy';
+                    this.emit(EVENTS.RECOVERED);
+                }
+
                 if (response.ok && response.status !== 304) {
                     this.etag = response.headers.get('ETag') || '';
                     const data = await response.json();
                     await this.storeToggles(data.toggles);
 
+                    if (this.sdkState !== 'healthy') {
+                        this.sdkState = 'healthy';
+                    }
+
                     if (!this.bootstrap && !this.readyEventEmitted) {
                         this.emit(EVENTS.READY);
                         this.readyEventEmitted = true;
@@ -428,13 +445,15 @@ export class UnleashClient extends TinyEmitter {
                     console.error(
                         'Unleash: Fetching feature toggles did not have an ok response'
                     );
+                    this.sdkState = 'error';
                     this.emit(EVENTS.ERROR, {
                         type: 'HttpError',
                         code: response.status,
                     });
                 }
             } catch (e) {
                 console.error('Unleash: unable to fetch feature toggles', e);
+                this.sdkState = 'error';
                 this.emit(EVENTS.ERROR, e);
             } finally {
                 this.abortController = null;