more generalised code

Author: Ujjwal Mishra

dist/main.js

@@ -1,25 +1,21 @@
 class ApiLogger {
+
   constructor(limit) {
     if (window.apiLogger) {
       return window.apiLogger;
     }
     const errorQueue = this.getErrorQueueFromStorage();
-    if (limit && errorQueue && errorQueue.limit) {
-      console.log(
-        `ApiLogger has already a limit. please use changeLimit function from Logger Instance.`
-      )
-    }
     errorQueue.limit = errorQueue.limit || limit || 50;
-    this.limit = errorQueue.limit || limit || 50;
     this.count = errorQueue.errors.length || 0;
     this.errorQueue = errorQueue;
     window.apiLogger = this;
     this.wrappedFetch = this.wrappedFetch.bind(this);
     this.originalFetch = window.fetch;
+    if (errorQueue.limit !== limit) this.changeLimit(limit);
   }
 
   push(value) {
-    if (this.count === this.limit) this.pop();
+    if (this.count === this.errorQueue.limit) this.pop();
     this.errorQueue.errors.push(value);
     this.count++;
     this.updateErrorQueueInStorage();
@@ -30,7 +26,12 @@ class ApiLogger {
   }
 
   updateErrorQueueInStorage() {
-    localStorage.setItem('errorQueue', JSON.stringify(this.errorQueue));
+    try {
+      localStorage.setItem('errorQueue', JSON.stringify(this.errorQueue));
+    } catch (e){
+      console.error(e);
+      console.log('Error while updating localstorage.');
+    }
   }
 
   pop() {
@@ -39,31 +40,48 @@ class ApiLogger {
     this.count--;
   }
 
+  getBody(body) {
+    let newBody = null;
+    try {
+      newBody = JSON.parse(body);
+    } catch (err) {
+      newBody = body;
+    }
+    return newBody;
+  }
+
   wrappedFetch () {
     const store = this;
     return new Promise((resolve, reject) => {
-      const [url, { method, body }] = arguments;
+      let [url, options] = arguments;
+      let { body, method } = options || {};
+
       this.originalFetch.apply(window, arguments)
         .then((response) => {
           if (response && response.status >= 400) {
-            let reqData = null;
-            if (typeof body === 'object') {
-               reqData = body && this.truncateString(JSON.stringify(body), 50);
-            } else if (typeof body === 'string') {
-               reqData = this.truncateString(body, 50);
+            body = body && this.getBody(body);
+            const contentType = response.headers.get("content-type");
+            const logData = {
+              id: new Date().getTime(),
+              url,
+              method,
+              body,
+              status: response.status,
+              contentType: response.headers.get("content-type")
             }
-            response.text().then((text) => {
-              store.push({
-                id: new Date().getTime(),
-                url,
-                method,
-                body: reqData,
-                response: this.truncateString(text, 50),
-                status: response.status,
-                contentType: response.headers.get("content-type")
+            if (contentType && contentType.includes("application/json")) {
+              return response.json().then((json) => {
+                logData.response = json
+                store.push(logData);
+                resolve(response);
+              });
+            } else {
+              response.text().then((text) => {
+                logData.response = text;
+                store.push(logData);
+                resolve(response);
               });
-              resolve(response);
-            });
+            }
           } else {
             resolve(response);
           }
@@ -84,8 +102,10 @@ class ApiLogger {
   }
 
   changeLimit(limit) {
+    if (this.errorQueue.errors.length > limit) {
+      this.errorQueue.errors = this.errorQueue.errors.slice(this.errorQueue.errors.length - limit)
+    }
     this.errorQueue.limit = limit;
-    this.limit = limit;
     this.updateErrorQueueInStorage();
   }
 }

src/index.js

@@ -11,7 +11,7 @@ describe('Http Failures', function() {
       global.localStorage.clear();
     });
     it('should store 400 response', function(done) {
-      apiLogger.wrappedFetch('http://httpbin.org/status/400', { method: 'get' }).then(() => {
+      apiLogger.wrappedFetch('http://httpbin.org/status/400').then(() => {
         let errorQueue = JSON.parse(global.localStorage.getItem('errorQueue'));
         if (errorQueue && errorQueue.errors[0].status === 400) done();
         else done({ message: 'Did not log in localstoarge'});
@@ -20,12 +20,11 @@ describe('Http Failures', function() {
     it('should store any response data in text format with turncated value', function(done) {
       apiLogger.wrappedFetch('http://httpbin.org/html/status/401', { method: 'get' }).then(() => {
         const errorQueue = JSON.parse(global.localStorage.getItem('errorQueue'));
-        const error = errorQueue.errors[1]
+        const error = errorQueue.errors[1];
         if (
           errorQueue &&
           error.status === 404 &&
-          error.response.indexOf(`<!DOCTYPE HTML PUBLIC`) === 0 &&
-          error.response.length === 53
+          error.response.indexOf(`<!DOCTYPE HTML PUBLIC`) === 0
         ) done();
         else done({ message: 'Did not log in localstoarge'});
       });