前端错误监控需通过全局捕获、合理上报和堆栈还原提升稳定性。首先利用window.onerror和unhandledrejection监听运行时错误与Promise异常，捕获语法错误、资源加载失败等；针对跨域脚本需配置CORS以获取详细信息。错误上报采用navigator.sendBeacon确保页面卸载时数据不丢失，结合去重、采样机制降低服务器压力，并附带UA、URL等环境信息辅助定位。生产环境通过Source Map还原压缩代码的堆栈，精准定位原始源码行。系统应轻量稳定，聚焦核心环节，有效提升问题响应速度与用户体验。
前端错误监控对保障网站稳定运行至关重要，JavaScript 作为浏览器端的核心语言，其运行时错误若不及时捕获和上报，可能影响大量用户。构建一个可靠的错误处理与监控系统，不仅能快速定位问题，还能提升用户体验和开发效率。
JavaScript 常见错误类型
在实现监控前，需了解常见的错误来源：
- 语法错误（SyntaxError）：代码书写不规范导致解析失败，通常在开发阶段就能发现。
- 运行时错误（Runtime Error）：如访问 undefined 对象属性、调用不存在的方法等，最常见且最需要监控。
- 资源加载错误：script、image 等资源加载失败，可通过 error 事件捕获。
- Promise 异常未捕获：使用 unhandledrejection 事件监听未处理的 Promise 错误。
全局错误捕获机制
通过 JavaScript 提供的全局事件监听器，可以统一捕获大部分异常。
window.onerror 可捕获同步脚本错误和部分异步错误：
立即学习“Java免费学习笔记（深入）”；
window.onerror = function(message, source, lineno, colno, error) {
reportError({
message: error?.message || message,
stack: error?.stack,
url: source,
line: lineno,
column: colno,
type: 'runtime'
});
return true; // 阻止默认错误弹窗
};
window.addEventListener('unhandledrejection') 捕获未处理的 Promise 错误：
window.addEventListener('unhandledrejection', event => {
const reason = event.reason;
reportError({
message: reason?.message || String(reason),
stack: reason?.stack,
type: 'promise'
});
});
注意：跨域脚本错误会显示为 "Script error."，需配置 CORS 和 crossorigin 属性才能获取详细信息。
错误上报策略与优化
捕获错误后，应通过轻量方式上报至服务端，避免影响主流程。
- 使用 navigator.sendBeacon 上报，确保页面关闭时数据仍能发送。
- 对相同错误做去重处理，避免短时间内大量重复上报。
- 添加用户环境信息，如 UA、页面 URL、屏幕分辨率、是否移动端等，便于排查。
- 控制上报频率，可采用采样机制（如仅上报 10% 的错误）减轻服务器压力。
集成 Source Map 进行堆栈还原
生产环境中的 JS 通常是压缩过的，错误堆栈难以阅读。通过上传 Source Map 文件，并在服务端解析错误堆栈，可还原到原始代码位置。
关键步骤：
- 构建时生成 Source Map 并上传至监控平台。
- 服务端接收到错误后，根据 source、line、column 查找对应源码位置。
- 展示原始文件名和代码行，极大提升调试效率。
基本上就这些。一个实用的前端错误监控系统不需要太复杂，但要稳定、低开销、信息完整。只要抓住全局捕获、合理上报、堆栈还原三个核心环节，就能显著提升问题响应速度。
