引言
作为前端开发者，你是否遇到过以下问题？
用户反馈页面白屏，但无法复现问题？
线上性能突然变差，但不知道具体原因？
某些浏览器或设备上报错，但缺乏详细日志？
如果没有完善的前端监控系统，这些问题就像“黑盒”，难以排查和优化。本文将带你从零搭建一套前端监控系统，实现错误收集、性能上报、用户行为追踪，助你快速定位线上问题！
一、为什么需要前端监控？
1.1 监控的核心目标
错误监控：捕获JS异常、资源加载失败、接口错误等。
性能监控：统计页面加载时间、FP/FCP等关键指标。
用户行为分析：记录用户操作路径，辅助复现问题。
数据可视化：通过Dashboard分析趋势，指导优化。
1.2 常见监控方案对比
| Sentry | ||
| Fundebug | ||
| 自建监控 |
本文重点讲解自建监控系统，适合对数据安全性要求高的团队。
二、错误收集：如何捕获前端异常？
2.1 JS错误捕获
使用 window.onerror 和 window.addEventListener('error') 全局捕获错误：
window.onerror = function(message, source, lineno, colno, error) {console.log('捕获到错误:', { message, source, lineno, colno, error });// 上报到服务端reportError({ type: 'js-error', data: { message, stack: error.stack } });};// 捕获未处理的Promise异常window.addEventListener('unhandledrejection', (e) => {reportError({ type: 'promise-error', data: e.reason });});
2.2 资源加载失败监控
通过 PerformanceObserver 监听资源加载情况：
const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { if (entry.duration === 0) { // 加载失败的资源 reportError({ type: 'resource-error', data: { name: entry.name, type: entry.initiatorType } }); } });});observer.observe({ entryTypes: ['resource'] });2.3 接口错误监控
劫持 fetch 和 XMLHttpRequest，监听HTTP请求：
// 拦截fetchconst originalFetch = window.fetch;window.fetch = async (...args) => { const start = Date.now(); const res = await originalFetch(...args); if (!res.ok) { reportError({ type: 'api-error', data: { url: args[0], status: res.status } }); } return res;};三、性能上报：如何衡量页面加载速度？
3.1 关键性能指标（Web Vitals）
FP（First Paint）：首次渲染时间
FCP（First Contentful Paint）：首次内容渲染时间
LCP（Largest Contentful Paint）：最大内容渲染时间
CLS（Cumulative Layout Shift）：布局偏移分数
TTI（Time to Interactive）：可交互时间
3.2 使用 web-vitals 库采集数据
import { getLCP, getFID, getCLS } from 'web-vitals';getLCP((metric) => reportPerformance(metric));getFID((metric) => reportPerformance(metric));getCLS((metric) => reportPerformance(metric));
3.3 自定义性能数据
通过 Performance API 获取更详细的加载信息：
const timing = performance.timing;const loadTime = timing.loadEventEnd - timing.navigationStart;console.log(`页面加载耗时：${loadTime}ms`);四、数据上报与存储
4.1 上报方式
即时上报：错误发生时立即发送（适合关键错误）。
批量上报：缓存在
localStorage，定时或页面关闭前发送（减少请求）。
4.2 服务端存储
Node.js + MongoDB：存储错误日志和性能数据。
ELK（Elasticsearch + Logstash + Kibana）：实现日志分析和可视化。
4.3 数据可视化
五、优化与扩展
5.1 采样率控制
避免数据量过大，可按 1%~10% 采样上报。
5.2 用户行为追踪
结合 RRWeb 录制用户操作，复现错误场景。
5.3 报警机制
企业微信/钉钉机器人告警
错误率超过阈值时自动通知
六、总结
这篇文章介绍了前端监控的核心技术：
✅ 错误捕获：JS异常、资源加载、接口错误
✅ 性能上报：Web Vitals + Performance API
✅ 数据存储：Node.js + MongoDB / ELK
✅ 可视化分析：Grafana / 自研Dashboard
自建监控系统 不仅能提升问题排查效率，还能为性能优化提供数据支撑。如果你的项目还没有监控，赶紧动手搭建吧！
優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念，誠信務(wù)實的服務(wù)了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動端應(yīng)用（手機站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號：
專屬顧問
