前端错误处理需结合全局与局部捕获：通过window.onerror和unhandledrejection监听未捕获异常，try-catch处理同步风险操作，异步错误在作用域内捕获；上报使用sendBeacon或Image确保可靠性，并携带上下文信息；配合Source Map还原压缩代码堆栈，实现监控闭环。
JavaScript在运行过程中难免会遇到各种错误，比如语法错误、运行时异常、网络请求失败等。良好的错误处理机制不仅能提升用户体验，还能帮助开发者快速定位和修复问题。关键在于异常捕获与监控上报的合理结合。
全局异常捕获：监听未处理的错误
前端项目中，很多错误是意外抛出且未被捕获的。通过监听全局事件，可以兜底收集这些异常。
window.onerror 可以捕获大多数同步运行时错误：
window.onerror = function(message, source, lineno, colno, error) { console.error('全局错误:', { message, source, lineno, colno, error }); // 上报到服务器 reportError({ type: 'runtime', message, stack: error?.stack, url: source, line: lineno, column: colno }); return true; // 阻止默认错误弹窗};
注意：跨域脚本的错误信息会被浏览器屏蔽，显示为Script error.。解决方法是在引入外部脚本时设置 CORS 头部，并在 script 标签上添加 crossorigin="anonymous"。
立即学习“Java免费学习笔记（深入）”；
对于 Promise 中未被捕获的异常，需使用 unhandledrejection 事件：
window.addEventListener('unhandledrejection', function(event) { const reason = event.reason; console.warn('未处理的Promise拒绝:', reason); reportError({ type: 'promise', message: reason?.message || String(reason), stack: reason?.stack, url: window.location.href }); // 可选择阻止默认行为 event.preventDefault();});
局部异常捕获：try-catch 的正确使用
对于可预见的高风险操作，比如 JSON 解析、DOM 操作或调用不稳定 API，应主动使用 try-catch 捕获异常。
function safeJsonParse(str) { try { return JSON.parse(str); } catch (error) { reportError({ type: 'parse_error', message: error.message, stack: error.stack, input: str }); return null; }}
注意：try-catch 只能捕获同步错误。异步代码中的异常需要在对应的作用域内捕获：
腾讯智影
腾讯推出的在线智能视频创作平台
250 查看详情
setTimeout(() => { try { throw new Error("异步错误"); } catch (error) { reportError(error); }}, 1000);
错误上报策略：稳定可靠地发送数据
上报错误不能影响主流程，建议使用 navigator.sendBeacon 或降级为 Image 请求，避免被页面跳转中断。
function reportError(data) { const payload = JSON.stringify({ ...data, timestamp: Date.now(), userAgent: navigator.userAgent, url: location.href }); if (navigator.sendBeacon) { navigator.sendBeacon('/log-error', new Blob([payload], { type: 'application/json' })); } else { const img = new Image(); img.src = `/log-error?data=${encodeURIComponent(payload)}`; }}
上报内容应包含上下文信息，如用户行为路径、设备环境、页面状态等，便于复现问题。
Source Map 支持：还原压缩代码的堆栈
生产环境的 JavaScript 通常经过压缩混淆，错误堆栈难以阅读。通过配置 Source Map 并在服务端解析，可以把压缩后的行号列号映射回原始源码位置。
实现方式：
构建时生成 sourcemap 文件并部署到服务器 上报的错误携带 script URL、line、column 后端服务使用工具如 source-map npm 包进行反查
注意不要将 sourcemap 对外公开，防止源码泄露，可通过鉴权接口或内部系统解析。
基本上就这些。异常捕获要全面，上报要轻量可靠，再配合 sourcemap 和日志分析平台，就能形成有效的前端监控闭环。
以上就是JavaScript错误处理_异常捕获与监控上报的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/865291.html
微信扫一扫 
支付宝扫一扫 
