答案：前端项目需通过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 在页面卸载时仍能可靠发送数据，适合错误上报场景。
实现一个通用上报函数：
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 应用。
基本上就这些。一套完整的错误监控不只是“捕获 + 上报”，更需要考虑准确性、性能开销和后续分析能力。合理设计，能让线上问题无处遁形。
