Frontend Logging - MVP
This commit is contained in:
parent
763956caef
commit
3586ae1b94
10 changed files with 30 additions and 55 deletions
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
const logEntryTypes = {
|
||||
information: "info",
|
||||
warning: "warn",
|
||||
error: "fail",
|
||||
critical: "crit",
|
||||
};
|
||||
8
src/constants/logging-endpoint-methods.js
Normal file
8
src/constants/logging-endpoint-methods.js
Normal 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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -99,8 +99,8 @@ export default {
|
|||
);
|
||||
}
|
||||
|
||||
global.$logger.logError(`${method}: ${endpoint}`, error);
|
||||
|
||||
global.$logger.logError(`${method}: ${endpoint}: ${error.message}`, error);
|
||||
|
||||
return reject(error);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
10
src/main.js
10
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");
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue