Implemented: support for vue-logger-plugin

.env.example

@@ -2,4 +2,5 @@ VUE_APP_I18N_LOCALE=en
 VUE_APP_I18N_FALLBACK_LOCALE=en
 VUE_APP_CACHE_MAX_AGE=3600
 VUE_APP_VIEW_SIZE=10
-VUE_APP_PERMISSION_ID=
+VUE_APP_PERMISSION_ID=
+VUE_APP_DEFAULT_LOG_LEVEL="error"

package.json

@@ -29,6 +29,7 @@
     "mitt": "^2.1.0",
     "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

@@ -6,6 +6,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { IonSkeletonText } from '@ionic/vue'
+import logger from "@/logger";
 
 export default defineComponent({
   name: "Image",
@@ -54,15 +55,15 @@ export default defineComponent({
             this.imageUrl = this.src;
           }).catch(() => {
             this.imageUrl = require("@/assets/images/defaultImage.png") ;
-            console.error("Image doesn't exist");
+            logger.error("Image doesn't exist");
           })
         } 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");
+            logger.error("Image doesn't exist");
           })
         }
       }

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) => {
+      // 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

@@ -27,11 +27,15 @@ import "./theme/variables.css";
 import i18n from "./i18n"
 import store from "./store"
 import { DateTime } from "luxon";
+import logger from './logger';
 
 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/orderRouting/actions.ts

@@ -4,6 +4,7 @@ import OrderRoutingState from "./OrderRoutingState"
 import { OrderRoutingService } from "@/services/RoutingService"
 import { hasError, showToast, sortSequence } from "@/utils"
 import * as types from './mutation-types'
+import logger from "@/logger"
 
 const actions: ActionTree<OrderRoutingState, RootState> = {
   async fetchOrderRoutingGroups({ commit }) {
@@ -20,7 +21,7 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
         throw resp.data
       }
     } catch(err) {
-      console.log(err);
+      logger.error(err);
     }
 
     if(routingGroups.length) {
@@ -44,7 +45,7 @@ const actions: ActionTree<OrderRoutingState, RootState> = {
       }
     } catch(err) {
       showToast("Failed to create brokering run")
-      console.log('err', err)
+      logger.error('err', err)
     }
   }
 }

src/store/modules/user/actions.ts

@@ -5,6 +5,7 @@ import UserState from "./UserState"
 import * as types from "./mutation-types"
 import { hasError, showToast } from "@/utils"
 import { translate } from "@/i18n"
+import logger from "@/logger"
 
 const actions: ActionTree<UserState, RootState> = {
 
@@ -23,17 +24,17 @@ const actions: ActionTree<UserState, RootState> = {
           return resp.data;
         } 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))
     }
   },