TypeScript 应用监控与日志记录：完整指南

引言：为什么您的 TypeScript 项目需要监控和日志记录

想象一下这个场景：您启动了一个基于 TypeScript 的酷炫服务。一切运行完美……直到接到用户的第一个电话：“网站卡顿了！”或“数据保存不了！”。您去查看代码，但无法重现这个 bug。熟悉吗？

TypeScript 为我们提供了强大的静态类型检查，但它并不能防止逻辑错误、内存泄漏或运行时意外异常。正是在这里，监控和日志记录登场了。这不仅仅是清单上的一个“勾选”，而是开发者的真正救生圈。

在本文中，我们将探讨如何正确配置 TypeScript 应用（包括基于 Node.js 的后端和前端）的监控和日志记录，选择哪些工具，以及如何避免淹没在日志的海洋中。开始吧！

为什么需要它？三个主要原因

1. 实时调试

日志记录让您能够窥视正在运行的应用内部。与其猜测，不如直接看到具体的变量值、调用堆栈和事件序列。

2. 性能

TypeScript 应用监控有助于追踪那些拖慢 UI 或占用内存的“重型”函数。您将看到应用在哪些地方花费了最多时间。

3. 安全与审计

日志是您在调查安全事件时首先要展示的东西。谁、何时、请求了哪些数据？正确的日志可以挽救您的声誉。

TypeScript 监控和日志记录工具

让我们看看生产环境中实际使用的工具。工具的选择取决于您编写的是基于 Node.js 的后端还是浏览器中的前端。

对于后端 (Node.js + TypeScript)

\n
• Winston — 最流行的日志记录器。灵活，拥有大量传输方式（文件、控制台、远程服务器）。
\n
• Pino — 如果性能至关重要，它非常快。
\n
• Morgan — 用于 HTTP 请求（与 Express 配合得很好）。
\n

对于前端 (浏览器 TypeScript)

\n
• Sentry — 错误监控之王。捕获异常、崩溃、慢请求。
\n
• LogRocket — 记录用户会话和日志。
\n
• Datadog / New Relic — 用于企业级解决方案。
\n

在 TypeScript 中配置日志记录：分步指南

我们从经典的后端开始。安装 Winston — 它与 TypeScript 完美配合。

步骤 1：安装和基本配置

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

创建文件 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;

现在，您可以在 TypeScript 代码的任何位置编写：

import logger from './logger';\n\nlogger.info('用户成功注册', { userId: 123 });\nlogger.error('数据库连接错误', { error: err.message });

请注意：我们使用了 winston.format.errors({ stack: true })。这意味着在记录错误时，调用堆栈将被保存——这对调试来说是无价之宝。

步骤 2：添加