JavaScript错误追踪：前端日志系统指南

前端JavaScript错误追踪是保障网页稳定性的核心防线，本文系统梳理了从全局错误捕获（window.onerror）、Promise异常监听（window.onunhandledrejection）到堆栈还原、上下文采集（浏览器环境、操作历史、sourcemap反查）、敏感信息脱敏，再到智能上报策略（批量异步、采样控制、优先级分级、离线缓存补传）的完整闭环实践，既直击跨域脚本报错为“Script error.”等常见痛点，又兼顾性能与监控完整性，为开发者提供一套可落地、易扩展、细节扎实的线上问题定位解决方案。

前端日志系统中，JavaScript错误追踪是保障线上稳定性的关键环节。用户在使用网页时遇到的脚本异常，如果不及时捕获和分析，很难定位问题根源。通过合理的错误收集机制，可以快速发现并修复潜在缺陷。

捕获全局 JavaScript 错误

利用 window.onerror 可以监听未捕获的运行时错误，包括语法错误和脚本执行异常。该方法能获取错误信息、出错文件、行号和列号。

• 在页面中注册全局错误处理器，将错误信息结构化上报
• 注意跨域脚本的错误会显示为 "Script error."，需在 script 标签添加 crossorigin 属性并配置服务端 CORS 头部
• 支持异步错误如 setTimeout 中的异常，也能被 onerror 捕获

监听 Promise 异常

未被 .catch() 的 Promise 拒绝会被 window.onunhandledrejection 捕获。现代前端项目大量使用异步操作，这类错误必须纳入监控。

• 在事件回调中阻止默认行为（preventDefault）可避免控制台报错
• 提取 event.reason 获取拒绝原因，可能是 Error 对象或其他值
• 建议统一包装成标准错误格式再发送至日志服务器

收集堆栈信息与上下文

原始错误信息有限，增强数据采集有助于还原现场。

• 结合 sourcemap 工具反查压缩代码对应的源码位置
• 附加用户环境：浏览器、操作系统、页面 URL、网络状态
• 记录最近的操作行为或路由跳转历史，辅助排查触发路径
• 对敏感信息如 cookie 或输入内容做脱敏处理

上报策略与性能控制

频繁上报会影响用户体验，需平衡完整性与性能开销。

• 采用批量异步上报，避免阻塞主线程
• 设置采样率，在高流量场景下按比例收集（如 10%）
• 优先上报致命错误，警告类信息可延迟或合并发送
• 本地缓存错误记录，离线时暂存，恢复后补传

基本上就这些。一套有效的 JS 错误追踪机制，不只是监听几个事件，更需要从数据采集、传输到后台分析形成闭环。不复杂但容易忽略细节。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~