Fundebug錄屏插件更新至0.5.0，新增domain參數(shù)

摘要： 通過配置domain來保證“視頻”的正確錄制

錄屏功能介紹

Fundebug提供專業(yè)的異常監(jiān)控服務(wù)，當(dāng)線上應(yīng)用出現(xiàn) BUG 的時(shí)候，我們可以第一時(shí)間報(bào)警，幫助開發(fā)者及時(shí)發(fā)現(xiàn) BUG，提高 Debug 效率。在網(wǎng)頁端，我們通過原創(chuàng)的錄屏技術(shù)，可以 100%還原 BUG 出現(xiàn)之前用戶的操作流程，幫助開發(fā)者快速?gòu)?fù)現(xiàn)出錯(cuò)場(chǎng)景。演示視頻如下：https://static.fundebug.cn/eleme_full.mp4

其實(shí)，我們錄制的并不是一個(gè)真正的視頻！算法經(jīng)過優(yōu)化，整個(gè)“錄制”過程 CPU 的使用率非常低。和傳統(tǒng)的視頻相比，體積小了成百上千倍。Fundebug 插件“錄制”的“短視頻”，壓縮后的體積只有幾十 KB。

感興趣的話，歡迎大家免費(fèi)試用~

尊重用戶隱私

錄屏功能涉及到用戶隱私，我們作為第三方服務(wù)，也非常重視這一點(diǎn)：

• Fundebug 默認(rèn)關(guān)閉錄屏功能，開發(fā)者需要的時(shí)候可以自行開啟；
• Fundebug 并不是全程錄屏，只會(huì)錄制 BUG 出現(xiàn)之前 10~20s 的用戶操作；
• Fundebug 提供敏感信息過濾過濾功能，開發(fā)者可以過濾掉用戶隱私信息；
• Fundebug 重視數(shù)據(jù)安全，傳輸過程全程加密，數(shù)據(jù)庫有多重安全防護(hù)；
• Fundebug 會(huì)定期(目前是刪除 60 天之前的數(shù)據(jù))刪除過期錯(cuò)誤數(shù)據(jù)，這樣既節(jié)省成本，也保護(hù)用戶隱私；

請(qǐng)大家放心使用~

錄屏插件更新至 0.5.0

此次插件升級(jí)新增了domain配置項(xiàng)，具體內(nèi)容可參考官方文檔。

錄屏插件默認(rèn)會(huì)獲取當(dāng)前的domain信息，無需主動(dòng)配置。只有當(dāng)項(xiàng)目掛載在非根目錄下面的時(shí)候，才需要主動(dòng)配置domain屬性。

為什么需要配置domain屬性呢？

因?yàn)樗械撵o態(tài)資源(圖片、CSS、JS)的路勁都是相對(duì)于項(xiàng)目的根目錄，如果插件無法正確獲取項(xiàng)目根目錄信息，則無法獲取靜態(tài)資源，從而導(dǎo)致錄屏失效。

如何配置呢？

我們通過一個(gè)例子來解釋。 假設(shè) Fundebug 推出一個(gè)在線代碼靜態(tài)分析服務(wù)，計(jì)劃將其放在https://www.fundebug.com/static-type-checking/online下。

那么我們需要配置 domain 屬性，錄屏功能才能正常工作。

<script src="https://js.fundebug.cn/fundebug.revideo.0.5.0.min.js"
            domain="https://www.fundebug.com/static-type-checking/online"</script>

或則：

if ("fundebug" in window) {
    fundebug.domain = "https://www.fundebug.com/static-type-checking/online";
}

如果不配置domain，插件獲取的domain是https://www.fundebug.com。如果有一張圖片，本來正確的路徑應(yīng)該是https://www.fundebug.com/static-type-checking/online/static/1.jpg，會(huì)被錯(cuò)誤的計(jì)算成https://www.fundebug.com/static/1.jpg,就會(huì)造成圖片獲取不到，無法正常顯示的問題。

接入方法

從 BUG 監(jiān)控插件 1.7.3版本開始，我們拆分了錄屏代碼。如果需要使用錄屏功能的話，需要單獨(dú)接入錄屏插件。

• 使用 Script 方式接入

  <script
    type="text/javascript"
    src="https://js.fundebug.cn/fundebug.revideo.0.5.0.min.js"
  />

• 使用 NPM 接入

  require("fundebug-revideo");

最后，感謝 Fundebug 用戶荔枝 FM 的反饋。

參考

• 黑科技！Fundebug 支持可視化重現(xiàn)出錯(cuò)場(chǎng)景
• Fundebug 文檔 - 錄屏

關(guān)于Fundebug

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

版權(quán)聲明

轉(zhuǎn)載時(shí)請(qǐng)注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2019/07/24/release_revideo_0_5_0/