Implemented logger using vue logger plugin(#21uxamh)

.env.example

@@ -15,3 +15,4 @@ VUE_APP_BATCH_JOB_ENUMS={"JOB_BKR_ORD_UNF":{"id":"JOB_BKR_ORD_UNF","facilityId":
 VUE_APP_WEBHOOK_ENUMS={"NEW_PRODUCTS":"products/create","DELETE_PRODUCTS":"products/update","NEW_ORDERS":"orders/create","CANCELLED_ORDERS":"orders/cancelled","PAYMENT_STATUS":"orders/paid","RETURNS":"","BULK_OPERATIONS_FINISH":"bulk_operations/finish"}
 VUE_APP_PERMISSION_ID=
 VUE_APP_ALIAS=
+VUE_APP_DEFAULT_LOG_LEVEL="error"

package.json

@@ -33,6 +33,7 @@
     "register-service-worker": "^1.7.1",
     "vue": "^3.2.26",
     "vue-i18n": "~9.1.6",
+    "vue-logger-plugin": "^2.2.3",
     "vue-router": "^4.0.12",
     "vuex": "^4.0.1",
     "vuex-persistedstate": "^4.0.0-beta.3"

src/components/Image.vue

@@ -51,15 +51,15 @@ export default defineComponent({
           this.checkIfImageExists(this.src).then(() => {
             this.imageUrl = this.src;
           }).catch(() => {
-            console.error("Image doesn't exist");
+            this.$log.warn("Image doesn't exist", this.src);
           })
         } else {
           // Image is from resource server, hence append to base resource url, check for existence and assign
           const imageUrl = this.resourceUrl.concat(this.src)
           this.checkIfImageExists(imageUrl).then(() => {
             this.imageUrl = imageUrl;
           }).catch(() => {
-            console.error("Image doesn't exist");
+            this.$log.warn("Image doesn't exist", imageUrl);
           })
         }
       }

src/components/JobHistoryModal.vue

@@ -111,7 +111,7 @@ export default defineComponent({
           this.jobHistory = [];
         }
       } catch(err) {
-        console.error(err);
+        this.$log.error(err);
       }
     }
   },

src/logger/index.ts

@@ -0,0 +1,69 @@
+import { createLogger, StringifyObjectsHook } from 'vue-logger-plugin'
+
+// TODO Implement logic to send logs to server
+// https://github.com/dev-tavern/vue-logger-plugin#sample-custom-hook---leveraging-axios-to-send-logs-to-server
+
+// https://github.com/dev-tavern/vue-logger-plugin#levels
+// Log levels (one of: debug, info, warn, error, log)
+// log <-- error <-- warn <-- info <-- debug
+// (from left to right: least inclusive to most inclusive)
+// const level = (process.env.VUE_APP_DEFAULT_LOG_LEVEL ? process.env.VUE_APP_DEFAULT_LOG_LEVEL : "error") as any;
+
+// Using StringifyObjectsHook as the objects are references and values may change during the code execution
+// https://github.com/dev-tavern/vue-logger-plugin#built-in-hooks
+// StringifyObjectsHook Applies JSON.stringify on all objects provided as arguments to a logging method.
+// StringifyAndParseObjectsHook Applies JSON.stringify and JSON.parse on all objects provided as arguments to a logging method.
+
+// enabled vs consoleEnabled
+// Setting enabled to false will disable all logger functionality (console output + hook invocations).
+// Setting consoleEnabled to false will disable just the console output but will still invoke the hooks.
+
+const logger = createLogger({
+  enabled: true,
+  beforeHooks: [ StringifyObjectsHook ]
+});
+
+function getStack(error: any) {
+  // Handling incompatibilities
+  // Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. 
+  // There may also be large incompatibilities between implementations and the behavior may change in the future.
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack
+  try {
+    return error.stack;
+  } catch (err) {
+    logger.warn("Error stack is not supported");
+  }
+  return error;
+}
+
+export default {
+  install(app: any, options: any) {
+
+    app.config.errorHandler = (error: any, instance: any, info: any) => {
+      // TODO Improve code to add more information related to code failed
+      logger.error("Global handler:" + getStack(error));
+    }
+    const level = options.level ? options.level : "error"
+
+    logger.apply({
+      level
+    })
+
+    logger.install(app);
+  },
+  debug(...args: any): void {
+    logger.debug(...args)
+  },
+  info(...args: any): void {
+    logger.info(...args)
+  },
+  warn(...args: any): void {
+    logger.warn(...args)
+  },
+  error(...args: any): void {
+    logger.error(...args)
+  },
+  log(...args: any): void {
+    logger.log(...args)
+  }
+}

src/main.ts

@@ -3,6 +3,7 @@ import App from './App.vue'
 import router from './router';
 import './registerServiceWorker'
 import { DateTime } from 'luxon';
+import logger from './logger';
 
 
 import { IonicVue } from '@ionic/vue';
@@ -34,6 +35,9 @@ const app = createApp(App)
   .use(IonicVue, {
     mode: 'md'
   })
+  .use(logger, {
+    level: process.env.VUE_APP_DEFAULT_LOG_LEVEL
+  })
   .use(router)
   .use(i18n)
   .use(store);

src/store/modules/job/actions.ts

@@ -7,6 +7,7 @@ import { JobService } from '@/services/JobService'
 import { translate } from '@/i18n'
 import { DateTime } from 'luxon';
 import store from '@/store'
+import logger from "@/logger";
 
 const actions: ActionTree<JobState, RootState> = {
 
@@ -111,7 +112,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     }).catch((err) => {
       commit(types.JOB_HISTORY_UPDATED, { jobs: [], total: 0 });
-      console.error(err);
+      logger.error(err);
       showToast(translate("Something went wrong"));
     }) 
   },
@@ -185,7 +186,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     }).catch((err) => {
       commit(types.JOB_RUNNING_UPDATED, { jobs: [], total: 0 });
-      console.error(err);
+      logger.error(err);
       showToast(translate("Something went wrong"));
     }) 
   },
@@ -258,7 +259,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     }).catch((err) => {
       commit(types.JOB_PENDING_UPDATED, { jobs: [], total: 0 });
-      console.error(err);
+      logger.error(err);
       showToast(translate("Something went wrong"));
     })
   },
@@ -309,7 +310,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     } catch (err) {
       commit(types.JOB_MISCELLANEOUS_UPDATED, { jobs: [], total: 0 });
-      console.error(err);
+      logger.error(err);
       showToast(translate("Something went wrong"));
     }
   },
@@ -476,7 +477,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     } catch (err) {
       showToast(translate('Something went wrong'))
-      console.error(err)
+      logger.error(err)
     }
     return resp;
   },
@@ -542,7 +543,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     } catch (err) {
       showToast(translate('Something went wrong'))
-      console.error(err)
+      logger.error(err)
     }
     return {};
   },
@@ -652,7 +653,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     } catch (err) {
       showToast(translate('Something went wrong'))
-      console.error(err)
+      logger.error(err)
     }
     return resp;
   },
@@ -698,7 +699,7 @@ const actions: ActionTree<JobState, RootState> = {
       }
     } catch (err) {
       showToast(translate('Something went wrong'))
-      console.error(err)
+      logger.error(err)
     }
     return resp;
   },
@@ -745,7 +746,7 @@ const actions: ActionTree<JobState, RootState> = {
         return currentJob;
       }
     } catch (err) {
-      console.error(err);
+      logger.error(err);
     }
   },
   setPipelineFilters({ commit, state }, payload) {

src/store/modules/product/actions.ts

@@ -6,6 +6,7 @@ import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import emitter from '@/event-bus'
+import logger from "@/logger";
 
 
 const actions: ActionTree<ProductState, RootState> = {
@@ -40,7 +41,7 @@ const actions: ActionTree<ProductState, RootState> = {
       // Remove added loader only when new query and not the infinite scroll
       if (payload.viewIndex === 0) emitter.emit("dismissLoader");
     } catch(error){
-      console.error(error)
+      logger.error(error)
       showToast(translate("Something went wrong"));
     }
     // TODO Handle specific error

src/store/modules/user/actions.ts

@@ -6,6 +6,7 @@ import * as types from './mutation-types'
 import { hasError, showToast } from '@/utils'
 import { translate } from '@/i18n'
 import { Settings } from 'luxon'
+import logger from "@/logger";
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -40,7 +41,7 @@ const actions: ActionTree<UserState, RootState> = {
             } else {
               const permissionError = 'You do not have permission to access the app.';
               showToast(translate(permissionError));
-              console.error("error", permissionError);
+              logger.error("error", permissionError);
               return Promise.reject(new Error(permissionError));
             }
           } else {
@@ -50,17 +51,17 @@ const actions: ActionTree<UserState, RootState> = {
           }
         } else if (hasError(resp)) {
           showToast(translate('Sorry, your username or password is incorrect. Please try again.'));
-          console.error("error", resp.data._ERROR_MESSAGE_);
+          logger.error("error", resp.data._ERROR_MESSAGE_);
           return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
         }
       } else {
         showToast(translate('Something went wrong'));
-        console.error("error", resp.data._ERROR_MESSAGE_);
+        logger.error("error", resp.data._ERROR_MESSAGE_);
         return Promise.reject(new Error(resp.data._ERROR_MESSAGE_));
       }
     } catch (err: any) {
       showToast(translate('Something went wrong'));
-      console.error("error", err);
+      logger.error("error", err);
       return Promise.reject(new Error(err))
     }
     // return resp
@@ -193,13 +194,13 @@ const actions: ActionTree<UserState, RootState> = {
             commit(types.USER_SHOPIFY_CONFIGS_UPDATED, resp.data.docs);
             commit(types.USER_CURRENT_SHOPIFY_CONFIG_UPDATED, resp.data.docs[0]);
           } else {
-            console.error(resp);
+            logger.error(resp);
             commit(types.USER_SHOPIFY_CONFIGS_UPDATED, []);
             commit(types.USER_CURRENT_SHOPIFY_CONFIG_UPDATED, {});
           }
         }
       } catch (err) {
-        console.error(err);
+        logger.error(err);
         commit(types.USER_SHOPIFY_CONFIGS_UPDATED, []);
         commit(types.USER_CURRENT_SHOPIFY_CONFIG_UPDATED, {});
       }
@@ -264,7 +265,7 @@ const actions: ActionTree<UserState, RootState> = {
         commit(types.USER_INFO_UPDATED, user);
       }
     } catch(error) {
-      console.error(error);
+      logger.error(error);
     }
     return resp;
   },
@@ -304,7 +305,7 @@ const actions: ActionTree<UserState, RootState> = {
         }
       }
     } catch(error) {
-      console.error(error);
+      logger.error(error);
     }
     return resp;
   }

src/store/modules/util/actions.ts

@@ -4,6 +4,7 @@ import RootState from '@/store/RootState'
 import UtilState from './UtilState'
 import * as types from './mutation-types'
 import { hasError } from '@/utils'
+import logger from "@/logger";
 
 const actions: ActionTree<UtilState, RootState> = {
   /**
@@ -25,7 +26,7 @@ const actions: ActionTree<UtilState, RootState> = {
         commit(types.UTIL_SERVICE_STATUS_DESC_UPDATED, resp.data.docs);
       }
     } catch(err) {
-      console.error(err)
+      logger.error(err)
     }
   },
 }

src/store/modules/webhook/actions.ts

@@ -5,6 +5,7 @@ import { WebhookService } from "@/services/WebhookService";
 import { hasError, showToast } from "@/utils";
 import * as types from './mutations-types'
 import { translate } from '@/i18n'
+import logger from "@/logger";
 
 const actions: ActionTree<WebhookState, RootState> = {
   async fetchWebhooks({ commit }) {
@@ -17,7 +18,7 @@ const actions: ActionTree<WebhookState, RootState> = {
         })
         commit(types.WEBHOOK_UPDATED, topics)
       }
-    }).catch(err => console.error(err))
+    }).catch(err => logger.error(err))
   },
   async unsubscribeWebhook({ dispatch }, payload: any) {
 
@@ -29,7 +30,7 @@ const actions: ActionTree<WebhookState, RootState> = {
         showToast(translate("Webhook unsubscribed successfully"));
       }
     } catch(err) {
-      console.error(err)
+      logger.error(err)
       showToast(translate("Something went wrong"));
     } finally {
       dispatch('fetchWebhooks')
@@ -45,11 +46,11 @@ const actions: ActionTree<WebhookState, RootState> = {
         showToast(translate('Webhook subscribed successfully'))
       } else {
         showToast(translate('Something went wrong'))
-        console.error(resp)
+        logger.error(resp)
       }
     } catch (err) {
       showToast(translate('Something went wrong. Unable to subscribe webhook'))
-      console.error(err);
+      logger.error(err);
     } finally {
       await dispatch('fetchWebhooks')
     }

src/views/BulkEditor.vue

@@ -237,7 +237,7 @@ export default defineComponent({
             this.shopifyConfigsForEComStore = [];
           }
         } catch (err) {
-          console.error(err);
+          this.$log.error(err);
         }
       } else {
         this.shopifyConfigsForEComStore = [];