答案：前端项目需通过JavaScript错误监控与上报机制及时发现并定位线上问题。1. 使用 window.onError 捕获全局同步错误，但无法获取 promise 错误和跨域脚本详细信息；2. 通过 addEventListener(‘unhandledrejection’) 监听未捕获的 Promise 异常；3. 实现 reportError 函数，优先使用 navigator.sendBeacon 上报错误数据以确保页面卸载时仍能发送；4. 结合 Source map 解析压缩代码的堆栈信息，还原真实源码位置以便调试。该体系需兼顾准确性、性能及可维护性。

前端项目上线后，最怕的就是用户遇到问题却无法复现。JavaScript错误监控与上报机制能帮助开发者第一时间发现并定位线上问题。虽然浏览器提供了基本的错误捕获能力，但要实现完整、稳定的监控体系，还需要结合实际场景进行优化和封装。

1. 捕获全局 JavaScript 错误

使用 window.onerror 可以监听运行时的同步错误，包括语法错误、引用错误等。当脚本执行过程中抛出未捕获的异常时，该方法会被触发。

注意：onerror 无法捕获 Promise 异常或跨域脚本的详细信息（会显示为 “Script error.”）。

基础写法如下：

window.onerror = function(message, source, lineno, colno, error) {   console.error('全局错误:', { message, source, lineno, colno, error });   // 上报到服务器   reportError({     message: message,     url: source,     line: lineno,     column: colno,     stack: error?.stack || ''   });   return true; // 阻止默认错误弹窗 }; 

为了处理跨域脚本的错误信息，需确保引入的外部资源添加了 CORS 头部 并在 script 标签中加上 crossorigin=”anonymous”。

立即学习“Java免费学习笔记（深入）”；

2. 监听 Promise 异常

未被 catch 的 Promise 错误会静默失败，影响用户体验。使用 addEventListener(‘unhandledrejection’) 可以有效捕捉这类问题。

示例代码：

window.addEventListener('unhandledrejection', function(event) {   const reason = event.reason;   const message = reason?.message || String(reason);   const stack = reason?.stack || '';    reportError({     type: 'PromiseRejection',     message,     stack   });    // 可选择阻止默认行为   event.preventDefault(); }); 

常见于异步请求未加 .catch() 或 await 没有 try 包裹的情况，及时上报有助于排查接口异常或逻辑遗漏。

3. 自定义错误上报函数

将错误数据统一发送到服务端，建议使用 navigator.sendBeacon 或 ajax POST。sendBeacon 在页面卸载时仍能可靠发送数据，适合错误上报场景。

挖错网

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

28

查看详情

实现一个通用上报函数：

function reportError(data) {   const payload = JSON.stringify({     ...data,     timestamp: Date.now(),     userAgent: navigator.userAgent,     url: location.href   });    if (navigator.sendBeacon) {     navigator.sendBeacon('/api/log-error', payload);   } else {     // fallback 使用 Image 或 fetch     fetch('/api/log-error', {       method: 'POST',       body: payload,       keepalive: true // 确保请求完成即使页面已关闭     }).catch(() => {       // 忽略上报失败     });   } } 

服务端接收后可存储并通知相关人员，形成闭环处理流程。

4. 结合 Source Map 解析堆栈

生产环境通常使用压缩后的 JS 文件，错误堆栈中的行列号指向压缩代码，难以定位原始位置。通过构建时生成 Source Map 并部署到服务器，配合工具如 sourcemap-decoder 可还原真实文件和行号。

关键点：

• 打包配置中开启 sourcemap 输出（webpack 中设置 devtool: ‘source-map’）
• 部署时将 map 文件上传至指定目录，但不公开访问
• 服务端解析错误 stack 字段，调用解析库映射回源码位置

这一步极大提升调试效率，尤其适用于大型 SPA 应用。

基本上就这些。一套完整的错误监控不只是“捕获 + 上报”，更需要考虑准确性、性能开销和后续分析能力。合理设计，能让线上问题无处遁形。

以上就是JavaScript错误监控与上报实战_