前端错误监控系统需实现错误捕获、上报、存储与报警闭环。首先通过window.onerror、unhandledrejection和error事件监听全面捕获JS运行时、Promise及资源加载异常，并结合React Error Boundary等框架机制；其次利用navigator.sendBeacon或fetch keepalive将包含错误类型、堆栈、URL、UA、设备信息等上下文的数据轻量上报；后端使用Node.js等服务接收日志并存入数据库或文件，设计可查询结构便于分析；最后设置告警规则，如单位时间错误超阈值或新严重错误出现，通过机器人、邮件等方式通知，初期可简陋搭建，后续扩展聚合分析与行为回溯功能。
前端错误监控与报警系统的核心目标是及时发现、收集并通知开发者用户端发生的异常，提升应用的稳定性和用户体验。实现这样一个系统并不需要复杂的架构，但需覆盖关键环节：错误捕获、上报、存储、分析和报警。
1. 全面捕获前端错误
要监控前端错误，第一步是尽可能全面地捕获各类异常。
JavaScript 运行时错误： 使用 window.onerror 捕获未捕获的同步错误。
window.onerror = function(message, source, lineno, colno, error) { reportError({ type: 'runtime', message, source, line: lineno, column: colno, stack: error?.stack }); return true; };Promise 异常： 监听未处理的 Promise 拒绝。
立即学习“前端免费学习笔记（深入）”；
window.addEventListener('unhandledrejection', event => { reportError({ type: 'promise', message: event.reason?.message || 'Unknown promise rejection', stack: event.reason?.stack }); });资源加载错误： 如图片、脚本加载失败。
window.addEventListener('error', event => { const target = event.target; if (target instanceof HTMLScriptElement || target instanceof HTMLLinkElement || target instanceof HTMLImageElement) { reportError({ type: 'resource', src: target.src || target.href, tagName: target.tagName }); } }, true);还可以结合框架特定机制，比如 React 的 Error Boundary 或 Vue 的 errorHandler，捕获组件级错误。
2. 错误上报策略
捕获错误后，需通过轻量方式上报到服务端，避免影响主流程。
使用 navigator.sendBeacon 可在页面卸载时可靠发送数据：
function reportError(data) { const payload = JSON.stringify({ ...data, timestamp: Date.now(), url: location.href }); if (navigator.sendBeacon) { navigator.sendBeacon('/log-error', payload); } else { fetch('/log-error', { method: 'POST', body: payload, keepalive: true // 确保请求不被中断 }); } }上报内容建议包括：
- 错误类型、消息、堆栈
- 发生 URL、用户代理（UA）
- 用户标识（可选，注意隐私）
- 设备信息、网络状态
- 自定义上下文（如当前路由、操作步骤）
为减少上报量，可做去重或采样，例如只上报前 1% 的错误，或对相同堆栈合并上报。
3. 后端接收与存储
搭建一个简单的 API 接收错误日志，例如用 Node.js + Express：
app.post('/log-error', express.json(), (req, res) => { const errorLog = req.body; // 存入数据库（如 MongoDB、Elasticsearch）或写入日志文件 saveToDatabase(errorLog); res.status(200).end(); });存储结构建议设计为可查询的格式，便于后续分析。字段如：
- error.type
- error.message
- error.stack
- user.agent
- url
- timestamp
可考虑使用日志中间件（如 Winston、Pino）配合持久化方案。
4. 告警机制
不是所有错误都需要立即报警。设置触发条件更有效。
可以定时扫描数据库，判断是否满足告警规则：
- 某类错误单位时间内超过阈值（如 5 分钟内出现 100 次）
- 新出现的严重错误（如空指针、API 调用失败）
- 特定页面错误率突增
触发后可通过以下方式通知：
- 企业微信/钉钉机器人推送
- 邮件（如 Nodemailer）
- 短信或电话（紧急级别高时）
示例：用定时任务检查高频错误
setInterval(async () => { const count = await db.countErrors({ type: 'runtime', timestamp: { $gte: Date.now() - 5 * 60 * 1000 } }); if (count > 100) { sendAlert(`运行时错误激增：${count} 次`); } }, 60000);基本上就这些。关键是把链路打通：从捕获到上报，再到存储和报警，形成闭环。初期可用简单方案，逐步加入聚合分析、Source Map 解析、用户行为回溯等高级功能。
