Webfunny知识分享：JS错误监控

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

现在的前端开发已不再是刀耕火种的年代了，各种框架、编译工具层出不穷，前端监控系统也不甘其后，遍地开花。

前端正承受着越来越重的职责，前端的业务也变得越来越复杂，此时此刻我们就更需要一套完善的监控系统来为我们的线上应用保驾护航。

但是，想在众多的监控系统挑出一个趁手的，还真不是一件容易的事。不过徒手撕一个前端监控系统，好像也绝非那么容易。今天我们就以Webfunny前端监控为基础，来说一下前端监控最核心的部分，Js错误监控。

推广：（官网：www.webfunny.cn 、Git：webfunny_monitor 我们致力于解决前端开发痛点，为前端开发量身订做）

监控流程：监控并收集错误 -> 存储并上报错误 -> 分析并聚合错误 -> 发送 错误报警 -> 定位并解决JS错误

一、监控并收集Javascript错误

众所周知，我们是有办法去监听前端Js错误的，他们分别 window.onerror、window.onunhandledrejection、console.error方法。

通过这些方法能够为我们记录下线上的运行时错误，以及详细的堆栈信息。我将window.onerror(捕获异常)，console.error(自定义异常)方法收集到的错误信息进行分析统计后的效果如下：

（1）重写 window.onerror 方法

// 重写 onerror 进行jsError的监听

window.onerror = function(errorMsg, url, lineNumber, columnNumber, errorObj) {

  var errorStack = errorObj ? errorObj.stack : null;

  siftAndMakeUpMessage("on_error", errorMsg, url, lineNumber, columnNumber, errorStack);

};

window.onerror 方法以及它的参数我就不一一介绍了，我相信大家也已经耳熟能详了；我们记录下错误发生时的行、列号，以及错误堆栈。

（2）重写 window.onunhandledrejection 方法

window.onunhandledrejection = function(e) {

  var errorMsg = "";

  var errorStack = "";

  if (typeof e.reason === "object") {

    errorMsg = e.reason.message;

    errorStack = e.reason.stack;

  } else {

    errorMsg = e.reason;

    errorStack = "";

  }

  // 分类解析

  siftAndMakeUpMessage("on_error", errorMsg, WEB_LOCATION, 0, 0, "UncaughtInPromiseError: " + errorStack);

}

window.onunhandledrejection 能够捕获到Promise未处理的rejection异常，rejection异常并不会阻断页面运行，容易被很多小伙伴所遗忘，所以我们监控了此类型的错误。

（3）重写 console.error 方法

// 重写console.error, 可以捕获更全面的报错信息

var oldError = console.error;

console.error = function (tempErrorMsg) {

  var errorMsg = (arguments[0] && arguments[0].message) || tempErrorMsg;

  var lineNumber = 0;

  var columnNumber = 0;

  var errorObj = arguments[0] && arguments[0].stack;

    if (!errorObj) {

      if (typeof errorMsg == "object") {

        try {

          errorMsg = JSON.stringify(errorMsg)

        } catch(e) {

          errorMsg = "错误无法解析"

        }

      }

      siftAndMakeUpMessage("console_error", errorMsg, WEB_LOCATION, lineNumber, columnNumber, "CustomizeError: " + errorMsg);

    } else {

      // 如果报错中包含错误堆栈，可以认为是JS报错，而非自定义报错

      siftAndMakeUpMessage("on_error", errorMsg, WEB_LOCATION, lineNumber, columnNumber, errorObj);

    }

    return oldError.apply(console, arguments);

  };

console.error 是用来打印警告日志，所以我将其归类为自定义异常。一般像前端框架、引入第三方的插件都会用 console.error 来打印较为严重的警告信息，而我在工作中也会将后台抛出的错误信息（非后台异常）用console.error打印出来，上报到监控系统里。这样对排查异常也是有很大作用的（这一点会在行为记录查询中有体现）。

二、存储并上报错误

Javascript错误产生后，应该存入浏览器的缓存中，然后定时上传，如果实时上传，将会对服务器造成压力。通过接口将Js错误信息上传到服务器，由后台server对数据进行清洗分类，然后再进行持久化存储。因为我用的是mysql来存储日志信息，所以需要以JS错误为一个model，明确定义Js错误的每个字段，定义如下：

  // 设置日志对象类的通用属性

  function setCommonProperty() {

    this.wmVersion = WM_VERSION; // 探针版本号

    this.happenTime = new Date().getTime(); // 日志发生时间

    this.webMonitorId = WEB_MONITOR_ID;     // 用于区分应用的唯一标识（一个项目对应一个）

    this.simpleUrl =  window.location.href.split('?')[0].replace('#', ''); // 页面的url

    this.completeUrl =  utils.b64EncodeUnicode(encodeURIComponent(window.location.href)); // 页面的完整url

    this.customerKey = utils.getCustomerKey(); // 用于区分用户，所对应唯一的标识，清理本地数据后失效，

    // 用户自定义信息， 由开发者主动传入， 便于对线上问题进行准确定位

    var wmUserInfo = lsg.wmUserInfo ? JSON.parse(lsg.wmUserInfo) : {};

    this.userId = wmUserInfo.userId;

    this.firstUserParam = utils.b64EncodeUnicode(wmUserInfo.firstUserParam || "");

    this.secondUserParam = utils.b64EncodeUnicode(wmUserInfo.secondUserParam || "");

  }

  // JS错误日志，继承于日志基类MonitorBaseInfo

  function JavaScriptErrorInfo(uploadType, infoType, errorMsg, errorStack) {

    setCommonProperty.apply(this);

    this.uploadType = uploadType;

    this.infoType = infoType;

    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 = utils.getCookie("webfunny_ip");  // 用户的IP地址

    this.country = "china";  // 用户所在国家

    this.province = "";  // 用户所在省份

    this.city = "";  // 用户所在城市

    this.errorMessage = utils.b64EncodeUnicode(errorMsg)

    this.errorStack = utils.b64EncodeUnicode(errorStack);

    this.browserInfo = "";

  }