Add application logging (#15)

.eslintrc.yml

@@ -10,6 +10,7 @@ plugins:
   - 'simple-import-sort'
 root: true
 rules:
+  no-console: error
   # Non-null assertions used for refs in solidJS
   '@typescript-eslint/no-non-null-assertion': 0
   '@typescript-eslint/no-unused-vars':

src/store/AppState.ts

@@ -2,6 +2,7 @@ import { createStore } from 'solid-js/store';
 import { NUM_PADS } from 'src/defaults/constants';
 import { Defaults } from 'src/defaults/Defaults';
 import { SamplePlayer } from 'src/models/SamplePlayer';
+import { Logger } from 'src/utils/Logger';
 
 import { Convert } from './Convert';
 
@@ -24,7 +25,7 @@ function restoreFromLocalStorage(): AppState | null {
     try {
       return Convert.toAppState(jsonString);
     } catch (e) {
-      console.error(e);
+      Logger.error('Failed to parse App state from JSON', e);
       return null;
     }
   }
@@ -60,4 +61,3 @@ export const [GlobalState, setGlobalState] = createStore<AppState>(initState);
 export function persistGlobalState(): void {
   localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(GlobalState));
 }
-

src/utils/Logger.ts

@@ -0,0 +1,75 @@
+/**
+ * Logging severity levels
+ */
+enum LogLevel {
+  ERROR,
+  WARN,
+  INFO,
+  DEBUG,
+}
+
+/**
+ * String representations of logging severity levels
+ */
+type LogLevelName = keyof typeof LogLevel;
+
+/**
+ * Logger
+ * Log application events to the console
+ */
+export class Logger {
+  private static Loggers = [
+    /* eslint-disable no-console */
+    console.error,
+    console.warn,
+    console.info,
+    console.debug,
+    /* eslint-enable no-console */
+  ];
+
+  /**
+   * Log a message to the console
+   * @param msg message to write to the console
+   * @param level the log level to write the message at
+   * @param params objects to log alongside the message
+   */
+  public static log(
+    msg: string,
+    level: LogLevelName,
+    ...params: unknown[]
+  ): void {
+    Logger.Loggers[LogLevel[level]](`[${level}] ${msg}`, ...params);
+  }
+
+  /**
+   * Log an error
+   * @param message describing the error
+   */
+  public static error(msg: string, ...params: unknown[]): void {
+    Logger.log(msg, 'ERROR', ...params);
+  }
+
+  /**
+   * Log a warning
+   * @param message describing the warning
+   */
+  public static warn(msg: string, ...params: unknown[]): void {
+    Logger.log(msg, 'WARN', ...params);
+  }
+
+  /**
+   * Log some information
+   * @param message information to log
+   */
+  public static info(msg: string, ...params: unknown[]): void {
+    Logger.log(msg, 'INFO', ...params);
+  }
+
+  /**
+   * Log some debug information
+   * @param message information to log
+   */
+  public static debug(msg: string, ...params: unknown[]): void {
+    Logger.log(msg, 'DEBUG', ...params);
+  }
+}

src/utils/appInit.ts

@@ -1,15 +1,46 @@
 import { Defaults } from 'src/defaults/Defaults';
 import { SampleStore } from 'src/samples';
 
+import { Logger } from './Logger';
+
+/**
+ * Initialise App resources
+ */
 export async function appInit(): Promise<void> {
   SampleStore.init();
-  await Promise.all(
+  performance.mark('fetch-sample-start');
+  const results = await Promise.allSettled(
     Defaults.samples.map(async (x) => {
       try {
         await x.ensureCached();
+        return Promise.resolve();
       } catch (e) {
-        console.error(e);
+        Logger.error(`Failed to load sample '${x}'`, e);
+        return Promise.reject();
       }
     }),
   );
+  performance.mark('fetch-sample-end');
+  const counts = results.reduce(
+    (acc, x) => {
+      acc[x.status] += 1;
+      return acc;
+    },
+    {
+      fulfilled: 0,
+      rejected: 0,
+    },
+  );
+  const measure = performance.measure(
+    'fetch-sample-duration',
+    'fetch-sample-start',
+    'fetch-sample-end',
+  );
+  if (counts.fulfilled) {
+    Logger.info(`Successfully loaded ${counts.fulfilled} samples`);
+  }
+  if (counts.rejected) {
+    Logger.warn(`Failed to load ${counts.rejected} samples`);
+  }
+  Logger.debug(`Sample fetch took ${Math.ceil(measure.duration)}ms`);
 }