前端埋点 - 报错监控

2019-07-11 admin

说起埋点又到了谈起前端项目中数据收集与监控,那么今天来简单的聊下前端报错监控的埋点。

首先先安利下自己做的报错监控的项目 FE-Monitor 欢迎 issue 和 star 。

首先我们可以看下前端做报错监控的意义在哪里:

  • 帮助灰度测试发现问题
  • 收集线上错误日志
  • 帮助优化产品稳定性
  • 收集错误数据用于分析
  • 监控第三方资源/CDN 稳定性

总体来说前端监控的主要目的都是为了获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化方向。

常见监控方式

try {
    test code  // throw error
} catch(e){
    console.log(e);
}

上面的代码在项目中很常见,一般用来捕获某一段可能代码抛出的错误信息。并且在try catch 中的错误并不会阻塞整个页面,即使发生错误,页面也可以继续执行。

当然,我们不太可能对这个项目中的每一段代码都添加 try catch,这样不仅不利于线上定位问题产生的原因,也会让代码难以维护,目前主流的就是在项目中独立引入一个报错监控的 JS 来单独的完成对整个项目的监控。

比如 FE-Monitor 就提供开源的项目报错监控的能力,只需要将 SDK 引入自己的项目中,即可监控整个项目的js执行报错,资源加载异常,ajax错误等信息了。

ajax 错误监控

ajax 的错误监控主要是为了发现服务接口返回值的问题。

看了一些产品的实现都是对 window 下的 XMLHttpRequest 重写,但是这样直接重写不仅会造成调用链的修改也会让宿主页面上的多个 ajax 库产生冲突,如使用了 jquery 的话 jquery 中是直接使用 XMLHttpRequest 对象的。如果修改了全局的对象中的属性可能会造成以外的影响。

用了一种特殊的方式去实现对 XMLHttpRequest 对象的监听。

_initListenAjax: function () {
    let self = this;
    function ajaxEventTrigger(event) {
      var ajaxEvent = new CustomEvent(event, { detail: this });
      window.dispatchEvent(ajaxEvent);
     }
     var oldXHR = window.XMLHttpRequest;
     function newXHR() {
      var realXHR = new oldXHR();
      realXHR.addEventListener('load', function ($event) {
        ajaxEventTrigger.call(this, 'ajaxLoad');
      }, false);
      realXHR.addEventListener('timeout', function () {
        ajaxEventTrigger.call(this, 'ajaxTimeout');
      }, false);
      realXHR.addEventListener('readystatechange', function() {
        ajaxEventTrigger.call(this, 'ajaxReadyStateChange');
      }, false);
      return realXHR;
     }
     window.XMLHttpRequest = newXHR;
     self._startLintenAjax();
  }

这样做不仅可以一经调用就监控到页面的错误,不会出现重写 window.onerror 的时候第一次错误监控不到的情况还需要重写 console.error 函数才可以监听到。

error错误监控

错误监控中对 error 事件的监控是最重要的,监听 error 的事件主要是为了发现 js 执行中抛错。

window.addEventListener("error", function(err) {
      getError(err, self._config);
}, true);

监控 error 报错的情况中,最 error 的处理中要判断是否是我们设置的埋点接口的 URL 所抛错的。主要是为了避免在埋点服务宕机的情况下出现重复请求上报,造成页面卡死的情况。

监控资源加载异常

页面上有很多的外部的资源,一般来说对资源的加载的监控是在资源标签添加 onerror 的方法来监听加载错误信息。

支持onload的标签:<body>, <frame>, <frameset>, <iframe>, <img>, <input type=“image”>, <link>, <script>, <style>

支持onerror的标签:<img>, <input type=“image”>, <object>, <script>, <style> , <audio>, <video>

这种做法和对js 代码添加 try catch一样,需要对每个资源都不断的添加监控。

对比之后 使用 addEventListener 监控整体的项目资源加载更方便快捷。

window.addEventListener("error", function(err) {
      getError(err, self._config);
}, true);

其中 addEventListener 方法中的第三个参数是 useCapture,如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。

其中回调函数中接受的 err 中有 cancelable 属性的是js执行错误,所以可以通过 err 上时候有 cancelable 属性来判断不同类型的错误。

[转载]原文链接:https://segmentfault.com/a/1190000019732640

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69504.html

文章标题:前端埋点 - 报错监控

相关文章
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
H5即将迎来黄金时代 轻应用再成行业焦点
鎽樿�侊細浠庣伀閫熻交搴旂敤鑾峰緱鎶曡祫绛変腑涓嶉毦鐪嬪嚭锛孒TML5鍗冲皢杩庢潵榛勯噾鏃朵唬銆傝秺鏉ヨ秺澶氱殑浼佷笟鎴栧垱涓氳€呭紑濮嬫秹瓒矵5锛岃�╄交搴旂敤鍐嶆�℃垚涓鸿�屼笟鐨勭劍鐐癸紝鎺ヤ笅鏉ュ皢鏈夋洿澶欻5寮曟搸浠ュ強鏇村�欻5...
2015-11-12
Easyui Tree获取当前选择节点的所有顶级父节点
只支持四层目录结构,比较笨的一个方法 JS代码 var node = $(&#x27;#tree&#x27;).tree(&#x27;getSelected&#x27;); &#x2F;&#x2F;获取该节点所有父节点 ...
2017-03-17
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
javascript错误对象
根据错误的类型,你可以使用name和message属性获取精确信息。 name提供了错误的类(例如,domexception或Error),而message提供了一个更为简洁的信息,它把错误对象转换为字符串。 如果你是自定义抛出异常,那么,...
2015-11-12
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
js实现点击文本框显示日期选择器特效代码分享
本文实例讲述了JS+CSS实现美化的下拉列表框效果。分享给大家供大家参考。具体如下: 三款款经过JS+CSS美化的下拉列表,效果很不错,总有一款适合你,先看看运行效果图: 具体代码如下: &lt;head&gt; &lt;meta htt...
2017-03-29
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
回到顶部