Überwachung und Protokollierung von TypeScript-Anwendungen: Der vollständige Leitfaden

Einleitung: Warum Ihre TypeScript-Anwendung Überwachung und Protokollierung benötigt

Stellen Sie sich folgende Situation vor: Sie haben einen tollen Dienst mit TypeScript gestartet. Alles funktioniert perfekt... bis zum ersten Anruf eines Benutzers: "Die Website ist langsam!" oder "Daten werden nicht gespeichert!". Sie gehen in den Code, können den Fehler aber nicht reproduzieren. Kommt Ihnen das bekannt vor?

TypeScript bietet uns eine leistungsstarke statische Typisierung, schützt aber nicht vor logischen Fehlern, Speicherlecks oder unerwarteten Laufzeitausnahmen. Hier kommen Überwachung und Protokollierung ins Spiel. Dies ist nicht nur ein "Häkchen" auf der Checkliste, sondern ein echter Rettungsanker für Entwickler.

In diesem Artikel werden wir uns ansehen, wie Sie die Überwachung und Protokollierung in TypeScript-Anwendungen (sowohl im Backend mit Node.js als auch im Frontend) richtig einrichten, welche Tools Sie wählen sollten und wie Sie nicht in einem Meer von Logs untergehen. Los geht's!

Warum ist das notwendig? Drei Hauptgründe

1. Echtzeit-Debugging

Die Protokollierung ermöglicht einen Blick in die laufende Anwendung. Anstatt zu raten, sehen Sie konkrete Variablenwerte, Aufrufstapel und die Abfolge von Ereignissen.

2. Leistung

Die Überwachung von TypeScript-Anwendungen hilft dabei, "schwere" Funktionen zu identifizieren, die die UI verlangsamen oder den Speicher füllen. Sie sehen, wo die Anwendung die meiste Zeit verbringt.

3. Sicherheit und Audit

Logs sind das Erste, was Sie bei der Untersuchung eines Vorfalls vorzeigen. Wer hat wann welche Daten angefordert? Ein korrektes Log rettet Ihren Ruf.

Tools für die Überwachung und Protokollierung in TypeScript

Schauen wir uns an, was in der Produktion tatsächlich verwendet wird. Die Wahl des Tools hängt davon ab, was Sie entwickeln: ein Backend mit Node.js oder ein Frontend im Browser.

Für das Backend (Node.js + TypeScript)

\n
• Winston – der beliebteste Logger. Flexibel, mit vielen Transporten (Datei, Konsole, Remote-Server).
\n
• Pino – extrem schnell, wenn die Leistung kritisch ist.
\n
• Morgan – für HTTP-Anfragen (funktioniert hervorragend mit Express).
\n

Für das Frontend (Browser-TypeScript)

\n
• Sentry – der König der Fehlerüberwachung. Fängt Ausnahmen, Abstürze und langsame Anfragen ab.
\n
• LogRocket – zeichnet Benutzersitzungen + Logs auf.
\n
• Datadog / New Relic – für Enterprise-Lösungen.
\n

Einrichtung der Protokollierung in TypeScript: Eine Schritt-für-Schritt-Anleitung

Beginnen wir mit dem klassischen Backend. Wir installieren Winston – es harmoniert perfekt mit TypeScript.

Schritt 1: Installation und Basiskonfiguration

npm install winston\nnpm install @types/winston --save-dev

Erstellen wir eine Datei logger.ts:

import winston from 'winston';\n\nconst logger = winston.createLogger({\n    level: 'info',\n    format: winston.format.combine(\n        winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),\n        winston.format.errors({ stack: true }),\n        winston.format.json()\n    ),\n    defaultMeta: { service: 'user-service' },\n    transports: [\n        new winston.transports.File({ filename: 'error.log', level: 'error' }),\n        new winston.transports.File({ filename: 'combined.log' }),\n    ],\n});\n\nif (process.env.NODE_ENV !== 'production') {\n    logger.add(new winston.transports.Console({\n        format: winston.format.simple(),\n    }));\n}\n\nexport default logger;

Jetzt können Sie an jeder Stelle Ihres TypeScript-Codes schreiben:

import logger from './logger';\n\nlogger.info('Benutzer erfolgreich registriert', { userId: 123 });\nlogger.error('Fehler bei der Datenbankverbindung', { error: err.message });

Beachten Sie: Wir verwenden winston.format.errors({ stack: true }). Das bedeutet, dass beim Protokollieren eines Fehlers der Aufrufstapel gespeichert wird – Gold wert für das Debugging.

Schritt 2: Hinzufü