如何实现一个前端错误监控与报警系统？-js教程-PHP中文网

如何实现一个前端错误监控与报警系统？

紅蓮之龍

发布： 2025-09-30 14:19:02

原创

711人浏览过

前端错误监控系统需实现错误捕获、上报、存储与报警闭环。首先通过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 }); });

资源加载错误： 如图片、脚本加载失败。

还可以结合框架特定机制，比如 React 的 Error Boundary 或 Vue 的 errorHandler，捕获组件级错误。

2. 错误上报策略

捕获错误后，需通过轻量方式上报到服务端，避免影响主流程。

使用 navigator.sendBeacon 可在页面卸载时可靠发送数据：

上报内容建议包括：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

错误类型、消息、堆栈
发生 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 解析、用户行为回溯等高级功能。

以上就是如何实现一个前端错误监控与报警系统？的详细内容，更多请关注php中文网其它相关文章！