Add verbose mode

src/App.vue

@@ -19,6 +19,7 @@ import { mapActions } from "vuex";
 
 import config from "@/config";
 import * as types from "@/store/mutation-types";
+import { log } from "@/logging";
 import AppHeader from "@/components/AppHeader";
 import DownloadModal from "@/components/modals/Download";
 import InformationModal from "@/components/modals/Information";
@@ -85,6 +86,11 @@ export default {
         ...(user !== null && device !== null && { device }),
         ...(activeLayers.length > 0 && { layers: activeLayers.join(",") }),
       };
+      log("STATE", "Updating URL query from state");
+      log(
+        "STATE",
+        JSON.parse(JSON.stringify({ map, start, end, user, device }))
+      );
       this.$router.replace({ query }).catch(() => {}); // https://github.com/vuejs/vue-router/issues/2872#issuecomment-519073998
     },
   },

src/api.js

@@ -1,3 +1,4 @@
+import { log, logLevels } from "@/logging";
 import { getApiUrl } from "@/util";
 
 /** @typedef {import("./types").QueryParams} QueryParams */
@@ -22,7 +23,8 @@ import { getApiUrl } from "@/util";
 const fetchApi = (path, params = {}) => {
   const url = getApiUrl(path);
   Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
-  return fetch(url);
+  log("HTTP", `GET ${url.href}`);
+  return fetch(url).catch(error => log("HTTP", error, logLevels.ERROR));
 };
 
 /**
@@ -154,13 +156,18 @@ export const connectWebsocket = async callback => {
   url.protocol = url.protocol.replace("http", "ws");
   url = url.href;
   const ws = new WebSocket(url);
-  console.info(`[WS] Connecting to ${url}...`);
+  log("WS", `Connecting to ${url}`);
   ws.onopen = () => {
-    console.info("[WS] Connected");
+    log("WS", "Connected");
     ws.send("LAST");
   };
-  ws.onclose = () => {
-    console.info("[WS] Disconnected. Reconnecting in one second...");
+  ws.onclose = event => {
+    log(
+      "WS",
+      `Disconnected unexpectedly (reason: ${event.reason ||
+        "unknown"}). Reconnecting in one second.`,
+      logLevels.WARNING
+    );
     setTimeout(connectWebsocket, 1000);
   };
   ws.onmessage = async msg => {
@@ -168,16 +175,16 @@ export const connectWebsocket = async callback => {
       try {
         const data = JSON.parse(msg.data);
         if (data._type === "location") {
-          console.info("[WS] Location update received");
+          log("WS", "Location update received");
           callback && (await callback());
         }
       } catch (err) {
         if (msg.data !== "LAST") {
-          console.exception(err);
+          log("WS", err, logLevels.ERROR);
         }
       }
     } else {
-      console.info("[WS] Ping");
+      log("WS", "Ping");
     }
   };
 };

src/config.js

@@ -69,6 +69,7 @@ const DEFAULT_CONFIG = {
   selectedDevice: null,
   selectedUser: null,
   startDate,
+  verbose: false,
 };
 
 // Use deepmerge to combine the default and user-defined configuration.

src/logging.js

@@ -0,0 +1,37 @@
+import config from "@/config";
+
+export const logLevels = {
+  INFO: "INFO",
+  WARNING: "WARNING",
+  ERROR: "ERROR",
+};
+
+const logFunctions = {
+  [logLevels.INFO]: console.info,
+  [logLevels.WARNING]: console.warn,
+  [logLevels.ERROR]: console.error,
+};
+
+const logColors = {
+  [logLevels.INFO]: "#0d66ba",
+  [logLevels.WARNING]: "#cf8429",
+  [logLevels.ERROR]: "#ad1515",
+};
+
+export const log = (label, message, level = logLevels.INFO) => {
+  if (!Object.keys(logLevels).includes(level)) {
+    log("WARNING", `invalid log level: ${level}`, logLevels.WARNING);
+    return;
+  }
+  if (level !== logLevels.ERROR && !config.verbose) {
+    return;
+  }
+  const css = `
+  background: ${logColors[level]};
+  border-radius: 5px;
+  color: #fff;
+  padding: 3px;
+  `;
+  const logFunc = logFunctions[level];
+  logFunc(`%c${label}`, css, message);
+};