From 3586ae1b94c04b047ce674cdb7149d6ab6f7e77d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 5 Mar 2024 06:43:58 -0500
Subject: [PATCH] Frontend Logging - MVP

---
 src/App.vue                               |  4 +--
 src/constants/application-config.js       |  2 ++
 src/constants/logger.js                   |  6 -----
 src/constants/logging-endpoint-methods.js |  8 ++++++
 src/constants/logging-endpoints.js        |  8 ------
 src/global-methods.js                     |  4 +--
 src/helpers/logger.js                     | 30 +++++++++++------------
 src/main.js                               | 10 +-------
 src/router/index.js                       |  4 +--
 src/store/index.js                        |  9 -------
 10 files changed, 30 insertions(+), 55 deletions(-)
 delete mode 100644 src/constants/logger.js
 create mode 100644 src/constants/logging-endpoint-methods.js
 delete mode 100644 src/constants/logging-endpoints.js

diff --git a/src/App.vue b/src/App.vue
index bbaf78622..ed138ca0a 100644
--- a/src/App.vue
+++ b/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" />
diff --git a/src/constants/application-config.js b/src/constants/application-config.js
index b8a59a129..1b4385fe2 100644
--- a/src/constants/application-config.js
+++ b/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 };
diff --git a/src/constants/logger.js b/src/constants/logger.js
deleted file mode 100644
index 14a5114ca..000000000
--- a/src/constants/logger.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const logEntryTypes = {
-    information: "info",
-    warning: "warn",
-    error: "fail",
-    critical: "crit",
-};
diff --git a/src/constants/logging-endpoint-methods.js b/src/constants/logging-endpoint-methods.js
new file mode 100644
index 000000000..1dbb0acc8
--- /dev/null
+++ b/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;
diff --git a/src/constants/logging-endpoints.js b/src/constants/logging-endpoints.js
deleted file mode 100644
index 0f01a9a14..000000000
--- a/src/constants/logging-endpoints.js
+++ /dev/null
@@ -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;
\ No newline at end of file
diff --git a/src/global-methods.js b/src/global-methods.js
index 68963ab8c..c018740ef 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -99,8 +99,8 @@ export default {
                         );
                     }
 
-                    global.$logger.logError(`${method}: ${endpoint}`, error);
-
+                    global.$logger.logError(`${method}: ${endpoint}: ${error.message}`, error);
+ 
                     return reject(error);
                 }
             );
diff --git a/src/helpers/logger.js b/src/helpers/logger.js
index 641e14797..0b3492856 100644
--- a/src/helpers/logger.js
+++ b/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}`,
-                data: logEntry,
+                url: `${url}/${endpoint}`,
+                data: { entry: logEntry },
                 crossDomain: true,
                 responseType: {},
                 headers: headers,
@@ -50,13 +54,7 @@ export class Logger {
                 }
             );
         });
-
-    }
-
-    saveLogEntry(logEntry) {
-        console.log(logEntry);
     }
 }
 
 export default Logger;
-
diff --git a/src/main.js b/src/main.js
index 43ce75d85..7fa7c1130 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,15 +26,7 @@ vueApp.mixin(experimentMixin);
 
 // Vue Error Handling
 vueApp.config.errorHandler = (err, vm, info) => {
-    global.$logger.logError(err.message, {
-        info: info,
-        vm: vm,
-    });
+    global.$logger.logError(`Page Name - ${vm.getPageName()} - ${info}: ${err.message}\n${err.stack}`);
 };
 
-// Vue Router Error Handling
-router.onError((err) => {   
-    global.$logger.logError(err.message, err.cause);
-});
-
 vueApp.mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
index 17aaf275d..ae31f82d0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -152,9 +152,7 @@ const routes = [
                     params: to.params,
                 });
             } catch (error) {
-                console.log(error);
-
-                global.$logger.logError(error);
+                global.$logger.logError(`Routing ${error.stack}`);
 
                 if (to.query?.fmgPage === funnelStartPageName) {
                     deleteFunnelCookie();
diff --git a/src/store/index.js b/src/store/index.js
index 4db6b9fc2..cd4937877 100644
--- a/src/store/index.js
+++ b/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);
                 }
             );
     },