搭建前端监控系统(二)JS错误日志收集篇

===================代码展示================

      监控系统地址: Demo地址                         

    页面探针代码: GitHub地址               

    分析后台地址: GitHub地址                       

    展示平台地址: GitHub地址                       

===================代码展示================

  对于前端应用来说,Js错误的发生直接影响前端应用的质量。对Js异常的监控是整个前端监控系统中的一个重要环节。 那么如何做到对Js错误的监控呢?对搜集到的js错误,我们该如何去分析呢?分析的结果该如何展示呢?这些问题将直接关系到是否能够监控和分出去有价值的数据。

  首先,我们应该对Js报错情况有个大致的了解,这样才能够及时的了解前端项目的健康状况。所以我们需要分析出一些必要的数据。

  如:一段时间内,应用JS报错的走势(chart图表)、JS错误发生率、JS错误在PC端发生的概率、JS错误在IOS端发生的概率、JS错误在Android端发生的概率,以及JS错误的归类。

  然后,我们再去其中的Js错误进行详细的分析,辅助我们排查出错的位置和发生错误的原因。

  如:JS错误类型、 JS错误信息、JS错误堆栈、JS错误发生的位置以及相关位置的代码;JS错误发生的几率、浏览器的类型,版本号,设备机型等等辅助信息

一、JS Error 监控功能(数据预览)

  

为了得到这些数据,我们需要在上传的时候将其分析出来。在众多日志分析中,很多字段及功能是重复通用的,所以应该将其封装起来。

// 设置日志对象类的通用属性
  function setCommonProperty() {
    this.happenTime = new Date().getTime(); // 日志发生时间
    this.webMonitorId = WEB_MONITOR_ID;     // 用于区分应用的唯一标识(一个项目对应一个)
    this.simpleUrl =  window.location.href.split(‘?‘)[0].replace(‘#‘, ‘‘); // 页面的url
    this.customerKey = utils.getCustomerKey(); // 用于区分用户,所对应唯一的标识,清理本地数据后失效
    this.pageKey = utils.getPageKey();  // 用于区分页面,所对应唯一的标识,每个新页面对应一个值
    this.deviceName = DEVICE_INFO.deviceName;
    this.os = DEVICE_INFO.os + (DEVICE_INFO.osVersion ? " " + DEVICE_INFO.osVersion : "");
    this.browserName = DEVICE_INFO.browserName;
    this.browserVersion = DEVICE_INFO.browserVersion;
    // TODO 位置信息, 待处理
    this.monitorIp = "";  // 用户的IP地址
    this.country = "china";  // 用户所在国家
    this.province = "";  // 用户所在省份
    this.city = "";  // 用户所在城市
    // 用户自定义信息, 由开发者主动传入, 便于对线上进行准确定位
    this.userId = USER_INFO.userId;
    this.firstUserParam = USER_INFO.firstUserParam;
    this.secondUserParam = USER_INFO.secondUserParam;
  }

  // JS错误日志,继承于日志基类MonitorBaseInfo
  function JavaScriptErrorInfo(uploadType, errorMsg, errorStack) {
    setCommonProperty.apply(this);
    this.uploadType = uploadType;
    this.errorMessage = encodeURIComponent(errorMsg);
    this.errorStack = errorStack;
    this.browserInfo = BROWSER_INFO;
  }
  JavaScriptErrorInfo.prototype = new MonitorBaseInfo();

  封装了一个JsError对象JavaScriptErrorInfo,用以保存页面中产生的Js错误。其中,setCommonProperty用以设置所有日志对象的通用属性。

  1)重写window.onerror 方法, 大家熟知,监控JS错误必然离不开它,有人对他进行了测试测试介绍感觉也是比较用心了

  2)重写console.error方法,为什么要重写这个方法,我不能够给出明确的答案,如果App首次向浏览器注入的Js代码报错了,window.onerror是无法监控到的,所以只能以此方式来进行捕获,也许会有更好的办法,待window.onerror成功后,此方法便不再需要用了

  下边是启动JS错误监控代码

/**
   * 页面JS错误监控
   */
  function recordJavaScriptError() {
    // 重写console.error, 可以捕获更全面的报错信息
    var oldError = console.error;
    console.error = function () {
      // arguments的长度为2时,才是error上报的时机
      // if (arguments.length < 2) return;
      var errorMsg = arguments[0] && arguments[0].message;
      var url = WEB_LOCATION;
      var lineNumber = 0;
      var columnNumber = 0;
      var errorObj = arguments[0] && arguments[0].stack;
      if (!errorObj) errorObj = arguments[0];
      // 如果onerror重写成功,就无需在这里进行上报了
      !jsMonitorStarted && siftAndMakeUpMessage(errorMsg, url, lineNumber, columnNumber, errorObj);
      return oldError.apply(console, arguments);
    };
    // 重写 onerror 进行jsError的监听
    window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj)
    {
      jsMonitorStarted = true;
      var errorStack = errorObj ? errorObj.stack : null;
      siftAndMakeUpMessage(errorMsg, url, lineNumber, columnNumber, errorStack);
    };

    function siftAndMakeUpMessage(origin_errorMsg, origin_url, origin_lineNumber, origin_columnNumber, origin_errorObj) {
      var errorMsg = origin_errorMsg ? origin_errorMsg : ‘‘;
      var errorObj = origin_errorObj ? origin_errorObj : ‘‘;
      var errorType = "";
      if (errorMsg) {
        var errorStackStr = JSON.stringify(errorObj)
        errorType = errorStackStr.split(": ")[0].replace(‘"‘, "");
      }
      var javaScriptErrorInfo = new JavaScriptErrorInfo(JS_ERROR, errorType + ": " + errorMsg, errorObj);
      javaScriptErrorInfo.handleLogInfo(JS_ERROR, javaScriptErrorInfo);
    };
  };

OK, 错误日志有了,该怎么计算错误率呢?

  JS错误发生率 = JS错误个数(一次访问页面中,所有的js错误都算一次)/PV (PC,IOS,Android平台同理)

所以我们需要记下页面的PV记录

 // 用户访问行为日志(PV)
    function CustomerPV(uploadType, loadType, loadTime) {
      setCommonProperty.apply(this);
      this.uploadType = uploadType;
      this.loadType = loadType;  // 用以区分首次加载
      this.loadTime = loadTime; // 加载时间
    }
    CustomerPV.prototype = new MonitorBaseInfo();
    /**
     * 添加一个定时器,进行数据的上传
     * 3秒钟进行一次URL是否变化的检测
     * 15秒钟进行一次数据的检查并上传
     */
    var defaultLocation = window.location.href.split(‘?‘)[0].replace(‘#‘, ‘‘);
    var timeCount = 0;
    setInterval(function () {
      // 如果是单页应用, 只更改url
      var webLocation = window.location.href.split(‘?‘)[0].replace(‘#‘, ‘‘);
      // 如果url变化了, 就把更新的url记录为 defaultLocation, 重新设置pageKey
      if (defaultLocation != webLocation) {
        recordPV();
        defaultLocation = webLocation;
      }
      // 循环5后次进行一次上传
      if (timeCount >= 5) {
        var logInfo = localStorage[ELE_BEHAVIOR] || "" +
          localStorage[JS_ERROR] || "" +
          localStorage[CUSTOMER_PV] || "";
        if (logInfo) {
          utils.ajax("POST", HTTP_UPLOAD_LOG_INFO, {logInfo: logInfo}, function (res) {
            // 上传完成后,清空本地记录
            if (res.code === 200) {
              localStorage[ELE_BEHAVIOR] = "";
              localStorage[JS_ERROR] = "";
              localStorage[CUSTOMER_PV] = "";
            }
          })
        }
        timeCount = 0;
      }
      timeCount ++;
    }, 3000);

  上边的代码我用了定时器,大概的意思是3秒进行一次URL变化的检查,15进行一次数据的检查,如果有数据就进行上传,并清空上一次的数据。为什么用定时器呢,因为在单页应用中,路由的切换和地址栏的变化是无法被监控的,我确实没有想到特别好的办法来监控,所以用了这种方式,如果有人有更好的办法,请给我留言,谢谢

  到此,已经收集到了JS错误日志的大部分信息了,只需要将其上传,入库,再进行分析展现,就可以看到JS错误信息的预览效果,所以,我们再去部署一下后台代码。

  下一章: 搭建前端监控系统(三)NodeJs服务器部署篇



  

  为了将这些数据上传到我们的服务器,我们总不能每次都用xmlHttpRequest来发送ajax请求吧,

  所以我们需要自己封装一个简单的Ajax

/**
     *
     * @param method  请求类型(大写)  GET/POST
     * @param url     请求URL
     * @param param   请求参数
     * @param successCallback  成功回调方法
     * @param failCallback   失败回调方法
     */
    this.ajax = function(method, url, param, successCallback, failCallback) {
      var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);
      xmlHttp.open(method, url, true);
      xmlHttp.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
      xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          var res = JSON.parse(xmlHttp.responseText);
          typeof successCallback == ‘function‘ && successCallback(res);
        } else {
          typeof failCallback == ‘function‘ && failCallback();
        }
      };
      xmlHttp.send("data=" + JSON.stringify(param));
    }

原文地址:https://www.cnblogs.com/warm-stranger/p/9417084.html

时间: 2024-10-18 01:43:30

搭建前端监控系统(二)JS错误日志收集篇的相关文章

从零开始搭建前端监控系统(三)——实现控制iframe前进后退

前言 本系列文章旨在讲解如何从零开始搭建前端监控系统. 项目已经开源 项目地址: https://github.com/bombayjs/bombayjs (web sdk) https://github.com/bombayjs/bombayjs-server (服务端,用于提供api)(未完) https://github.com/bombayjs/bombayjs-admin (后台管理系统,可视化数据等)(未完) 您的支持是我们不断前进的动力. 喜欢请start!!! 喜欢请start!

前端监控系统

概述在开发项目的过程中,正式环境出现了浏览器crash,这种情况在开发过程中无法复现,是一个需要长期追踪的问题,因此项目中引入了前端监控系统. 资源加载出错的捕获方案<img src="image.gif" onerror="myFunction()"> document.getElementById("myImg").addEventListener("error", myFunction); function

使用monit搭建一个监控系统

上周用monit搭建或者说定制了一个监控系统,来监控服务器发生事情.当然了主要是监控异常,因为我们的产品属于服务器类型,很多进程都daemon,要不停的运行.我们搭建监控目的不过是出现问题能够及时的知道,平时可从web UI上看到整个系统的状况,同时它本身要轻量级,不要影响性能.当然了类似的产品很多了,比如Ganglia,我在老科长波哥曾经搭建过一个Ganglia系统监控科室十几台服务器,让我很是崇拜.本文重点介绍monit.                      monit是一个可以监控系

Zabbix监控系统二:配置邮件报警

在zabbix的使用中,最重要的一点就是完善的报警机制,作为监控平台,需要时刻关注机器和服务的运行状态,更重要的是发现故障之后需要及时的报警给相关人员,早点发现问题,将隐患消除在未然阶段.这样才能保证服务的稳定运行.报警的方式是多种多样的,微信.短信和邮件报警是我们比较常见的方式. 邮件报警的配置主要划分为一下几个步骤: 1.在zabbix服务端配置邮件发送脚本和修改zabbix服务端配置文件; 2.在zabbix前端控制台进行相关设置: 实验环境 Zabbix监控服务器.客户端都已经部署完成,

发送JS错误日志到服务器

JS记录错误日志/捕捉错误 //onerror提供异常信息,文件路径和发生错误代码的行数的三个参数. window.onerror = function(e,url,index){ var msg = e.message || e|| "未知错误"; alert("错误信息:"+msg+",错误路径:"+ul+",行数:"+index); } ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 1

捕获JS 错误日志

最近在做项目的过程中,发现很多JS报错没有引起重视,我就想想把JS错误捕获了,然后展示在我们一个平台上 具体实现代码: window.onerror = function(message, url, lineNumber,columnNo,error) {     var data = {         'message':message,         'url':url,         'error':error.stack     };     $.ajax({         ur

Linux系统搭建zabbix监控系统实例讲解

第一步,配置本地yum仓库,如下 1,挂载,挂载光驱到/mnt mount /dev/cdrom /mnt2,创建目录 mkdir -p /repo/cos7dvd3,然后使用命令创建yum仓库文件,注意指定正确的软件源位置yum-config-manager --add-repo file:///repo/cos7dvd/4,使用 yum repolist命令检测刚创建的yum软件仓库是否正常.5,使用yum clean all 清空缓存(非必要步骤,在yum更新时使用)6,使用vim编辑器给

centos 搭建 nagios 监控系统.

linux下搭建nagios监控 一.什么是nagios 1.nagios 简介 Nagios是一个监视系统运行状态和网络信息的监视系统. Nagios能监视所指定的本地或远程主机以及服务,同时提供异常通知功能等. Nagios可运行在Linux/Unix平台之上,同时提供一个可选的基于浏览器的WEB界面以方便系统管理人员查看网络状态, 各种系统问题,以及日志等等. Nagios是十分受欢迎的.开源且免费的计算机及网络系统监控软件. Nagios是"Nagios Ain't Gonna Insi

搭建zabbix监控系统详解

博文大纲:一.前言 二.zabbix监控架构三.搭建Zabbix监控服务器 一.前言 : 要想实时的了解服务器的运行状况并且能在出现问题时及时解决,利用监控软件是一个很好的选择,而zabbix监控系统则在众多监控软件中脱颖而出. zabbix是一个基于web界面的企业级开源监控软件,Zabbix服务器需要LAMP环境或LNMP环境,提供分布式系统监控与网络监视功能.具备主机的性能监控,网络设备性能监控,数据库性能监控,多种告警方式,详细报表.图表的绘制等功能.监测对象可以是Linux或Windo