空中捉虫：JavaScript 应用的监控与日志记录

为什么你的 JavaScript 代码在呼救，而你却听不见？

想象一下：你发布了一个很酷的网络应用。用户访问、点击，一切正常……是吗？实际上，在浏览器的某个角落，一个错误正悄然发生：Uncaught TypeError: Cannot read property 'length' of undefined。用户只是关闭了标签页，转向了你的竞争对手，而你甚至不知道出了问题。

欢迎来到前端开发的现实世界。没有 JavaScript 应用的监控和日志记录，你就是在盲目工作。但别急着挠头——今天我们将探讨如何将混乱的错误转化为一个有序的警报系统。你将学习如何正确记录事件、跟踪性能，并且不被数据海洋淹没。

这篇文章就是你的生产环境生存手册。我们开始吧！

Console.log —— 是敌是友？

从基础开始。console.log() 是每个开发者首先想到的工具。这很正常。但如果你在生产代码中使用它，请停下来。为什么？因为：

\n
• 它会污染用户的控制台（是的，有些人会打开它）。
\n
• 大量调用时会影响性能。
\n
• 无法提供结构化的信息。
\n

最好使用日志级别。以下是正确方法的示例：

// 不好\nconsole.log('User clicked button');\n\n// 好\nconsole.info('User interaction', { \n    action: 'click', \n    element: '#submit-btn', \n    timestamp: Date.now() \n});\n\n// 对于错误\nconsole.error('API request failed', { \n    status: 500, \n    endpoint: '/api/users' \n});\n\n// 对于警告\nconsole.warn('Deprecated method used', { \n    method: 'fetchData_v1' \n});

但即便如此，这也只是冰山一角。真正的 JavaScript 应用监控始于控制台不可用之处。

结构化日志记录：JSON 来帮忙

当你的应用不断增长时，控制台中混乱的消息会变成一团浆糊。解决方案是结构化日志记录。以 JSON 格式发送数据，以便解析和分析。

以下是如何创建一个简单的日志记录器：

class Logger {\n    constructor(context = {}) {\n        this.context = context;\n    }\n\n    log(level, message, data = {}) {\n        const logEntry = {\n            timestamp: new Date().toISOString(),\n            level,\n            message,\n            ...this.context,\n            ...data\n        };\n\n        // 在生产环境中发送到服务器\n        if (process.env.NODE_ENV === 'production') {\n            this.sendToServer(logEntry);\n        } else {\n            // 在开发环境中输出到控制台\n            console[level](`[${level.toUpperCase()}] ${message}`, data);\n        }\n    }\n\n    sendToServer(entry) {\n        // 使用 sendBeacon 确保发送成功\n        navigator.sendBeacon('/api/logs', JSON.stringify(entry));\n    }\n\n    info(message, data) { this.log('info', message, data); }\n    warn(message, data) { this.log('warn', message, data); }\n    error(message, data) { this.log('error', message, data); }\n}\n\n// 使用示例\nconst logger = new Logger({ appVersion: '1.2.3', userId: getUserId() });\nlogger.info('Page loaded', { url: window.location.href, loadTime: performance.now() });

请注意 navigator.sendBeacon() —— 这是在用户离开页面之前发送数据的最佳方式。普通的 fetch 请求可能会被取消。

错误捕获：try/catch 只是开始

全局错误是最阴险的。它们可能出现在任何地方，并且很容易被忽略。以下是配置全面 JavaScript 错误监控的方法：

全局错误处理器

// 捕获未处理的错误
w