JavaScript错误处理与监控系统

前端错误监控需通过全局捕获、合理上报和堆栈还原提升稳定性。首先利用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 错误：

挖错网

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

28

查看详情

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 查找对应源码位置。
• 展示原始文件名和代码行，极大提升调试效率。

基本上就这些。一个实用的前端错误监控系统不需要太复杂，但要稳定、低开销、信息完整。只要抓住全局捕获、合理上报、堆栈还原三个核心环节，就能显著提升问题响应速度。

以上就是JavaScript错误处理与监控系统的详细内容，更多请关注php中文网其它相关文章！