OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

使用Google Analytics跟踪捕获JavaScript,AngularJS,jQuery的在线错误和异常


分享到
分类 编程技巧   关键字 前端   发布 ourjs  1425454336770
注意 转载须保留原文链接,译文链接,作者译者等信息。  
谷歌Analytics(分析)是最流行的网站统计服务。它有多种用途:跟踪访问者的会话活动和事件。

(注* 尽管谷歌在中国无法访问,但它的分析服务中可用的,访问分析管理界面需要借助代理。)

它能够跟踪任何事件。因此我们可以通过谷歌Analytics(分析)发送和跟踪任何数据。其中最重要的一个应用场景就是,为Web开发人员分析网页上可能产生或未发现的错误和异常。

到目前为止,谷歌提出了2种方式跟踪事件方式:

  •  经典的ga.js与 以 _gaq.push(...) 接口发送
  •  新的通用分析analytics.js,通过 ga('send',...) 语法发送。

我们来看一看JavaScript,AngularJS和jQuery的异常跟踪。

经典的ga.js


当你正在使用谷歌分析时,它会以下面的方式进行工作:


var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function () {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();

JavaScript错误error


下面的代码将会把所有JS抛出的错误(错误信息和发生错误的时间)信息发送给GA; navigator.userAgent 提供用户浏览器的信息,将有助于简化分析异常发生的原因。

//纯JavaScript错误处理程序
window.addEventListener('error', function (err) {
    var lineAndColumnInfo = err.colno ? ' line:' + err.lineno +', column:'+ err.colno : ' line:' + err.lineno;
    _gaq.push([
        '_trackEvent',
        'JavaScript Error',
        err.message,
        err.filename + lineAndColumnInfo + ' -> ' +  navigator.userAgent,
        0,
        true
    ]);
});

AngularJS异常处理程序


AngularJS通过exceptionHandler捕捉所有未捕获的异常。

// AngularJS错误处理程序
angular.module('loggerApp')
        .config(function ($provide) {
            $provide.decorator("$exceptionHandler", function ($delegate) {
                return function (exception, cause) {
                    $delegate(exception, cause);
                    _gaq.push([
                        '_trackEvent',
                        'AngularJS error',
                        exception.message,
                        exception.stack,
                        0,
                        true
                    ]);
                };
            });
        });


jQuery异常


jQuery提供.error()方法,它将帮助开发者捕获异常。

// jQuery的错误处理程序(jQuery的API)
jQuery.error = function (message) {
    _gaq.push([
        '_trackEvent',
        'jQuery Error',
        message,
        navigator.userAgent,
        0,
        true
    ]);
}

jQuery的AJAX错误处理程序


每当用一个Ajax请求发生错误时,jQuery就会触发ajaxError事件。

// jQuery的AJAX错误处理程序(jQuery的API)
$(document).ajaxError(function (event, request, settings) {
    _gaq.push([
        '_trackEvent',
        'jQuery Ajax Error',
        settings.url,
        JSON.stringify({
            result: event.result,
            status: request.status,
            statusText: request.statusText,
            crossDomain: settings.crossDomain,
            dataType: settings.dataType
        }),
        0,
        true
    ]);
});


新版analytics.js


如果您使用的是新牌的API,它可能像下面这样:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('send', 'pageview');


下面是在新版analytics.js代码上,追踪错误异常。

JavaScript错误


window.addEventListener('error', function (err) {
    var lineAndColumnInfo = err.colno ? ' line:' + err.lineno +', column:'+ err.colno : ' line:' + err.lineno;
    ga(
        'send',
        'event',
        'JavaScript Error',
        err.message,
        err.filename + lineAndColumnInfo + ' -> ' +  navigator.userAgent,
        0,
        true
    );
});

AngularJS异常处理程序


// AngularJS错误处理程序
angular.module('loggerApp')
        .config(function ($provide) {
            $provide.decorator("$exceptionHandler", function ($delegate) {
                return function (exception, cause) {
                    $delegate(exception, cause);
                    ga(
                        'send',
                        'event',
                        'AngularJS error',
                        exception.message,
                        exception.stack,
                        0,
                        true
                    );
                };
            });
        });

jQuery的错误


// jQuery的错误处理程序(jQuery的API)
jQuery.error = function (message) {
    ga(
        'send',
        'event',
        'jQuery Error',
        message,
        navigator.userAgent,
        0,
        true
    );
}

jQuery的AJAX错误处理程序


// jQuery的AJAX错误处理程序(jQuery的API)
$(document).ajaxError(function (event, request, settings) {
    ga(
        'send',
        'event',
        'jQuery Ajax Error',
        settings.url,
        JSON.stringify({
            result: event.result,
            status: request.status,
            statusText: request.statusText,
            crossDomain: settings.crossDomain,
            dataType: settings.dataType
        }),
        0,
        true
    );
});


完整的示例如下:

经典版 http://codepen.io/malyw/pen/myLPeJ
最新版 http://codepen.io/malyw/pen/MYGwzz



在GA中检验数据


在GA中你可以找到两种主要的事件报告



实时在线事件




普通事件报告




原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 将BootstrapJS和AngularJS结合使用以及为什么不用jQuery
  2. 让我们写快速的JavaScript,JS性能优化小窍门
  3. CSS Sprite小图片自动合并工具(NodeJS,Python,Java,Ruby)
  4. 专为控制打印设计的CSS样式
  5. Session劫持与Session-ID的安全长度
  6. 通过Web Audio API可视化输出MP3音乐频率波形
  7. 服务器端(NodeJS)使用jQuery选择器操作DOM(HTML/XML)
  8. Sortable极小的可拖放排序分组库;支持AngularJS,React,Meteor
  9. 我为什么不再用Compass写CSS(缺点分析)
  10. 使用Node.JS监听文件夹变化
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. Node.JS开发者常犯的10个错误(一)
  2. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  3. 更快地定位DOM(HTML)元素的方法(Rails)
  4. Go语言实例教程基础语法:数组操作篇(二)
  5. 一些你不知道的JavaScript Console调试命令
  6. Go语言实例教程基础语法篇(一)
  7. 如何选择Node.js Web开发框架?
  8. 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack
  9. 创造canvas的艺术
  10. 有可能将CSS应用到一个字符的一半吗?

 关键字 - 前端
  1. 5个经典的前端面试问题
  2. AngularJS在大型单页面应用中的性能优化(一)
  3. 我们抛弃了AngularJS:单页面应用的5大缺陷
  4. CSS3实现的响应式字体:自适应视图窗口大小的新单位
  5. 我被问得最多的十个JavaScript前端面试问题
  6. Animate.css让添加CSS动画像喝水一样容易
  7. 用纯css改变下拉列表select框的默认样式
  8. 用纯CSS停止冒泡和阻止浏览器默认行为及事件响应,达到禁用(disable)的目的
  9. 10个值得前端收藏的CSS3动效库(工具)
  10. 前端开发工程师岗 招聘

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号