使用try-catch捕获同步异常，仅限同步代码；2. window.onerror监听全局错误，可捕获运行时及脚本加载错误，但跨域需CORS支持；3. addEventListener(‘error’)实现细粒度资源加载错误监控；4. unhandledrejection事件处理未捕获的Promise错误；5. 通过fetch将包含错误详情的日志上报服务端。组合使用这些方法可构建完整前端错误监控体系，实现问题快速定位与修复。
在JavaScript开发中，错误监控和异常捕获是保障应用稳定运行的重要环节。前端代码运行在用户浏览器中，环境复杂多变，网络、设备、浏览器兼容性等问题都可能导致脚本出错。如果不对这些异常进行有效捕获和上报，开发者很难及时发现并修复问题。下面介绍几种常用的JavaScript错误监控与异常捕获方法。
1. 使用 try-catch 捕获同步异常
try-catch 是最基本的异常捕获机制，适用于同步代码中的错误处理。
将可能出错的代码放在 try 块中 catch 块用于接收并处理错误对象 只能捕获同步错误，无法捕获异步或语法错误
示例：
try { JSON.parse('invalid json');} catch (error) { console.error('解析失败:', error.message);}
2. window.onerror 全局错误监听
通过监听全局的 error 事件，可以捕获未被处理的运行时错误，包括脚本加载错误和同步异常。
立即学习“Java免费学习笔记（深入）”；
能捕获大部分同步错误和资源加载错误 对于跨域脚本，默认情况下错误信息会被屏蔽为 “Script error.” 需配合 CORS 设置才能获取详细错误信息
使用方式：
window.onerror = function(message, source, lineno, colno, error) { console.log('错误信息:', message); console.log('出错文件:', source); console.log('行号:', lineno); console.log('列号:', colno); console.log('错误对象:', error); // 可在此处发送错误日志到服务器 return true; // 阻止默认错误提示};
3. addEventListener(‘error’) 更细粒度的错误监听
addEventListener 支持对不同类型的错误进行区分处理，比如资源加载错误、Promise 错误等。
可监听 script、img、link 等资源加载失败 不会触发 preventDefault()，但返回 false 无效 常用于捕获跨域脚本的加载错误
示例：
window.addEventListener('error', function(event) { if (event.filename) { console.log('资源加载失败:', event.target.src || event.target.href); }}, true);
4. Promise 异常捕获：unhandledrejection
未处理的 Promise 拒绝（reject）会引发 unhandledrejection 事件，必须单独监听。
避免 Promise 错误静默失败 event.reason 包含拒绝原因 建议始终为 Promise 添加 catch 处理
监听方式：
window.addEventListener('unhandledrejection', function(event) { console.log('未处理的Promise错误:', event.reason); event.preventDefault(); // 阻止控制台报错（谨慎使用）});
5. 上报错误日志到服务端
捕获错误后，应将其发送到服务器进行集中分析。
使用 XMLHttpRequest 或 fetch 发送错误数据 包含关键信息：错误类型、堆栈、URL、用户代理、时间戳 注意控制上报频率，避免影响用户体验
简单上报函数：
function reportError(data) { fetch('/api/log-error', { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json' } });}
基本上就这些核心方法。合理组合使用 try-catch、onerror、error 事件监听和 unhandledrejection，再配合错误上报机制，就能构建一个基础但有效的前端错误监控体系。关键是尽早发现、快速定位、及时修复。不复杂但容易忽略细节。
以上就是JS错误监控与异常捕获方法_javascript调试的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1538277.html
微信扫一扫 
支付宝扫一扫 
