JavaScript异常一般可通过try catch捕获,但try catch对于延时执行的代码无法进行捕获,此时只能依靠window.onerror捕获,从中拿到错误信息。同时需要将错误信息进行统一的处理,如记录链接,并将该链接发生的错误进行统计。
try catch 和 window.onerror异常捕获已在另一篇文章说基本讲解,在此讲解捕获异常信息的详细。
开发人员比较关注:(1)当前是哪个浏览器;(2)错误信息;(3)调用堆栈;
浏览器信息的获取
浏览器信息存储于navigator.userAgent中
var ua = navigator.userAgent.toLowerCase(),
bom = window.ActiveXObject ? "IE" + ua.match(/msie ([d.]+)/)[1]
: document.getBoxObjectFor ? "Firefox" + ua.match(/firefox/([d.]+)/)[1]
: (ua.indexOf("chrome") != -1) ? "Chrome" + ua.match(/chrome/([d.]+)/)[1]
: window.opera ? "Opera" + ua.match(/opera.([d.]+)/)[1]
: window.openDatabase ? "Safari" + ua.match(/version/([d.]+)/)[1] : ua.replace(/s*/g, "");
正则表达式,大家都懂的,匹配的是各个浏览器下的浏览器名称及浏览器版本号
错误信息
信息格式:浏览器及版本号 | 链接:堆栈 | 错误信息
调用堆栈
思路大致是:若事件中包含stack堆栈信息,则从e.stack中获取信息;否则,如果参数arguments包含callee上级,则循环calle对象,将调用堆栈获取到;否则,只能返回空。
(function() {
function $getStack(e, d) {
if (e && e.stack) {
var s = e.stack.replace(/(?:http:)[^:]*:(.*)/g, "$1").replace(
/[ns]/g, "").replace(/@/g, "at").split("at"), l = d ? d + 1
: s.length - 1;
return s.slice(1, l).join(":");
} else if (arguments.callee.caller.caller) {
var curr = arguments.callee.caller.caller, c, o = [];
while (curr) {
c = curr;
o.push(c.toString().replace(/function/g, "Fn").replace(
/[tnr]/g, "").substring(0, 30));
curr = curr.caller;
}
return o.join(":");
} else {
return "";
}
};
function $initBadjs() {
var errorStr = "";
window.onerror = function(msg, url, l) {
var stack = $getStack(), ts = msg.replace(/n/g, " ") + "|"
+ encodeURIComponent(url + ":" + stack) + "|" + l;
if (errorStr.indexOf(ts) == -1) {
errorStr += ts + ",";
$sendBadjs(msg, url, l + ":" + stack);
}
return false;
};
}
;
function $sendBadjs(msg, src, d) {
var ua = navigator.userAgent.toLowerCase(),
bom = window.ActiveXObject ? "IE" + ua.match(/msie ([d.]+)/)[1]
: document.getBoxObjectFor ? "Firefox" + ua.match(/firefox/([d.]+)/)[1]
: (ua.indexOf("chrome") != -1) ? "Chrome" + ua.match(/chrome/([d.]+)/)[1]
: window.opera ? "Opera" + ua.match(/opera.([d.]+)/)[1]
: window.openDatabase ? "Safari" + ua.match(/version/([d.]+)/)[1] : ua.replace(/s*/g, ""),
ts = msg.replace(/n/g, " ") + "|" + encodeURIComponent(src) + "|" + d;
setTimeout(function() {
sr = document.createElement("script");
document.getElementsByTagName("head")[0].appendChild(sr);
// 此处后台可以做数据的统计及收集
sr.src = "http://42.96.169.98/projdemo/TestError?Browser=" + bom
+ "&Url=" + encodeURIComponent(location.href) + "&Content="
+ ts + "&t=" + Math.random();
}, 1000);
}
;
$initBadjs();
window._sendBadjs = $sendBadjs;
})();
参考
w3c onerror : http://www.w3.org/TR/2010/WD-html5-20100624/webappapis.html#handler-window-onerror
msdn onerror : http://msdn.microsoft.com/en-us/library/cc197053%28VS.85%29.aspx
firefox chrome onerror : http://stackoverflow.com/questions/5913978/cryptic-script-error-reported-in-javascript-in-chrome-and-firefox
分享到:
相关推荐
根据项目需求和团队实践,可以结合使用这两种方法来构建完善的JavaScript异常监控系统,确保线上应用的稳定性和可靠性。同时,对于跨域资源,记得正确配置CORS策略,以确保能获取到全面的异常数据。
### 前端异常监控解决方案研究 #### 摘要 前端异常监控是现代Web应用程序不可或缺的一部分,旨在确保用户体验顺畅并及时发现潜在的技术问题。本文深入探讨了前端异常监控的基本概念、异常分类及其原因,同时提供了...
在IT行业中,前端异常监控是确保应用程序稳定性和用户体验的关键部分。这款名为"前端异常监控插件"的工具,专门设计用于捕获、记录并报告在Web应用中出现的错误和异常情况,帮助开发者及时发现并解决潜在问题。下面...
为了解决这一问题,"前端项目-airbrake-js.zip" 提供了一个解决方案——Airbrake-JS,它是一款强大的JavaScript异常监控工具,旨在帮助开发者实时捕获、报告并管理前端应用中的错误。 Airbrake-JS是Airbrake(现...
### 腾讯CDC团队:前端异常监控解决方案 #### 前端监控概述 随着互联网技术的快速发展,前端技术在用户体验中的地位日益凸显。为了确保前端应用的稳定性和可用性,腾讯CDC团队提出了一套全面的前端异常监控解决方案...
JavaScript异常监控:JavaScript异常的监控能极大改善项目质量; 页面内部请求监控:统计发送网络请求异常时的请求状态,请求时长,请求地址等; 资源加载监控:当需要下载资源到本地的出现异常时,统计加载时间,...
在遇到如标题所提到的"前端代码异常监控方案window.onerror 1"的问题时,我们需要探讨如何有效地捕获和处理JavaScript中的异常,以便快速响应并修复错误。这里我们将深入研究两种常见的前端异常处理方法:`try,catch...
npm install -g rollup2、开发模式 (监听代码变化,生成xbossdebug.js)npm run watch3、编译(生成xbossdebug.min.js)npm run build方案设计思想TODO服务端记录数据数据并可视化资源加载监控页面性能监控...
异常监控项目里经常会出现报错,有些是接口异常,有些是js本身的错误最常见的就是Uncaught TypeError: Cannot read property
1. 使用编程语言:例如Python的watchdog库,Java的WatchService API,JavaScript的chokidar库等,可以自定义监控规则并处理事件。 2. 命令行工具:在Linux上,使用inotify命令行工具,配合shell脚本实现自动化监控。...
这种工具通常会定期发送请求到目标网址,检查是否能正常返回,若检测到异常,如页面加载失败、响应时间过长等,会触发报警通知。 【标签】"php" 表明这个监控工具的后端代码是用PHP语言编写的。PHP是一种广泛应用的...
1. **温度监控**:通过折线图或柱状图展示各个设备或区域的温度变化趋势,以便及时发现异常高温情况。 2. **湿度监控**:同样以图表形式展示湿度变化,确保环境湿度处于适宜范围,防止设备受潮。 3. **功率监控**:...
1. **Web应用程序调试**:在开发过程中,使用log4javascript可以帮助定位和修复JavaScript代码中的错误和异常。 2. **性能分析**:通过记录关键操作的时间戳,可以分析页面加载和用户交互的性能。 3. **服务器日志...
`log4javascript`就是这样一款专为JavaScript设计的日志记录库,它借鉴了Java世界的log4j理念,旨在帮助开发者更有效地监控、调试和排查前端应用的问题。 **log4javascript介绍** `log4javascript`是基于...
咕咕监控App利用Ionic框架和JavaScript技术,为用户提供了一款便捷的服务器和网站监控工具。它展示了JavaScript在移动应用开发中的强大能力,以及如何通过现代Web技术实现跨平台的移动应用。同时,它还涵盖了服务器...
总之,`jsdt`作为一款专业的JavaScript调试工具,提供了丰富的调试功能,包括源代码查看、断点管理、步进执行、异常处理、事件监听、性能分析等,极大地提升了JavaScript开发的效率和质量。对于任何致力于提升...
12. **错误处理**:如何使用try...catch语句捕获和处理运行时错误,以及如何通过抛出异常中断程序执行。 13. **性能优化**:讲解如何编写高效的JavaScript代码,包括减少DOM操作、避免阻塞渲染、使用事件委托等技巧...
本项目为基于JavaScript和Python构建的元数据管理系统,包含1080个文件,涵盖461个JavaScript文件、156个CSS文件、144个HTML文件、124个...此外,系统支持数据质量监控,用户可自定义逻辑对相关表或字段进行异常监控。