`
haiyupeter
  • 浏览: 427542 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript异常监控

阅读更多
        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代码异常监控实现过程详解

    根据项目需求和团队实践,可以结合使用这两种方法来构建完善的JavaScript异常监控系统,确保线上应用的稳定性和可靠性。同时,对于跨域资源,记得正确配置CORS策略,以确保能获取到全面的异常数据。

    前端异常监控解决方案研究.docx

    ### 前端异常监控解决方案研究 #### 摘要 前端异常监控是现代Web应用程序不可或缺的一部分,旨在确保用户体验顺畅并及时发现潜在的技术问题。本文深入探讨了前端异常监控的基本概念、异常分类及其原因,同时提供了...

    一款前端异常监控插件

    在IT行业中,前端异常监控是确保应用程序稳定性和用户体验的关键部分。这款名为"前端异常监控插件"的工具,专门设计用于捕获、记录并报告在Web应用中出现的错误和异常情况,帮助开发者及时发现并解决潜在问题。下面...

    前端项目-airbrake-js.zip

    为了解决这一问题,"前端项目-airbrake-js.zip" 提供了一个解决方案——Airbrake-JS,它是一款强大的JavaScript异常监控工具,旨在帮助开发者实时捕获、报告并管理前端应用中的错误。 Airbrake-JS是Airbrake(现...

    腾讯CDC团队:前端异常监控解决方案.docx

    ### 腾讯CDC团队:前端异常监控解决方案 #### 前端监控概述 随着互联网技术的快速发展,前端技术在用户体验中的地位日益凸显。为了确保前端应用的稳定性和可用性,腾讯CDC团队提出了一套全面的前端异常监控解决方案...

    Front-End-Monitoring-Platform:前端工程化系列-前端监控平台的建造

    JavaScript异常监控:JavaScript异常的监控能极大改善项目质量; 页面内部请求监控:统计发送网络请求异常时的请求状态,请求时长,请求地址等; 资源加载监控:当需要下载资源到本地的出现异常时,统计加载时间,...

    前端代码异常监控方案window.onerror 1

    在遇到如标题所提到的"前端代码异常监控方案window.onerror 1"的问题时,我们需要探讨如何有效地捕获和处理JavaScript中的异常,以便快速响应并修复错误。这里我们将深入研究两种常见的前端异常处理方法:`try,catch...

    xbossdebug-wechat-小程序异常监控、性能收集.zip

    npm install -g rollup2、开发模式 (监听代码变化,生成xbossdebug.js)npm run watch3、编译(生成xbossdebug.min.js)npm run build方案设计思想TODO服务端记录数据数据并可视化资源加载监控页面性能监控...

    heyach#blog#异常监控1

    异常监控项目里经常会出现报错,有些是接口异常,有些是js本身的错误最常见的就是Uncaught TypeError: Cannot read property

    目录监控 监控文件夹

    1. 使用编程语言:例如Python的watchdog库,Java的WatchService API,JavaScript的chokidar库等,可以自定义监控规则并处理事件。 2. 命令行工具:在Linux上,使用inotify命令行工具,配合shell脚本实现自动化监控。...

    在线监控网址源码下载网站监控工具源码

    这种工具通常会定期发送请求到目标网址,检查是否能正常返回,若检测到异常,如页面加载失败、响应时间过长等,会触发报警通知。 【标签】"php" 表明这个监控工具的后端代码是用PHP语言编写的。PHP是一种广泛应用的...

    设备环境监控大屏html文件

    1. **温度监控**:通过折线图或柱状图展示各个设备或区域的温度变化趋势,以便及时发现异常高温情况。 2. **湿度监控**:同样以图表形式展示湿度变化,确保环境湿度处于适宜范围,防止设备受潮。 3. **功率监控**:...

    log4javascript

    1. **Web应用程序调试**:在开发过程中,使用log4javascript可以帮助定位和修复JavaScript代码中的错误和异常。 2. **性能分析**:通过记录关键操作的时间戳,可以分析页面加载和用户交互的性能。 3. **服务器日志...

    log4javascript-1.3.1

    `log4javascript`就是这样一款专为JavaScript设计的日志记录库,它借鉴了Java世界的log4j理念,旨在帮助开发者更有效地监控、调试和排查前端应用的问题。 **log4javascript介绍** `log4javascript`是基于...

    咕咕监控使用Ionic开发的网站与服务器监控App

    咕咕监控App利用Ionic框架和JavaScript技术,为用户提供了一款便捷的服务器和网站监控工具。它展示了JavaScript在移动应用开发中的强大能力,以及如何通过现代Web技术实现跨平台的移动应用。同时,它还涵盖了服务器...

    jsdt JavaScript 调试工具

    总之,`jsdt`作为一款专业的JavaScript调试工具,提供了丰富的调试功能,包括源代码查看、断点管理、步进执行、异常处理、事件监听、性能分析等,极大地提升了JavaScript开发的效率和质量。对于任何致力于提升...

    JavaScript脚本特效编程给力起飞pdf

    12. **错误处理**:如何使用try...catch语句捕获和处理运行时错误,以及如何通过抛出异常中断程序执行。 13. **性能优化**:讲解如何编写高效的JavaScript代码,包括减少DOM操作、避免阻塞渲染、使用事件委托等技巧...

    基于JavaScript和Python的元数据管理系统及数据字典设计源码

    本项目为基于JavaScript和Python构建的元数据管理系统,包含1080个文件,涵盖461个JavaScript文件、156个CSS文件、144个HTML文件、124个...此外,系统支持数据质量监控,用户可自定义逻辑对相关表或字段进行异常监控。

Global site tag (gtag.js) - Google Analytics