Add error to logger.ts

src/lib/converters/vips.svelte.ts

@@ -1,9 +1,9 @@
-import { VertFile } from "$lib/types";
-import { Converter } from "./converter.svelte";
-import VipsWorker from "$lib/workers/vips?worker&url";
 import { browser } from "$app/environment";
-import type { WorkerMessage, OmitBetterStrict } from "$lib/types";
-import { log } from "$lib/logger";
+import { error, log } from "$lib/logger";
+import type { OmitBetterStrict, WorkerMessage } from "$lib/types";
+import { VertFile } from "$lib/types";
+import VipsWorker from "$lib/workers/vips?worker&url";
+import { Converter } from "./converter.svelte";
 
 export class VipsConverter extends Converter {
 	private worker: Worker = browser
@@ -99,7 +99,7 @@ export class VipsConverter extends Converter {
 			try {
 				this.worker.postMessage(msg);
 			} catch (e) {
-				console.error(e);
+				error(["converters", this.name], e);
 			}
 		});
 	}

src/lib/logger/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { browser } from "$app/environment";
 
 const randomColorFromStr = (str: string) => {
@@ -20,7 +21,6 @@ const whiteOrBlack = (hsl: string) => {
 	return l > 70 ? "black" : "white";
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const log = (prefix: string | string[], ...args: any[]) => {
 	const prefixes = Array.isArray(prefix) ? prefix : [prefix];
 	if (!browser)
@@ -40,3 +40,23 @@ export const log = (prefix: string | string[], ...args: any[]) => {
 		...args,
 	);
 };
+
+export const error = (prefix: string | string[], ...args: any[]) => {
+	const prefixes = Array.isArray(prefix) ? prefix : [prefix];
+	if (!browser)
+		return console.error(prefixes.map((p) => `[${p}]`).join(" "), ...args);
+	const prefixesWithMeta = prefixes.map((p) => ({
+		prefix: p,
+		bgColor: randomColorFromStr(p),
+		textColor: whiteOrBlack(randomColorFromStr(p)),
+	}));
+
+	console.error(
+		`%c${prefixesWithMeta.map(({ prefix }) => prefix).join(" %c")}`,
+		...prefixesWithMeta.map(
+			({ bgColor, textColor }, i) =>
+				`color: ${textColor}; background-color: ${bgColor}; margin-left: ${i === 0 ? 0 : -6}px; padding: 0px 4px 0 4px; border-radius: 0px 9999px 9999px 0px;`,
+		),
+		...args,
+	);
+}

src/lib/store/index.svelte.ts

@@ -1,6 +1,6 @@
 import { browser } from "$app/environment";
 import { converters } from "$lib/converters";
-import { log } from "$lib/logger";
+import { error, log } from "$lib/logger";
 import { VertFile } from "$lib/types";
 import JSCookie from "js-cookie";
 import jsmediatags from "jsmediatags";
@@ -68,8 +68,8 @@ class Files {
 				file.blobUrl = url;
 				canvas.remove();
 			}
-		} catch (error) {
-			console.error(error);
+		} catch (e) {
+			error(["files"], e);
 		}
 	};
 

src/routes/about/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { log } from "$lib/logger";
+	import { error } from "$lib/logger";
 	import * as About from "$lib/sections/about";
 	import { InfoIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
@@ -43,12 +43,13 @@
 	let ghContribs: Contributor[] = [];
 
 	onMount(async () => {
+		// Fetch GitHub contributors
 		try {
 			const response = await fetch(
 				"https://api.github.com/repos/not-nullptr/VERT/contributors",
 			);
 			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
+				throw new Error(`HTTP error, status: ${response.status}`);
 			}
 			const allContribs = await response.json();
 
@@ -65,8 +66,8 @@
 					name: contrib.login,
 					avatar: contrib.avatar_url,
 				}));
-		} catch (error) {
-			log("general", `Error fetching GitHub contributors: ${error}`);
+		} catch (e) {
+			error(["general"], `Error fetching GitHub contributors: ${e}`);
 		}
 	});
 </script>