前端监控系统需采集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 实现请求拦截。
以 XMLHttpRequest 为例：
const originalXhrOpen = XMLHttpRequest.prototype.open;const originalXhrSend = XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.open = function(method, url) {this._url = url;this._method = method;return originalXhrOpen.apply(this, arguments);};
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() };// 避免重复上报相同错误（简单去重）const key = ${finalData.message}-${finalData.lineno};if (sessionStorage.getItem(key)) return;sessionStorage.setItem(key, '1');
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. 基本部署结构
前端注入监控脚本方式：
打包时引入监控模块。通过 标签异步加载（推荐用于多项目复用）。结合构建工具自动注入（如 webpack 插件）。
服务端需提供接收接口（如 /log），存储并分析日志，可用 ELK、Prometheus 或自建数据库。
基本上就这些，核心是稳定采集、合理上报、避免影响主流程。
以上就是javascript_前端监控系统搭建的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540279.html
微信扫一扫 
支付宝扫一扫 
