前端监控系统需采集JavaScript错误、资源加载异常、性能指标、接口异常及用户行为。1. 通过window.onerror捕获脚本错误，window.onunhandledrejection监听未处理的Promise拒绝。2. 利用Performance API获取FP、FCP、LCP等核心性能数据并在load后上报。3. 重写XMLHttpRequest和fetch实现接口请求监控，记录状态码异常。4. 使用sendBeacon发送日志，降级使用Image上报，并通过sessionStorage防止重复提交。5. 监控脚本可独立引入或构建时注入，服务端接收并分析数据以提升稳定性与体验。
前端监控系统能帮助团队及时发现和定位线上问题，提升用户体验和系统稳定性。在 JavaScript 项目中搭建一套基础的前端监控体系，核心目标是收集错误、性能数据和用户行为，并将这些信息上报到服务端进行分析。
1. 监控哪些内容
一个实用的前端监控系统通常关注以下几类数据：
- JavaScript 错误：包括语法错误、运行时异常、Promise 拒绝未处理等。
- 资源加载错误：如图片、脚本、样式表加载失败。
- 页面性能指标：如 FP（First Paint）、FCP（First Contentful Paint）、LCP、CLS、FID 等 Core Web Vitals。
- 用户行为轨迹：关键操作点击、路由变化等（可选）。
- 接口异常：Ajax 或 Fetch 请求失败、响应码异常。
2. 错误捕获实现
通过全局事件监听，可以捕获大多数前端异常。
全局错误：使用 window.addEventListener('error') 捕获脚本、资源等运行时错误。
立即学习“Java免费学习笔记（深入）”；
window.addEventListener('error', (event) => {
const errorData = {
type: 'error',
message: event.message,
filename: event.filename,
lineno: event.lineno,
colno: event.colno,
stack: event.error?.stack || ''
};
report(errorData); // 上报函数
});
未处理的 Promise 异常：
监听 unhandledrejection 事件。
window.addEventListener('unhandledrejection', (event) => {
const reason = event.reason;
const errorData = {
type: 'promise',
message: reason?.message || String(reason),
stack: reason?.stack || ''
};
report(errorData);
});
资源加载失败：
注意这类错误不包含堆栈，需单独判断。
window.addEventListener('error', (event) => {
const target = event.target;
if (target !== window && target.src || target.href) {
const resourceError = {
type: 'resource',
tagName: target.tagName,
src: target.src || target.href
};
report(resourceError);
}
}, true); // 使用捕获阶段
3. 性能数据采集
利用 Performance API 获取关键性能指标。
function collectPerformance() {
const perfData = performance.getEntriesByType('navigation')[0];
return {
fp: performance.getEntriesByName('first-paint')[0]?.startTime,
fcp: performance.getEntriesByName('first-contentful-paint')[0]?.startTime,
domReady: perfData.domContentLoadedEventEnd,
loadTime: perfData.loadEventEnd,
ttfb: perfData.responseStart - perfData.requestStart
};
}
// 页面加载完成后上报
window.addEventListener('load', () => {
setTimeout(() => { // 确保 FP/FCP 已记录
report({ type: 'performance', data: collectPerformance() });
}, 1000);
});
4. 接口请求监控
通过重写 fetch 和 XMLHttpRequest 实现请求拦截。
const originalXhrOpen = XMLHttpRequest.prototype.open;
const originalXhrSend = XMLHttpRequest.prototype.send;
<p>XMLHttpRequest.prototype.open = function(method, url) {
this._url = url;
this._method = method;
return originalXhrOpen.apply(this, arguments);
};</p><p>XMLHttpRequest.prototype.send = function(body) {
this.addEventListener('loadend', function() {
if (this.status >= 400) {
report({
type: 'ajax',
method: this._method,
url: this._url,
status: this.status,
response: this.responseText?.slice(0, 200)
});
}
});
return originalXhrSend.apply(this, arguments);
};
fetch 拦截（建议封装或用代理）：
重写 fetch 并保留原逻辑。
const originalFetch = window.fetch;
window.fetch = function(...args) {
return originalFetch.apply(this, args)
.then(res => {
if (!res.ok) {
report({
type: 'fetch',
url: args[0],
status: res.status
});
}
return res;
})
.catch(err => {
report({ type: 'fetch', url: args[0], error: err.message });
throw err;
});
};
5. 数据上报与去重
使用 navigator.sendBeacon 确保页面关闭时数据仍可发送，否则降级为 Image 上报。
function report(data) {
const finalData = { ...data, url: location.href, timestamp: Date.now(), uid: getUID() };
<p>// 避免重复上报相同错误（简单去重）
const key = <code>${finalData.message}-${finalData.lineno}</code>;
if (sessionStorage.getItem(key)) return;
sessionStorage.setItem(key, '1');</p><p>if (navigator.sendBeacon) {
navigator.sendBeacon('/log', new Blob([JSON.stringify(finalData)], { type: 'application/json' }));
} else {
new Image().src = '/log?d=' + encodeURIComponent(JSON.stringify(finalData));
}
}
6. 基本部署结构
前端注入监控脚本方式：
- 打包时引入监控模块。
- 通过 <script> 标签异步加载（推荐用于多项目复用）。
- 结合构建工具自动注入（如 webpack 插件）。
服务端需提供接收接口（如 /log），存储并分析日志，可用 ELK、Prometheus 或自建数据库。
基本上就这些，核心是稳定采集、合理上报、避免影响主流程。
