Eigenes Datumsformat für ngx-logger

ngx-logger ist eine großartige Logging-Bibliothek für Angular. Sie ähnelt andern Logging-Libraries, die wir von anderen Plattformen wie Apache Log4j (Java), Timber (Android, Kotlin / Java) und Winston (node.js) kennen, ist jedoch nicht so leistungsfähig und funktionsreich wie einige dieser Bibliotheken. Ich weiß, dass Logging-Frameworks in der Webentwicklung nicht so häufig sind wie beispielsweise in der Java-Backend-Entwicklung. Wenn du jedoch noch kein v verwendest, solltest du dies tun. Es hat mehrere Vorteile gegenüber dem Standard console.log:

  • Man hat unterschiedliche Protokollebenen, sodass mann bestimmte Log-Levels in der Produktion problemlos deaktivieren können (z.B. alles unter ERROR).
  • Vor jeder Protokollzeile wird ein Zeitstempel eingefügt.
  • Man kann die Logs einfach an einen Remote-Server senden.
Eigenes Datumsformat für ngx-logger (Angular, TypeScript)

Ab Version 4.1.2 ist jedoch kein benutzerdefiniertes Format für timestampFormat zulässig. Zumindest wird sich der TypeScript-Compiler mit einem Fehler beschweren:

Fehler TS2322: Type '"HH:mm:ss.SSS"' is not assignable to type '"medium" | "full" | "short" | "long" | "shortDate" | "mediumDate" | "longDate" | "fullDate" | "shortTime" | "mediumTime" | "longTime" | "fullTime"'.

Tatsächlich können Sie hier jedoch auch alles verwenden, was Sie für die Angular Date Pipe verwenden können. Und dafür gibt es eine einfache Lösung: Füge einfach eine Zeile mit // @ ts-ignore (als Kommentar!) vor der Zeile hinzu, in der du das timestampFormat definierst, wie folgt:

LoggerModule.forRoot({
  level: NgxLoggerLevel.DEBUG,
  // @ts-ignore
  timestampFormat: 'HH:mm:ss.SSS',
  enableSourceMaps: true
})

Damit erhältst du dein benutzerdefiniertes, bevorzugtes Datumsformat, wie zum Beispiel:

15: 22: 59.764 DEBUG [webpack:///./src/app/app.component.ts:86] Loaded initial data

Wie schön ist das im Vergleich zu dem Standard-ISO-Zeitformat, das du zuvor hattest?

2020–03–09T14:28:30.105Z DEBUG [webpack:///./src/app/app.component.ts:86] Loaded initial data

Beachte außerdem, dass enableSourceMaps sehr praktisch ist. Damit kannst du direkt auf den Log-Eintrag innerhalb der Console klicken und die .ts-Datei in der richtigen Zeile öffnen.

Ich bevorzuge das benutzerdefinierte Format, da das ISO-Format normalerweise viele Informationen (wie das Datum) enthält, die beim Debuggen des Codes nicht relevant sind.

Viel Spaß beim Logging! 👨‍💻

Ich freue mich über Feedback , z.B. über Twitter - alle weiteren Kontaktinformationen findest du hier.

Published: 2020-03-09 | Last update: 2020-03-11 | Tags: ngx-logger, Angular, Logging, TypeScript