摘要：目前已經(jīng)在運(yùn)行的線上前端監(jiān)控系統(tǒng)代碼和講解都放在這篇文章里監(jiān)控系統(tǒng)介紹及代碼用戶對(duì)前端程序員來(lái)說(shuō)，就是一個(gè)黑匣子。

摘要： 通過(guò)錄屏或者截圖，快速?gòu)?fù)現(xiàn)BUG場(chǎng)景。

作者：一步一個(gè)腳印一個(gè)坑

原文：搭建前端監(jiān)控系統(tǒng)（備選）Js截圖上報(bào)篇

Fundebug經(jīng)授權(quán)轉(zhuǎn)載，版權(quán)歸原作者所有。

PS：本文關(guān)于Fundebug錄屏功能的內(nèi)容有些不準(zhǔn)確的地方，比如錄屏并非通過(guò)截圖實(shí)現(xiàn)的，錄屏插件的BUG也已經(jīng)修復(fù)了，錄屏并非只支持Chrome，錄屏數(shù)據(jù)并不大，錄屏性能也優(yōu)化了很多。

背景：市面上的監(jiān)控系統(tǒng)有很多，大多收費(fèi)，對(duì)于小型前端項(xiàng)目來(lái)說(shuō)，必然是痛點(diǎn)。另一點(diǎn)主要原因是，功能雖然通用，卻未必能夠滿足我們自己的需求，所以我們自給自足也許是個(gè)不錯(cuò)的辦法。

這是搭建前端監(jiān)控系統(tǒng)的第二章，主要是介紹如何統(tǒng)計(jì)js報(bào)錯(cuò)，跟著我一步步做，你也能搭建出一個(gè)屬于自己的前端監(jiān)控系統(tǒng)。

目前已經(jīng)在運(yùn)行的線上Demo：前端監(jiān)控系統(tǒng)

代碼和講解都放在這篇文章里： 監(jiān)控系統(tǒng)介紹及代碼

用戶對(duì)前端程序員來(lái)說(shuō)，就是一個(gè)黑匣子。 如果用戶上報(bào)了一個(gè)錯(cuò)誤，前端程序員就是兩眼一抹黑，因?yàn)楹芏噱e(cuò)誤是沒(méi)法復(fù)現(xiàn)的。我問(wèn)過(guò)很多前端工程師，他們的回答都是，如果你沒(méi)法復(fù)現(xiàn)Bug，我怎么去解決這個(gè)Bug呢。 那么有沒(méi)有一個(gè)辦法可以解決用戶和前端程序員之間的障礙呢， 讓用戶對(duì)我們來(lái)說(shuō)，不再是黑匣子，而是透明化。用戶的頁(yè)面長(zhǎng)什么樣，他們都做了什么操作，發(fā)生了什么錯(cuò)誤，我們都能夠清晰的知道，那么，再有問(wèn)題上報(bào)的時(shí)候，我就會(huì)很有信心的說(shuō)一句： I Can Fix it !

最近試用了一下Fundebug，進(jìn)入首頁(yè)，第一條便是 黑科技！支持錄屏。 這下就驚呆我了，js做前端監(jiān)控，居然還能錄屏？ 你丫這是要逆天?。?所以，趕緊注冊(cè)了賬號(hào)，進(jìn)行試用。

經(jīng)過(guò)各種配置后，進(jìn)行測(cè)試發(fā)布，發(fā)現(xiàn)毫無(wú)效果，所以詢問(wèn)客服。 回答是： 目前錄制功能有bug，所以默認(rèn)為關(guān)閉狀態(tài)，將配置屬性silentVideo設(shè)置為false即可。(PS：Fundebug的錄屏BUG已經(jīng)修復(fù)了)

果不其然，經(jīng)過(guò)客服的細(xì)心指導(dǎo)，終于成功了。 圖一為電腦版chrome瀏覽器，可以正常進(jìn)行屏幕錄制。 圖二為手機(jī)app自帶的webview瀏覽器，第一次點(diǎn)擊顯示灰屏，第二次點(diǎn)擊顯示為電腦版的錄屏。經(jīng)過(guò)測(cè)試，除了chrome之外，其他瀏覽器均不支持。這讓我想起一個(gè)可以進(jìn)行js截屏的庫(kù)JSCapture， 也是只支持chrome瀏覽器的。我猜想，F(xiàn)undebug用的應(yīng)該就是這個(gè)黑科技。 Fundebug也表示并非真的視頻，應(yīng)該是多做了幾幀截屏，然后順序切換，看著像視頻了。（PS：Fundebug的錄屏功能并非通過(guò)截圖實(shí)現(xiàn)的）

雖然是黑科技，但是也面臨著幾個(gè)比較大的問(wèn)題：

一、因?yàn)橹С值臑g覽器只有chrome，而chrome又是兼容性做得最好的瀏覽器了，很多問(wèn)題在這個(gè)瀏覽器上根本不會(huì)發(fā)生， 所以這個(gè)黑科技還是有待來(lái)日，也許會(huì)得到更多瀏覽器的支持之后，才能真正的發(fā)揮作用。不得不感慨一句：唉，兼容性-前端程序員一生的宿命。（PS：Fundebug的錄屏功能并非只支持Chrome）

二、就算屏幕錄制解決了，上傳了一個(gè)至少有個(gè)幾幀的仿視頻，這個(gè)流量大小可是很?chē)?yán)重問(wèn)題了，雖然Fundebug說(shuō)是經(jīng)過(guò)特殊處理壓縮后，一個(gè)視頻只有幾十KB，我總覺(jué)得不是很靠譜，感覺(jué)比較難以實(shí)現(xiàn)（待驗(yàn)證）。(PS：Fundebug的錄屏數(shù)據(jù)經(jīng)過(guò)優(yōu)化和壓縮，因此并不大)

三、我自己的手機(jī)是iphone6 Plus, 當(dāng)Fundebug在我的手機(jī)上進(jìn)行屏幕捕捉的時(shí)候，手機(jī)都會(huì)卡頓很久。 我之前曾嘗試在iphone6上用js進(jìn)行截圖，但是也會(huì)出現(xiàn)卡頓現(xiàn)象，這一點(diǎn)在微信瀏覽器上表現(xiàn)極為明顯，甚至?xí)?dǎo)致微信重新刷新頁(yè)面。 好在iphone6以上的版本，截屏的效率都很高，不會(huì)再出現(xiàn)卡頓了。(PS：Fundebug的錄屏性能經(jīng)過(guò)持續(xù)優(yōu)化)

所以，F(xiàn)undebug的黑科技是不能夠普及的，但是我們可以換個(gè)思路來(lái)記錄用戶的行為。

之前，我曾經(jīng)考慮過(guò)一個(gè)需求，記錄下用戶的每個(gè)行為，訪問(wèn)頁(yè)面的截圖，點(diǎn)擊按鈕的局部截圖，這樣，在錯(cuò)誤發(fā)生的時(shí)候，就能清清楚楚的知道用戶在頁(yè)面上做了什么，但是由于截圖上傳需要耗費(fèi)的流量確實(shí)太大，所以這個(gè)想法不得不放棄了。 今天，我看了Fundebug的黑科技，卻給了一些啟發(fā)。 我將針對(duì)以上提出的三個(gè)難點(diǎn)，完善頁(yè)面上用戶行為追蹤功能。

用戶行為追蹤功能

一、 上傳截圖，流量消耗過(guò)大怎么辦，對(duì)圖片資源進(jìn)行極致壓縮。

進(jìn)行截圖后，需要上傳的數(shù)據(jù)很大，因?yàn)槭菆D片數(shù)據(jù)，多則大幾百Kb, 少則也有個(gè)上百Kb, 這么大的流量，對(duì)用戶端，損耗確實(shí)過(guò)大。

首先，對(duì)js截圖進(jìn)行了幾種測(cè)試，如圖：

以上截圖方式的參數(shù)如下：

綜上分析，截圖方式一， 壓縮率高，雖然截圖不是很清晰，但是，也能夠看得出，線上用戶頁(yè)面是什么樣子的。

而且，也解決了，在低端機(jī)上截圖消耗性能過(guò)大的弊端，二十幾Kb的流量，也是我們完全能夠接受的大小了。

由此可見(jiàn)，該方式能夠完全能夠滿足我們追蹤用戶行為的需求。

二、如果用戶量非常多， 用戶頻繁的上傳，也是一個(gè)大問(wèn)題

所以，我的建議是分散流量，讓每個(gè)用戶為我們貢獻(xiàn)至少一次頁(yè)面截圖：

① 每個(gè)用戶都在隨機(jī)的頁(yè)面，隨機(jī)的時(shí)間上傳一個(gè)頁(yè)面截圖，以及一個(gè)點(diǎn)擊區(qū)域截圖，有且僅上傳一次，一個(gè)用戶的生命周期中只貢獻(xiàn)一次頁(yè)面截圖

② 每個(gè)用戶發(fā)生某一類(lèi)錯(cuò)誤時(shí)，也只需上傳一個(gè)截圖即可，多個(gè)類(lèi)型的錯(cuò)誤，則上傳多個(gè)截圖。這樣可以大量節(jié)省用戶的上傳次數(shù)。

③ 用戶的截圖數(shù)據(jù)很大， 時(shí)間長(zhǎng)了需要很大的硬盤(pán)空間， 所以我的建議是，每個(gè)流程頁(yè)面，只需要對(duì)應(yīng)一個(gè)（點(diǎn)擊區(qū)域截圖，同理）。 每個(gè)用戶的某一種類(lèi)型的錯(cuò)誤頁(yè)面也只對(duì)應(yīng)一個(gè)（方便定位錯(cuò)誤原因）

如何截圖，如何壓縮上傳資源的大小

// js處理截圖
this.screenShot = function(cntElem, callback) {
    var shareContent = cntElem; //需要截圖的包裹的（原生的）DOM 對(duì)象
    var width = shareContent.offsetWidth; //獲取dom 寬度
    var height = shareContent.offsetHeight; //獲取dom 高度
    var canvas = document.createElement("canvas"); //創(chuàng)建一個(gè)canvas節(jié)點(diǎn)
    var scale = 0.6; //定義任意放大倍數(shù) 支持小數(shù)
    canvas.style.display = "none";
    canvas.width = width * scale; //定義canvas 寬度 * 縮放
    canvas.height = height * scale; //定義canvas高度 *縮放
    canvas.getContext("2d").scale(scale, scale); //獲取context,設(shè)置scale
    var opts = {
        scale: scale, // 添加的scale 參數(shù)
        canvas: canvas, //自定義 canvas
        logging: false, //日志開(kāi)關(guān)，便于查看html2canvas的內(nèi)部執(zhí)行流程
        width: width, //dom 原始寬度
        height: height,
        useCORS: true // 【重要】開(kāi)啟跨域配置
    };
    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);
    });
};

要做成這件事，必須依賴兩個(gè)js庫(kù)的幫忙了。

html2Canvas 執(zhí)行html頁(yè)面截圖， lz-string 執(zhí)行對(duì)字符串長(zhǎng)度的壓縮，使用方式，如上方代碼所示。

由于用戶行為追蹤功能可以由使用者選擇性開(kāi)起， 所以，建議這兩個(gè)js庫(kù)文件有客戶端引入, 這樣就可以減少探針代碼的大小， 如此，我們就需要定義一個(gè)加載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 庫(kù)文件加載完成后，通知全局變量，lz-string 同理
utils.loadJs("http://html2canvas.hertzen.com/dist/html2canvas.min.js", function() {
    html2CanvasLoaded = true;
});

OK, 數(shù)據(jù)都已經(jīng)準(zhǔn)備妥當(dāng)，剩下的就是要把這些數(shù)據(jù)存儲(chǔ)起來(lái)，并和用戶行為，以及js錯(cuò)誤關(guān)聯(lián)起來(lái)。 完成用戶行為追蹤功能。

PS：本文關(guān)于Fundebug錄屏功能的內(nèi)容有些不準(zhǔn)確的地方，比如錄屏并非通過(guò)截圖實(shí)現(xiàn)的，錄屏插件的BUG也已經(jīng)修復(fù)了，錄屏并非只支持Chrome，錄屏數(shù)據(jù)并不大，錄屏性能也優(yōu)化了很多。

Fundebug專(zhuān)注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應(yīng)用實(shí)時(shí)BUG監(jiān)控。 自從2016年雙十一正式上線，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶有陽(yáng)光保險(xiǎn)、核桃編程、荔枝FM、掌門(mén)1對(duì)1、微脈、青團(tuán)社等眾多品牌企業(yè)。歡迎大家免費(fèi)試用！