前端代码错误日志监控——Sentry

随着项目工程化的发展，对于提高产品性能的要求也愈来愈多。产品即使经过研发自测，测试各类测，到了用户使用过程当中，依然仍是会出现一些bug；这对这些bug，不是全部用户会进行反馈（难以发现这些问题）甚至抛弃对于产品的使用；并且这些问题的复现性也相对困难。所以，对于bug的及时发现和解决，成为产品优化的一个考虑重心。

通常状况下，捕获错误的方法——

一、window.onerror针对整个js文件进行全局错误监控

二、try…catch针对性的进行错误监控

三、throw new Error()

捕获的错误的展现——

一、经过这二者进行错误捕获时，浏览器的console就不会输出错误信息，除非咱们将错误信息 经过console.error打印显示。

二、浏览器做为js的宿主，错误信息也只限于浏览器进行捕获和显示，刷新后错误提示可能不会复现

若是须要经过平台实时监测并查询错误日志——解决思路：

一、若是须要一个平台能够查看全部日志信息，就须要将捕获的错误log进行保存，好比localStorage。

二、保存后还须要发送到服务端，便于在另外一个平台进行统一查看。

三、期间产生跨域的问题

经过信息查询和后台小伙伴的推荐，了解的两种能够进行前端错误日志监控的平台——

一、https://fundebug.com/          中文版，易操做，仅限于JavaScript

二、https://sentry.io/     英文版，兼容先后端多种语言类型

目前，用了一个经过vue-cli搭建的后台管理系统，对进行了 sentry的错误收集代码测试，实现过程——————————  

一、在该平台注册用户并新建项目后，安装

 

import Vue from 'vue'
//测试错误获取
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Vue.prototype.$Raven = Raven; //设置全局变量
Raven
  .config('https://')
  .addPlugin(RavenVue, Vue)
  .install();

二、全局监控代码

 

 

window.onerror = function(msg, url, line, col, error) {
  //console.log(msg + '--' + url + '--' + line + '--' + col + '--' + error);
  //没有URL不上报！上报也不知道错误
  if (msg != "Script error." && !url) {
    return true;
  }
  //采用异步的方式
  //我遇到过在window.onunload进行ajax的堵塞上报
  //因为客户端强制关闭webview致使此次堵塞上报有Network Error
  //我猜想这里window.onerror的执行流在关闭前是必然执行的
  //而离开文章以后的上报对于业务来讲是可丢失的
  //因此我把这里的执行流放到异步事件去执行
  //脚本的异常数下降了10倍
  setTimeout(function() {
    var data = {};
    //不必定全部浏览器都支持col参数
    col = col || (window.event && window.event.errorCharacter) || 0;

    data.url = url;
    data.line = line;
    data.col = col;
    if (!!error && !!error.stack) {
      //若是浏览器有堆栈信息
      //直接使用
      data.msg = error.stack.toString();
    } else if (!!arguments.callee) {
      //尝试经过callee拿堆栈信息
      var ext = [];
      var f = arguments.callee.caller,
        c = 3;
      //这里只拿三层堆栈信息
      while (f && (--c > 0)) {
        ext.push(f.toString());
        if (f === f.caller) {
          break; //若是有环
        }
        f = f.caller;
      }
      ext = ext.join(",");
      data.msg = ext;
    }
    console.log(data);
    Raven.captureException(data, {
      level: 'info', // one of 'info', 'warning', or 'error'
      logger: 'window',
      tags: { git_commit: 'window' }
    });
    //把data上报到后台！
  }, 0);
  return true;
}

三、单独的方法监控

 

 

let funcLog = (func, val) => {
  try {
    if (val) {
      func(val);
    } else {
      func();
    }
  } catch (e) {
    Raven.captureBreadcrumb({
      message: '获取方法或者参数错误',
      category: 'function',
    });
    Raven.captureException(e, {
      level: 'error', // one of 'info', 'warning', or 'error'
      logger: 'function',
      tags: { git_commit: 'function' }
    });
  }
}

四、ajax数据交互的监控，该项目采用的是vue-resource，仅用post方法为例

 

 

let ajaxLog_post = (that, url, data, success_func, error_func, all_func) => {
  let _this = that;
  //console.log('get');
  _this.$http.post(url, data, {
      before: function() {
       
      }
    })
    .then(function(response) {
      //console.log('get2');
      _this.loading = false;
      if (all_func) {
        all_func(data);
        return false;
      }
      let data_return = response.body;
      //console.log(data_return);
      if (data_return.respcd == '0000') {
        try {
          if (success_func) {
            success_func(data_return);
          }
        } catch (e) {
          console.error(e);
          _this.$Raven.captureException(e, {
            level: 'error', // one of 'info', 'warning', or 'error'
            logger: 'ajaxPost_function',
            tags: { git_commit: 'ajaxPost_function' }
          });
        }
      } else {
        if (data_return.respmsg) {
          _this.toastmsg = data_return.respmsg;
        } else {
          _this.toastmsg = data_return.resperr;
        }
        _this.visible_toast = true;
        if (error_func) {
          error_func(data_return);
        }
      }
    }, function(response) {
      
    })
    .catch(function(response) {
      
    });
}

五、备注

一、参考

http://www.cnblogs.com/xianyulaodi/p/6201829.html

 

二、在ajax数据交互过程当中，执行的事件发生错误，window.onerror捕获不到，故须要单独处理；

三、对于其余window.onerror捕获不到的代码，能够经过异步处理，以便捕获

 

let test_log = null;
test_log.indexOf('q');
setTimeout(function() {
 test_log.indexOf('q');
}, 1000);