From 198493ca95bfd3714d6fbc18f198bfeb72bdd5b5 Mon Sep 17 00:00:00 2001 From: Miodec Date: Fri, 5 May 2023 14:49:46 +0200 Subject: [PATCH] logging update overwriting native log, warn, debug, error added color coded tags to logs automatically enabling debug logs on localhost added fucntion to enable debug logs --- frontend/src/ts/account/result-filters.ts | 2 - frontend/src/ts/config.ts | 3 +- .../src/ts/controllers/account-controller.ts | 1 + .../src/ts/controllers/page-controller.ts | 9 ++- frontend/src/ts/index.ts | 3 + frontend/src/ts/types/types.d.ts | 1 + frontend/src/ts/utils/logger.ts | 57 +++++++++++++++++++ 7 files changed, 69 insertions(+), 7 deletions(-) create mode 100644 frontend/src/ts/utils/logger.ts diff --git a/frontend/src/ts/account/result-filters.ts b/frontend/src/ts/account/result-filters.ts index 356ab40e1..b382f113f 100644 --- a/frontend/src/ts/account/result-filters.ts +++ b/frontend/src/ts/account/result-filters.ts @@ -77,7 +77,6 @@ function save(): void { } export async function load(): Promise { - console.log("loading filters"); try { const newResultFilters = window.localStorage.getItem("resultFilters"); @@ -297,7 +296,6 @@ export function getFilter( // } export function loadTags(tags: MonkeyTypes.Tag[]): void { - console.log("loading tags"); tags.forEach((tag) => { defaultResultFilters.tags[tag._id] = true; }); diff --git a/frontend/src/ts/config.ts b/frontend/src/ts/config.ts index c9463a090..ea08ceb29 100644 --- a/frontend/src/ts/config.ts +++ b/frontend/src/ts/config.ts @@ -74,6 +74,7 @@ async function saveToLocalStorage( export async function saveFullConfigToLocalStorage( noDbCheck = false ): Promise { + console.log("saving full config to localStorage"); if (!dbConfigLoaded && !noDbCheck) { setChangedBeforeDb(true); } @@ -1927,10 +1928,8 @@ export function loadFromLocalStorage(): void { newConfig = {} as MonkeyTypes.Config; } apply(newConfig); - console.log("applying localStorage config"); localStorageConfig = newConfig; saveFullConfigToLocalStorage(true); - console.log("saving localStorage config"); } else { reset(); } diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts index fe4feab73..2cf35af04 100644 --- a/frontend/src/ts/controllers/account-controller.ts +++ b/frontend/src/ts/controllers/account-controller.ts @@ -294,6 +294,7 @@ if (Auth && ConnectionState.get()) { const search = window.location.search; const hash = window.location.hash; console.log(`auth state changed, user ${user ? true : false}`); + console.debug(user); if (user) { $("#top .signInOut .icon").html( `` diff --git a/frontend/src/ts/controllers/page-controller.ts b/frontend/src/ts/controllers/page-controller.ts index 2bcfa4e23..3e967bcb3 100644 --- a/frontend/src/ts/controllers/page-controller.ts +++ b/frontend/src/ts/controllers/page-controller.ts @@ -32,14 +32,17 @@ export async function change( return new Promise((resolve) => { if (PageTransition.get()) { - console.log(`change page ${page.name} stopped`); + console.debug( + `change page to ${page.name} stopped, page transition is true` + ); return resolve(false); } - console.log(`change page ${page.name}`); if (!options.force && ActivePage.get() === page.name) { - console.log(`page ${page.name} already active`); + console.debug(`change page ${page.name} stoped, page already active`); return resolve(false); + } else { + console.log(`changing page ${page.name}`); } const pages: Record = { diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts index e5889bbcc..ff5a66b29 100644 --- a/frontend/src/ts/index.ts +++ b/frontend/src/ts/index.ts @@ -3,6 +3,7 @@ import "../styles/index.scss"; import "./firebase"; +import * as Logger from "./utils/logger"; import * as DB from "./db"; import "./ui"; import "./controllers/ad-controller"; @@ -65,3 +66,5 @@ extendedGlobal.enableSpacingDebug = TestInput.enableSpacingDebug; extendedGlobal.egVideoListener = egVideoListener; extendedGlobal.wpmCalculationDebug = TestStats.wpmCalculationDebug; + +extendedGlobal.toggleDebugLogs = Logger.toggleDebugLogs; diff --git a/frontend/src/ts/types/types.d.ts b/frontend/src/ts/types/types.d.ts index 4ee6683d1..cd608dd00 100644 --- a/frontend/src/ts/types/types.d.ts +++ b/frontend/src/ts/types/types.d.ts @@ -686,6 +686,7 @@ declare namespace MonkeyTypes { noGoogleNoMo(): void; egVideoListener(options: Record): void; wpmCalculationDebug(): void; + toggleDebugLogs(): void; } interface GithubRelease { diff --git a/frontend/src/ts/utils/logger.ts b/frontend/src/ts/utils/logger.ts new file mode 100644 index 000000000..7b6e1386b --- /dev/null +++ b/frontend/src/ts/utils/logger.ts @@ -0,0 +1,57 @@ +import { isLocalhost } from "./misc"; + +const nativeLog = console.log; +const nativeWarn = console.warn; +const nativeError = console.error; + +let debugLogs = localStorage.getItem("debugLogs") === "true" ?? false; + +if (isLocalhost()) { + debugLogs = true; + debug("Debug logs automatically enabled on localhost"); +} + +export function toggleDebugLogs(): void { + debugLogs = !debugLogs; + info(`Debug logs ${debugLogs ? "enabled" : "disabled"}`); + localStorage.setItem("debugLogs", debugLogs.toString()); +} + +export function info(...args: unknown[]): void { + nativeLog( + "%cINFO", + "background:#4CAF50;color: #111;padding:0 5px;border-radius:10px", + //@ts-ignore + ...args + ); +} + +export function warn(...args: unknown[]): void { + nativeWarn( + "%cWRN", + "background:#FFC107;color: #111;padding:0 5px;border-radius:10px", + ...args + ); +} + +export function error(...args: unknown[]): void { + nativeError( + "%cERR", + "background:#F44336;color: #111;padding:0 5px;border-radius:10px", + ...args + ); +} + +export function debug(...args: unknown[]): void { + if (!debugLogs) return; + nativeLog( + "%cDEBG", + "background:#2196F3;color: #111;padding:0 5px;border-radius:10px", + ...args + ); +} + +console.log = info; +console.warn = warn; +console.error = error; +console.debug = debug;