Frontend Logging - MVP

src/App.vue

@@ -1,8 +1,8 @@
 <template>
-    <router-view v-slot="{ Component }">
+    <router-view v-slot="{ Component }" ref="router-view">
         <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
             <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
-            <component :is="Component" @focusin="handleAnyComponentFocus" />
+            <component :is="Component" ref="component" @focusin="handleAnyComponentFocus" />
         </transition>
     </router-view>
     <loadingModal :showLoader="shouldShowLoader" :showTextCarousel="shouldShowTextCarousel" />

src/constants/application-config.js

@@ -28,6 +28,8 @@ const applicationConfig = {
     YAHOO_CALENDAR: "https://calendar.yahoo.com/?v=60",
     OUTLOOK_CALENDAR:
         "https://outlook.office.com/calendar/deeplink/compose?path=/calendar/action/compose&rru=addevent",
+    FRONTEND_LOGGER_URL:
+        process.env.VUE_APP_CONSUMER_CF_DISTRO + "/analytics/api/v1/logging"
 };
 
 export { applicationConfig };

src/constants/logger.js

@@ -1,6 +0,0 @@
-const logEntryTypes = {
-    information: "info",
-    warning: "warn",
-    error: "fail",
-    critical: "crit",
-};

src/constants/logging-endpoint-methods.js

@@ -0,0 +1,8 @@
+const loggingEndpointMethods = {
+    LOG_INFORMATION: "log-information",
+    LOG_WARNING: "log-warning",
+    LOG_ERROR: "log-error",
+    LOG_CRITICAL: "log-critical",
+};
+
+export default loggingEndpointMethods;

src/constants/logging-endpoints.js

@@ -1,8 +0,0 @@
-const loggingEndpoints = {
-    LOG_INFORMATION: '/analytics/api/v1/analytics/log-information',
-    LOG_WARNING: '/analytics/api/v1/analytics/log-warning',
-    LOG_ERROR: '/analytics/api/v1/analytics/log-error',
-    LOG_CRITICAL: '/analytics/api/v1/analytics/log-critical',
-}
-
-export default loggingEndpoints;

src/global-methods.js

@@ -99,7 +99,7 @@ export default {
                         );
                     }
 
-                    global.$logger.logError(`${method}: ${endpoint}`, error);
+                    global.$logger.logError(`${method}: ${endpoint}: ${error.message}`, error);
  
                     return reject(error);
                 }

src/helpers/logger.js

@@ -1,43 +1,47 @@
-import loggingEndpoints from "@/constants/logging-endpoints"
 import { applicationConfig } from "@/constants/application-config.js";
 import axios from "axios";
 import store from "@/store";
+import loggingEndpointMethods from "@/constants/logging-endpoint-methods";
 
 import { headerKeys } from "@/constants/header-keys";
 
 export class Logger {
     logInformation(message, details) {
-        this.writeLogEntry(loggingEndpoints.LOG_INFORMATION, this.formatLogEntry(message, details));
+        this.writeLogEntry(loggingEndpointMethods.LOG_INFORMATION, this.formatLogEntry(message, details));
     }
 
     logWarning(message, details) {
-        this.writeLogEntry(loggingEndpoints.LOG_WARNING, this.formatLogEntry(message, details));
+        this.writeLogEntry(loggingEndpointMethods.LOG_WARNING, this.formatLogEntry(message, details));
     }
 
     logError(message, details) {
-        this.writeLogEntry(loggingEndpoints.LOG_ERROR, this.formatLogEntry(message, details));
+        this.writeLogEntry(loggingEndpointMethods.LOG_ERROR, this.formatLogEntry(message, details));
     }
 
     logCritical(message, details) {
-        this.writeLogEntry(loggingEndpoints.LOG_CRITICAL, this.formatLogEntry(message, details));
+        this.writeLogEntry(loggingEndpointMethods.LOG_CRITICAL, this.formatLogEntry(message, details));
     }
 
     formatLogEntry(message, details) {
-        return `${message}\n${details ? JSON.stringify(details, undefined, 2) : ""}`;
+        return `Application: ${applicationConfig.APPLICATION_NAME}\n${message}\n${details ? JSON.stringify(details, undefined, 2) : ""}`;
     }
 
     writeLogEntry(endpoint, logEntry) {
         return new Promise((resolve, reject) => {
+            // If running locally or in the Dev environment show the log entries in the console.
+            if (applicationConfig.CURRENT_ENVIRONMENT === "Localhost" || applicationConfig.CURRENT_ENVIRONMENT === "Dev") {
+                console.log(logEntry);
+            }
+
             const url = applicationConfig.FRONTEND_LOGGER_URL;
-            const payload = Object.assign({}, payload);
             const headers = {
                 [headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
             };
 
             axios({
                 method: "POST",
-                url: `${url}${endpoint}`,
+                url: `${url}/${endpoint}`,
-                data: logEntry,
+                data: { entry: logEntry },
                 crossDomain: true,
                 responseType: {},
                 headers: headers,
@@ -50,13 +54,7 @@ export class Logger {
                 }
             );
         });
-
-    }
-
-    saveLogEntry(logEntry) {
-        console.log(logEntry);
     }
 }
 
 export default Logger;
-

src/main.js

@@ -26,15 +26,7 @@ vueApp.mixin(experimentMixin);
 
 // Vue Error Handling
 vueApp.config.errorHandler = (err, vm, info) => {
-    global.$logger.logError(err.message, {
+    global.$logger.logError(`Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`);
-        info: info,
-        vm: vm,
-    });
 };
 
-// Vue Router Error Handling
-router.onError((err) => {   
-    global.$logger.logError(err.message, err.cause);
-});
-
 vueApp.mount("#app");

src/router/index.js

@@ -152,9 +152,7 @@ const routes = [
                     params: to.params,
                 });
             } catch (error) {
-                console.log(error);
+                global.$logger.logError(`Routing ${error.stack}`);
-
-                global.$logger.logError(error);
 
                 if (to.query?.fmgPage === funnelStartPageName) {
                     deleteFunnelCookie();

src/store/index.js

@@ -1125,9 +1125,6 @@ export const actions = {
             .then(
                 (response) => {
                     return response;
-                },
-                (error) => {
-                    console.log("Analytics Service Error: " + error.data);
                 }
             );
     },
@@ -1175,9 +1172,6 @@ export const actions = {
             .then(
                 (response) => {
                     return response;
-                },
-                (error) => {
-                    console.log("Analytics Service Error: " + error.data);
                 }
             );
     },
@@ -1203,9 +1197,6 @@ export const actions = {
             .then(
                 (response) => {
                     return response;
-                },
-                (error) => {
-                    console.log("Analytics Service Error: " + error.data);
                 }
             );
     },