摘要：目前已經在運行的線上前端監控系統代碼和講解都放在這篇文章里監控系統介紹及代碼用戶對前端程序員來說，就是一個黑匣子。

摘要： 通過錄屏或者截圖，快速復現BUG場景。

作者：一步一個腳印一個坑

原文：搭建前端監控系統（備選）Js截圖上報篇

Fundebug經授權轉載，版權歸原作者所有。

PS：本文關于Fundebug錄屏功能的內容有些不準確的地方，比如錄屏并非通過截圖實現的，錄屏插件的BUG也已經修復了，錄屏并非只支持Chrome，錄屏數據并不大，錄屏性能也優化了很多。

背景：市面上的監控系統有很多，大多收費，對于小型前端項目來說，必然是痛點。另一點主要原因是，功能雖然通用，卻未必能夠滿足我們自己的需求，所以我們自給自足也許是個不錯的辦法。

這是搭建前端監控系統的第二章，主要是介紹如何統計js報錯，跟著我一步步做，你也能搭建出一個屬于自己的前端監控系統。

目前已經在運行的線上Demo：前端監控系統

代碼和講解都放在這篇文章里： 監控系統介紹及代碼

用戶對前端程序員來說，就是一個黑匣子。 如果用戶上報了一個錯誤，前端程序員就是兩眼一抹黑，因為很多錯誤是沒法復現的。我問過很多前端工程師，他們的回答都是，如果你沒法復現Bug，我怎么去解決這個Bug呢。 那么有沒有一個辦法可以解決用戶和前端程序員之間的障礙呢， 讓用戶對我們來說，不再是黑匣子，而是透明化。用戶的頁面長什么樣，他們都做了什么操作，發生了什么錯誤，我們都能夠清晰的知道，那么，再有問題上報的時候，我就會很有信心的說一句： I Can Fix it !

最近試用了一下Fundebug，進入首頁，第一條便是 黑科技！支持錄屏。 這下就驚呆我了，js做前端監控，居然還能錄屏？ 你丫這是要逆天啊？ 所以，趕緊注冊了賬號，進行試用。

經過各種配置后，進行測試發布，發現毫無效果，所以詢問客服。 回答是： 目前錄制功能有bug，所以默認為關閉狀態，將配置屬性silentVideo設置為false即可。(PS：Fundebug的錄屏BUG已經修復了)

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

雖然是黑科技，但是也面臨著幾個比較大的問題：

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

二、就算屏幕錄制解決了，上傳了一個至少有個幾幀的仿視頻，這個流量大小可是很嚴重問題了，雖然Fundebug說是經過特殊處理壓縮后，一個視頻只有幾十KB，我總覺得不是很靠譜，感覺比較難以實現（待驗證）。(PS：Fundebug的錄屏數據經過優化和壓縮，因此并不大)

三、我自己的手機是iphone6 Plus, 當Fundebug在我的手機上進行屏幕捕捉的時候，手機都會卡頓很久。 我之前曾嘗試在iphone6上用js進行截圖，但是也會出現卡頓現象，這一點在微信瀏覽器上表現極為明顯，甚至會導致微信重新刷新頁面。 好在iphone6以上的版本，截屏的效率都很高，不會再出現卡頓了。(PS：Fundebug的錄屏性能經過持續優化)

所以，Fundebug的黑科技是不能夠普及的，但是我們可以換個思路來記錄用戶的行為。

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

用戶行為追蹤功能

一、 上傳截圖，流量消耗過大怎么辦，對圖片資源進行極致壓縮。

進行截圖后，需要上傳的數據很大，因為是圖片數據，多則大幾百Kb, 少則也有個上百Kb, 這么大的流量，對用戶端，損耗確實過大。

首先，對js截圖進行了幾種測試，如圖：

以上截圖方式的參數如下：

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

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

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

二、如果用戶量非常多， 用戶頻繁的上傳，也是一個大問題

所以，我的建議是分散流量，讓每個用戶為我們貢獻至少一次頁面截圖：

① 每個用戶都在隨機的頁面，隨機的時間上傳一個頁面截圖，以及一個點擊區域截圖，有且僅上傳一次，一個用戶的生命周期中只貢獻一次頁面截圖

② 每個用戶發生某一類錯誤時，也只需上傳一個截圖即可，多個類型的錯誤，則上傳多個截圖。這樣可以大量節省用戶的上傳次數。

③ 用戶的截圖數據很大， 時間長了需要很大的硬盤空間， 所以我的建議是，每個流程頁面，只需要對應一個（點擊區域截圖，同理）。 每個用戶的某一種類型的錯誤頁面也只對應一個（方便定位錯誤原因）

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

// 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("http://html2canvas.hertzen.com/dist/html2canvas.min.js", function() {
    html2CanvasLoaded = true;
});

OK, 數據都已經準備妥當，剩下的就是要把這些數據存儲起來，并和用戶行為，以及js錯誤關聯起來。 完成用戶行為追蹤功能。

PS：本文關于Fundebug錄屏功能的內容有些不準確的地方，比如錄屏并非通過截圖實現的，錄屏插件的BUG也已經修復了，錄屏并非只支持Chrome，錄屏數據并不大，錄屏性能也優化了很多。

Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用！