Frontend Logging - MVP

This commit is contained in:
Leah Schumann 2024-03-05 06:43:58 -05:00
parent 763956caef
commit 3586ae1b94
10 changed files with 30 additions and 55 deletions

View file

@ -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" />

View file

@ -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 };

View file

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

View file

@ -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;

View file

@ -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;

View file

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

View file

@ -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;

View file

@ -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");

View file

@ -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();

View file

@ -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);
}
);
},