摘要:用于將及其狀態轉化為可序列化的數據結構并添加唯一標識則是將記錄的數據結構重建為對應的。用于記錄中的所有變更則是將記錄的變更按照對應的時間一一重放。表示觀察變動時,是否需要記錄變動前的屬性值。該方法返回變動記錄的數組。
摘要: 網頁應該如何錄屏呢?
作者:Winty
原文:用戶行為錄幀調研
Fundebug經授權轉載,版權歸原作者所有。
關鍵點首先,每一次會話都有一個唯一的session ID,這是串聯起所有行為的紐帶。
其次,用戶行為又分成兩個部分,其一是用戶的操作,比如鼠標滑動,點擊,頁面滾動等,其二是頁面的變化。這兩者我們都統稱為用戶行為,記錄在同一個隊列中。
一開始的時候,系統會記錄下初始的頁面作為第一幀,這是唯一的一次完整頁面記錄。
針對用戶操作,我們會記錄事件的類型,鼠標位置等關鍵信息,保存到隊列中。
針對頁面變動,我們會起一個mutationObserve偵聽頁面的改動,每次只記錄改動的部分,保存到隊列中。
無論是事件還是頁面改動,都是對等的一幀,每一幀都會有當前時間,與上一幀間隔時間等基本信息用戶還原
一旦出錯,SDK就把隊列發送到監控系統,并清空當前隊列。
還原端根據記錄的行為隊列,根據時間逐一播放出來。最終形成一個類似于視頻的效果。
初步思路
方式一:
前端收集信息,首先,初始化的時候記錄一個頁面的初始狀態,然后利用 MutationObserver 監聽dom的改變事件,然后監聽所有的鼠標事件、滾動事件等等所有的頁面變化。
在合理的時機把這些信息隊列上傳到服務器,如頁面出錯時等。
后臺分析前端收集到的信息,轉為圖片,然后形成"視頻",或者用戶行為棧。提供對應的調用 api。
前端需要查找問題時,根據用戶id等信息找到對應的出錯棧。
方式二:
前端根據 html 轉為對應的圖片(可以轉為 base64 格式)
將圖片發送給后臺
后臺將圖片按序組成"視頻"
現有SDK
Fundebug
錄屏(截圖)html2canvas
puppeteer
rrweb+rrweb-player+rrweb-snapshot
html2canvas介紹html2canvas 是通過分析頁面中已加載好的 DOM 元素,然后 canvas 將生成的 DOM 節點繪制在畫布上,最后轉換為圖片。它不是真正的截屏,只是根據頁面元素信息還原出圖片,所以并不是 100% 和頁面相同的。
局限性
頁面中的圖片不能跨域
不是所有的 css 特性都支持,如不支持 box-shadow、filter 等
不支持截取插件內容,如 Flash
不支持 iframe 內容
瀏覽器支持
Firefox 3.5+
Google Chrome
Opera 12+
IE9+
Edge
Safari 6+
puppeteer介紹Puppeteer 是 Google Chrome 團隊官方的無界面(Headless)Chrome 工具,它是一個 Node 庫,提供了一個高級的 API 來控制 DevTools協議上的無頭版 Chrome 。
局限性
Puppeteer 需要 Chromium。其主要應用在自動化測試上。
功能
生成頁面的截圖和PDF。
抓取SPA并生成預先呈現的內容(即"SSR")。
從網站抓取你需要的內容。
自動表單提交,UI測試,鍵盤輸入等
創建一個最新的自動化測試環境。使用最新的JavaScript和瀏覽器功能,直接在最新版本的Chrome中運行測試。
捕獲您的網站的時間線跟蹤,以幫助診斷性能問題。
結論html2canvas 更適合于 C 端的用戶行為截圖跟蹤,而 Puppeteer 適用于自動化測試。
rrweb介紹rrweb 主要由 3 部分組成:
rrweb-snapshot,包含 snapshot 和 rebuild 兩個功能。snapshot 用于將 DOM 及其狀態轉化為可序列化的數據結構并添加唯一標識;rebuild 則是將 snapshot 記錄的數據結構重建為對應的 DOM。
rrweb,包含 record 和 replay 兩個功能。record 用于記錄 DOM 中的所有變更(mutation);replay 則是將記錄的變更按照對應的時間一一重放。
rrweb-player,為 rrweb 提供一套 UI 控件,提供基于 GUI 的暫停、快進、拖拽至任意時間點播放等功能。
rrweb適用場景:
用戶行為分析;
遠程debug;
錄制操作;
實時協作;
局限性
社區資源較少
部分代碼用較舊的模式寫的,有未知坑
最終結論
綜合來看,結合思路一,基于 rrweb 來開發是最可行最快捷的。
Demo目前,我基于 rrweb 已經做了個 demo 出來。以下是初步成果:demo代碼
補充資料 rrweb的一些思路原理rrweb:打開 web 頁面錄制與回放的黑盒子
MutationObserver介紹Mutation Observer API 用來監視 DOM 變動。DOM 的任何變動,比如節點的增減、屬性的變動、文本內容的變動,這個 API 都可以得到通知。
特點
它等待所有腳本任務完成后,才會運行(即異步觸發方式)。
它把 DOM 變動記錄封裝成一個數組進行處理,而不是一條條個別處理 DOM 變動。
它既可以觀察 DOM 的所有類型變動,也可以指定只觀察某一類變動。
example
Select the node that will be observed for mutations var targetNode = document.getElementById("some-id");
// Options for the observer (which mutations to observe) var config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed var callback = function(mutationsList, observer) { for (var mutation of mutationsList) { if (mutation.type == "childList") { console.log("A child node has been added or removed."); } else if (mutation.type == "attributes") { console.log( "The " + mutation.attributeName + " attribute was modified." ); } } }; // Create an observer instance linked to the callback function var observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(targetNode, config); // Later, you can stop observing observer.disconnect();
observe方法接受兩個參數,第一個是所要觀察的DOM元素是article,第二個是所要觀察的變動類型(子節點變動和屬性變動),方法調用時必須指定一種或多種變動類型,否則報錯,變動類型如下:
boolean childList = false; boolean attributes; boolean characterData; boolean subtree = false; //表示是否將該觀察器應用于該節點的所有后代節點。 boolean attributeOldValue; //表示觀察attributes變動時,是否需要記錄變動前的屬性值。 boolean characterDataOldValue; //表示觀察characterData變動時,是否需要記錄變動前的值。 sequenceattributeFilter;//數組,表示需要觀察的特定屬性(比如["class","src"])
disconnect方法用來停止觀察。調用該方法后,DOM 再發生變動,也不會觸發觀察器。 takeRecords方法用來清除變動記錄,即不再處理未處理的變動。該方法返回變動記錄的數組。
MutationRecord對象
DOM 每次發生變化,就會生成一條變動記錄(MutationRecord 實例)。該實例包含了與變動相關的所有信息。Mutation Observer 處理的就是一個個MutationRecord實例所組成的數組。 MutationRecord對象包含了DOM的相關信息,有如下屬性:
type:觀察的變動類型(attribute、characterData或者childList)。 target:發生變動的DOM節點。 addedNodes:新增的DOM節點。 removedNodes:刪除的DOM節點。 previousSibling:前一個同級節點,如果沒有則返回null。 nextSibling:下一個同級節點,如果沒有則返回null。 attributeName:發生變動的屬性。如果設置了attributeFilter,則只返回預先指定的屬性。 oldValue:變動前的值。這個屬性只對attribute和characterData變動有效,如果發生childList變動,則返回null。關于Fundebug
Fundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了20億+錯誤事件,付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/106437.html
摘要:目前已經在運行的線上前端監控系統代碼和講解都放在這篇文章里監控系統介紹及代碼用戶對前端程序員來說,就是一個黑匣子。 摘要: 通過錄屏或者截圖,快速復現BUG場景。 作者:一步一個腳印一個坑 原文:搭建前端監控系統(備選)Js截圖上報篇 Fundebug經授權轉載,版權歸原作者所有。 PS:本文關于Fundebug錄屏功能的內容有些不準確的地方,比如錄屏并非通過截圖實現的,錄屏插件...
摘要:靜態資源重復加載瀏覽器和無法錄屏動態加載錄屏插件失效性能優化通過優化數據記錄方式,進一步提升插件性能,并減少傳輸的數據量。自從年雙十一正式上線,累計處理了億錯誤事件,付費客戶有金山軟件百姓網等眾多品牌企業。 摘要: 錄屏功能更加強大,歡迎免費試用! showImg(https://image.fundebug.com/funrevedio-logo.jpg); 關于Fundebug錄屏...
摘要:一在線矢量設計軟件支持在線設計團隊協作強大中文生態,無需翻譯插件說到在線設計,或許很多設計師會第一時間想到。但如果是給國內的設計師做推薦,筆者依然會選擇,因為因為沒有中文,且翻譯插件很難用,再加之服務器在國內,網速更有保障。 如何提升工作效率一定是職場人長久以往需要解決的問題,很多人都有過這...
摘要:之前老蔣有記錄到免費錄屏軟件安裝體驗可選擇安裝版或便攜版文章中提到一款免費開源支持客戶端安裝或者綠色便攜版本的軟件,也算是比較輕便的軟件之一。由于工作的需要,需要找一款合適的屏幕錄制軟件工具。之前老蔣有記錄到Captura – 免費錄屏軟件安裝體驗 可選擇安裝版或便攜版文章中提到一款免費開源支持Windows客戶端安裝或者綠色便攜版本的Captura軟件,也算是比較輕便的軟件之一...
摘要:下載安裝版本或者是免安裝便攜版本都可以。這里老蔣選擇安裝版本。第二軟件設置和基本功能體驗我們在軟件安裝后,默認的是英文,所以我們看看設置中是否有簡體中文可選。這幾天老蔣的文章篇幅可能較多的會對網絡上免費和付費的錄屏軟件簡單做一個整理,同時也是我個人工作需要尋找一款適合自己的軟件的篩選過程。今天這篇文章體驗這款來自國外開源免費的Captura錄屏軟件,支持全屏、選擇區域、游戲錄制,甚至我們也可...
閱讀 1309·2021-09-27 13:56
閱讀 2339·2019-08-26 10:35
閱讀 3497·2019-08-23 15:53
閱讀 1848·2019-08-23 14:42
閱讀 1233·2019-08-23 14:33
閱讀 3562·2019-08-23 12:36
閱讀 1947·2019-08-22 18:46
閱讀 996·2019-08-22 14:06