feat(frontend): colorize terminal output of logger

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/package.json

@@ -98,6 +98,7 @@
     "markdown-it-sup": "1.0.0",
     "mermaid": "10.4.0",
     "next": "13.4.19",
+    "picocolors": "1.0.0",
     "react": "18.2.0",
     "react-bootstrap": "2.8.0",
     "react-bootstrap-icons": "1.10.3",

frontend/src/utils/logger.spec.ts

@@ -96,7 +96,7 @@ describe('Logger', () => {
       expect(debugLogMock).toHaveBeenCalledWith(
         '%c[2021-10-25 01:02:03] %c(prefix)',
         'color: yellow',
-        'color: orange',
+        'color: green',
         'muffin'
       )
       expect(defaultLogMock).not.toBeCalled()
@@ -129,7 +129,7 @@ describe('Logger', () => {
       expect(debugLogMock).toHaveBeenCalledWith(
         '%c[2021-10-25 03:04:05] %c(prefix)',
         'color: yellow',
-        'color: orange',
+        'color: green',
         'muffin'
       )
       expect(defaultLogMock).not.toBeCalled()
@@ -148,7 +148,7 @@ describe('Logger', () => {
       expect(debugLogMock).toHaveBeenCalledWith(
         '%c[2021-10-25 04:05:06] %c(prefix)',
         'color: yellow',
-        'color: orange',
+        'color: green',
         'muffin'
       )
       expect(defaultLogMock).not.toBeCalled()
@@ -163,7 +163,7 @@ describe('Logger', () => {
     expect(infoLogMock).toHaveBeenCalledWith(
       '%c[2021-10-25 05:06:07] %c(prefix)',
       'color: yellow',
-      'color: orange',
+      'color: green',
       'toast'
     )
     expect(warnLogMock).not.toBeCalled()
@@ -182,7 +182,7 @@ describe('Logger', () => {
     expect(warnLogMock).toHaveBeenCalledWith(
       '%c[2021-10-25 06:07:08] %c(prefix)',
       'color: yellow',
-      'color: orange',
+      'color: green',
       'eggs'
     )
     expect(errorLogMock).not.toBeCalled()
@@ -200,7 +200,7 @@ describe('Logger', () => {
     expect(errorLogMock).toHaveBeenCalledWith(
       '%c[2021-10-25 07:08:09] %c(prefix)',
       'color: yellow',
-      'color: orange',
+      'color: green',
       'bacon'
     )
     expect(debugLogMock).not.toBeCalled()

frontend/src/utils/logger.ts

@@ -5,6 +5,7 @@
  */
 import { isDevMode, isTestMode } from './test-modes'
 import { DateTime } from 'luxon'
+import pico from 'picocolors'
 
 /**
  * Simple logger that prefixes messages with a timestamp and a name.
@@ -70,6 +71,11 @@ export class Logger {
 
   private prefix(): string[] {
     const timestamp = DateTime.now().toFormat('yyyy-MM-dd HH:mm:ss')
-    return [`%c[${timestamp}] %c(${this.scope})`, 'color: yellow', 'color: orange']
+
+    if (typeof window === 'undefined') {
+      return [pico.yellow(`[${timestamp}]`), pico.green(`(${this.scope})`)]
+    } else {
+      return [`%c[${timestamp}] %c(${this.scope})`, 'color: yellow', 'color: green']
+    }
   }
 }

yarn.lock

@@ -2504,6 +2504,7 @@ __metadata:
     markdown-it-sup: 1.0.0
     mermaid: 10.4.0
     next: 13.4.19
+    picocolors: 1.0.0
     prettier: 3.0.3
     react: 18.2.0
     react-bootstrap: 2.8.0
@@ -14561,7 +14562,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
+"picocolors@npm:1.0.0, picocolors@npm:^1.0.0":
   version: 1.0.0
   resolution: "picocolors@npm:1.0.0"
   checksum: a2e8092dd86c8396bdba9f2b5481032848525b3dc295ce9b57896f931e63fc16f79805144321f72976383fc249584672a75cc18d6777c6b757603f372f745981