資訊專欄INFORMATION COLUMN
摘要：后面當頁面發生變化時，只對變化的元素進行序列化。當重放頁面時，會將數據反序列化并插入到頁面中，而原先增量的變化，如屬性或者文本變化，則根據找到對應元素修改而子節點的增加或減少，根據父元素進行變更。
項目背景
在使用ant design文檔的過程中發現，antd使用了一個叫做logRocket的錄屏框架，于是立馬將logRocket用在自己的項目當中，測試它的功能。
logRocket網站將采集到的數據，按照人員和session進行分類，觀看各人員的操作回放，可以發現系統中某些操作的不便之處，并且可以發現哪些人員是你的重度用戶。
但是logRocket的數據存儲在他們的服務器，并且從logRocket回放里，能看到系統中的各種重要數據。如果數據被別有用心之人獲取，后果將很嚴重。
rrweb如果我們需要基于一個開源框架，并將數據存在自己的服務器中，限制人員查看的權限，這樣就尅消除之前的隱患。
下面我要介紹的就是今天的主角rrweb框架，全稱record and replay the web。它由三個庫組成：
rrweb-snapshot，將頁面中的dom轉化為可序列化的數據結構
rrweb，提供錄屏和重放的api
rrweb-player，提供播放的ui頁面，支持快進、全屏、拖拽等操作
每次刷新頁面時，rrweb會將頁面中的dom元素全部轉換成文檔數據，并給每個dom元素分配一個唯一id。后面當頁面發生變化時，只對變化的dom元素進行序列化。當重放頁面時，會將數據反序列化并插入到頁面中，而原先增量的dom變化，如屬性或者文本變化，則根據id找到對應dom元素修改；而子節點的增加或減少，根據父元素id進行dom變更。
開發歷程1.直接使用rrweb記錄每次的序列化錄屏數據，首先保存到localStorage中，當數據量超過閾值或者超過時間限制，再由sendbeacon發送數據到node，并保存到mongo中。
2.首先遇到的問題是sendbeacon發送數據居然出現了丟失，原因是數據超過65536時，將會發送失敗，由于sendbeacon是由后臺進程多帶帶發送，無法獲取失敗狀態，所以要進行降級處理，當數據過大時，使用fetch請求發送。
3.由于公司中后臺系統的用戶分布在世界各地，海外的網絡延遲較高，需要解決壓縮數據大小的問題，這里使用的是lz-string庫。一開始想要在每次存儲在localStorage時進行壓縮，后來發現壓縮后的數據有特殊字符，JSON.parse高頻率出錯，后改為在每次發送數據到后端之前壓縮，并在node端進行解壓。
4.一開始的數據庫選型為時序數據庫influxdb，由于某些不可抗拒原因改為了mongodb。
5.在項目上線后選擇了一個小項目進行測試，發現存儲和播放效果良好，代碼如下
import rrweb from "rrweb";
rrweb.record({
emit(event) {
storagePush(event);
},
});
存進數據庫中的數據結構為
{
timestamp: 1563418490795,
name:"小明",
event:...
}
方便按照用戶和時間范圍進行查找數據，內容如下
6.但是每次都要播放一整天的數據，第一播放接口獲取的數據量巨大，第二播放時間漫長，抓不住重點，一旦數據有誤導致后續錄屏都播放不了。
查看rrweb源碼發現checkoutEveryNms屬性可以按照時間進行session切分，于是代碼變成了這樣
rrweb.record({
emit(event, checkout) {
if(checkout)rrwebSessionSet();
storagePush(event);
},
checkoutEveryNms: 1000 * 60 * 10
});
每一次checkoutEveryNms到期時，emit里的第二個參數checkout都會為true，這樣就可以知道新的session開始，給session分配一個唯一值，存到數據庫中的數據結構改為這樣
{
timestamp: 1563418490795,
name:"小明",
session:xxxxxxxxxxx,
event:...
}
有了session概念之后，某個人某一天的操作就可以按照session進行選擇
播放頁面如下
7.小項目測試完畢后，希望引入一個大項目進行測試，于是開放了一個uv上千、pv幾十萬的大項目，采集一天的數據后，發現存儲數據正常，而播放頁面已經獲取不到數據，查看mongo的stats發現一天存儲量達到了1500萬條，每一條數據基本在幾十KB到幾M之間。
首先對不同的項目進行分表存儲，并將索引設置為后臺處理，這個方案使用后播放頁面變得正常，但人員列表接口還是很慢。
于是在每次存儲mongo時，存一份人員和日期的數據到redis中，目前系統已經正常運行，所有接口能在1s內返回所有數據。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105787.html
摘要：用于將及其狀態轉化為可序列化的數據結構并添加唯一標識則是將記錄的數據結構重建為對應的。用于記錄中的所有變更則是將記錄的變更按照對應的時間一一重放。表示觀察變動時，是否需要記錄變動前的屬性值。該方法返回變動記錄的數組。 摘要： 網頁應該如何錄屏呢？ 作者：Winty 原文：用戶行為錄幀調研 Fundebug經授權轉載，版權歸原作者所有。 關鍵點 首先，每一次會話都有一個唯一的s...
摘要：初識依稀記得那年參加線下活動，第一次聽說這個詞語，當時的主講人是郭達峰，他播放了一個關于及的性能對比視頻。合成事件會以事件委托的方式綁定到組件最上層，并且在組件卸載的時候自動銷毀綁定的事件。 初識React 依稀記得2015那年參加線下活動，第一次聽說React這個詞語，當時的主講人是郭達峰，他播放了一個關于ember、angular及react的性能對比視頻： React.js Co...
摘要：數據浪潮之間的前端工程師十年來，波瀾壯闊的移動互聯網浪潮促進了技術的迅猛發展，隨著瀏覽器性能網絡帶寬等基礎設施的提升，也能夠承載起包含復雜交互可視化計算邏輯需求的富客戶端應用。 showImg(https://segmentfault.com/img/remote/1460000016874425); 本文是架構師 2018-10 月刊的卷首語，歸納于自筆者的技術之路系列文章，也是對 ...
摘要：也能幫你寫代碼了微軟和團隊一起推出擴展，預覽版可以在插件市場直接查找安裝。微軟宣布將采用內核這對于諸多的前端開發者而言，無疑是本年底最大的福音具體的計劃可以參考官網的博客，在不久的將來，基于的瀏覽器將要正式和我們見面啦。 訂閱 / 投稿：https://github.com/txd-team/monthly本期小編：?Hkmu (扶容)?/?x-cold (尹摯) 新聞快報 npm ...
閱讀 1004·2021-11-25 09:43
閱讀 1672·2019-08-30 13:59
閱讀 1589·2019-08-30 11:22
閱讀 2123·2019-08-30 11:06
閱讀 1299·2019-08-28 17:51
閱讀 3717·2019-08-26 12:12
閱讀 778·2019-08-26 12:11
閱讀 443·2019-08-26 12:10
