搭建前端监控系统（备选）Js截图上报篇

　　怎样定位前端线上问题，一直以来，都是很头疼的问题，由于它发生于用户的一系列操做以后。错误的缘由可能源于机型，网络环境，接口请求，复杂的操做行为等等，在咱们想要去解决的时候很难复现出来，天然也就没法解决。 固然，这些问题并不是不能克服，让咱们来一块儿看看如何去监控并定位线上的问题吧。 

　　这是搭建前端监控系统的第六章，主要是介绍如何使用js进行页面截图，跟着我一步步作，你也能搭建出一个属于本身的前端监控系统。

 

　　开源项目 ： 前端监控系统  

 

　　用户对前端程序员来讲，就是一个黑匣子。 若是用户上报了一个错误，前端程序员就是两眼一抹黑，由于不少错误是无法复现的。我问过不少前端工程师，他们的回答都是，若是你无法复现Bug，我怎么去解决这个Bug呢。 那么有没有一个办法能够解决用户和前端程序员之间的障碍呢， 让用户对咱们来讲，再也不是黑匣子，而是透明化。用户的页面长什么样，他们都作了什么操做，发生了什么错误，咱们都可以清晰的知道，那么，再有问题上报的时候，我就会颇有信心的说一句： I Can Fix it !

　　最近试用了一下Fundebug，进入首页，第一条即是 黑科技！支持录屏。 这下就惊呆我了，js作前端监控，竟然还能录屏？ 你丫这是要逆天啊？ 因此，赶忙注册了帐号，进行试用。 

　　通过各类配置后，进行测试发布，发现毫无效果，因此询问客服。 回答是： 目前录制功能有bug，因此默认为关闭状态，将配置属性silentVideo设置为false便可。

　　

　　果不其然，通过客服的细心指导，终于成功了。 图一为电脑版chrome浏览器，能够正常进行屏幕录制。 图二为手机app自带的webview浏览器，第一次点击显示灰屏，第二次点击显示为电脑版的录屏。通过测试，除了chrome以外，其余浏览器均不支持。这让我想起一个能够进行js截屏的库JSCapture， 也是只支持chrome浏览器的。我猜测，Fundebug用的应该就是这个黑科技。 Fundebug也表示并不是真的视频，应该是多作了几帧截屏，而后顺序切换，看着像视频了。

　　虽然是黑科技，可是也面临着几个比较大的问题：

　　1、由于支持的浏览器只有chrome，而chrome又是兼容性作得最好的浏览器了，不少问题在这个浏览器上根本不会发生， 因此这个黑科技仍是有待来日，也许会获得更多浏览器的支持以后，才能真正的发挥做用。不得不感慨一句：唉，兼容性-前端程序员一辈子的宿命。

　　2、就算屏幕录制解决了，上传了一个至少有个几帧的仿视频，这个流量大小但是很严重问题了，虽然Fundebug说是通过特殊处理压缩后，一个视频只有几十KB，我总以为不是很靠谱，感受比较难以实现（待验证）

　　3、我本身的手机是iphone6 Plus, 当Fundebug在个人手机上进行屏幕捕捉的时候，手机都会卡顿好久。 我以前曾尝试在iphone6上用js进行截图，可是也会出现卡顿现象，这一点在微信浏览器上表现极为明显，甚至会致使微信从新刷新页面。 好在iphone6以上的版本，截屏的效率都很高，不会再出现卡顿了

　　

---

　　因此，Fundebug的黑科技是不可以普及的，可是咱们能够换个思路来记录用户的行为。

　　以前，我曾经考虑过一个需求，记录下用户的每一个行为，访问页面的截图，点击按钮的局部截图，这样，在错误发生的时候，就能清清楚楚的知道用户在页面上作了什么，可是因为截图上传须要耗费的流量确实太大，因此这个想法不得不放弃了。 今天，我看了Fundebug的黑科技，却给了一些启发。 我将针对以上提出的三个难点，完善页面上用户行为追踪功能。

　　用户行为追踪功能

 　  1、 上传截图，流量消耗过大怎么办，对图片资源进行极致压缩。

　　进行截图后，须要上传的数据很大，由于是图片数据，多则大几百Kb, 少则也有个上百Kb, 这么大的流量，对用户端，损耗确实过大。

　　首先，对js截图进行了几种测试，如图：

　　

　　以上截图方式的参数以下：

　　参数　　　　　　截图方式一　　　　截图方式二　　　　截图方式三

　　压缩前/后长度    28764/10787　　   93076/34903 　　 168312/63118

　　图片压缩率　　　72%　　　　　　　40%　　　　　　   0%

　　截图大小　　　　21Kb　　　　　　　68.2Kb　　　　　  123Kb

 　

　　综上分析，截图方式一， 压缩率高，虽然截图不是很清晰，可是，也可以看得出，线上用户页面是什么样子的。

　　并且，也解决了，在低端机上截图消耗性能过大的弊端，二十几Kb的流量，也是咱们彻底可以接受的大小了。

　　因而可知，该方式可以彻底可以知足咱们追踪用户行为的需求。

 

　　2、若是用户量很是多， 用户频繁的上传，也是一个大问题

　　因此，个人建议是分散流量，让每一个用户为咱们贡献至少一次页面截图：

　　① 每一个用户都在随机的页面，随机的时间上传一个页面截图，以及一个点击区域截图，有且仅上传一次，一个用户的生命周期中只贡献一次页面截图

　　② 每一个用户发生某一类错误时，也只需上传一个截图便可，多个类型的错误，则上传多个截图。这样能够大量节省用户的上传次数。

　　③ 用户的截图数据很大， 时间长了须要很大的硬盘空间， 因此个人建议是，每一个流程页面，只须要对应一个（点击区域截图，同理）。 每一个用户的某一种类型的错误页面也只对应一个（方便定位错误缘由）

　　

---

 

　　

如何截图，如何压缩上传资源的大小

/**
     * js处理截图
     */
    this.screenShot = function (cntElem, callback) {
      var shareContent = cntElem;//须要截图的包裹的（原生的）DOM 对象
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //建立一个canvas节点
      var scale = 0.6; //定义任意放大倍数 支持小数
      canvas.style.display = "none";
      canvas.width = width * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale; //定义canvas高度 *缩放
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        scale: scale, // 添加的scale 参数
        canvas: canvas, //自定义 canvas
        logging: false, //日志开关，便于查看html2canvas的内部执行流程
        width: width, //dom 原始宽度
        height: height,
        useCORS: true // 【重要】开启跨域配置
      };
      html2canvas(cntElem, opts).then(function(canvas) {
        var dataURL = canvas.toDataURL();
        var tempCompress = dataURL.replace("data:image/png;base64,", "");
        var compressedDataURL = Base64String.compress(tempCompress);
        callback(compressedDataURL);
      });
    }

 要作成这件事，必须依赖两个js库的帮忙了。

 html2Canvas 执行html页面截图， lz-string 执行对字符串长度的压缩，使用方式，如上方代码所示。

 因为用户行为追踪功能能够由使用者选择性开起， 因此，建议这两个js库文件有客户端引入, 这样就能够减小探针代码的大小， 如此，咱们就须要定义一个加载js文件的小工具

// 加载js文件的小工具
this.loadJs = function(url, callback) {
      var script = document.createElement('script');
      script.async = 1;
      script.src = url;
      script.onload = callback;
      var dom = document.getElementsByTagName('script')[0];
      dom.parentNode.insertBefore(script, dom);
      return dom;
    }

// html2Canvas 库文件加载完成后，通知全局变量，lz-string 同理
utils.loadJs("//html2canvas.hertzen.com/dist/html2canvas.min.js",function () {
  html2CanvasLoaded = true;
});

 

　　OK, 数据都已经准备稳当，剩下的就是要把这些数据存储起来，并和用户行为，以及js错误关联起来。 完成用户行为追踪功能。

　　

　　

　　上一章： 搭建前端监控系统（三）NodeJs服务器部署篇

---

　　原本我觉得 前端Js错误监控模块终结了， 可是发现还须要放上重要的一篇

　　下一章： 搭建前端监控系统（五）用户行为统计和监控