前端修bug神器「bug信息收集系統」搭建圖解

背景

• 一個項目從開發到上線，必將測試過程。在中小型公司中，程序的測試改bug過程幾乎由全手工完成。通常須要通過這幾個階段：

  • 測試發現Bug，並向開發反饋
  • 開發與測試溝通，重複屢次瞭解相關狀況（如所在頁面，帳號密碼，所作的操做，重現步驟，瀏覽器信息等）* N
  • 開發發現問題，修改代碼，完成bug修復
• 通常而言，在改bug過程耗時最多的，是開發向測試瞭解狀況的這個步驟，這是一個反覆溝通的過程，須要極大的溝通成本，並且還可能發生信息溝通遺漏的狀況。
• 若是是移動端的項目，改bug的耗時更甚。爲了解與後端交互的數據狀況，還得抓包（裝證書，設置代理，輸入地址等）

• 爲了解程序的運行狀況而作的操做是重複，繁瑣，無心義。
• 本項目意在用程序代替咱們完成步驟二的工做，減小測試和前端的溝通成本，減小bug重現的耗時，提升工做效率。

項目使用介紹

本項主要用於記錄出現bug時程序的運行信息，如ajax請求，自定義收集的參數（如用戶帳號密碼），頁面路徑，瀏覽器信息等，給開發改bug提供參考數據，定位問題。工具的方式也很簡單，分爲以下四個步驟：

• 當測試發現bug時，點擊按鈕上報數據

  
  

• 打開列表，找到剛剛上報數據的對應詳情連接

• 測試向開發反饋bug並附上Bug信息對應連接

• 開發經過bug信息瞭解程序當時運行信息，快速重現或定位問題，修復bug

項目特色

前端可獨立完成系統部署。

• 可能不少小夥伴看到數據存儲和頁面存放，會煩惱，這些後端東西我不懂啊，也不想麻煩後端人員啊。
• 不用怕，本項目不須要後端編程。數據存儲和頁面存放咱們都經過第三方服務（LeanCloud和github，都是免費的，後續會講到）來完成，前端可徹底獨立搭建。並且過程很簡單。
• 整個配置過程半個小時足矣，且不存在坑。

功能簡潔

• 一共就5個函數，一看就會用。

源碼簡單

• 源碼沒有加密
• 除了數據存儲（LeanCloud），不依賴任何第三方插件
• 源碼簡單，可針對本身的項目進行定製化改造或擴展

配備源碼介紹文檔

• 有興趣瞭解背後技術原理的同窗能夠點擊這裏，查看源碼說明文檔

LeanCloud配置說明

在系統使用前，咱們須要先開通LeanCloud，準備一個數據存儲空間

LeanCloud簡介

• LeanCloud就是BaaS服務商的一種，可提供數據存儲服務。前端能夠經過JS代碼簡單地操做存儲在服務器中的數據。避免了後端知識門檻，避免後端開發的工做。
• 國內較爲流行的BaaS服務商有LeanCloud，Bmob，uncode等
  

註冊及基本使用

• 註冊方法很簡單，經過github和QQ都綁定註冊，不須要認證備案等繁瑣過程，註冊便可用。

• 註冊完成後，點擊控制檯。

• 點擊建立應用，這裏咱們選擇「開發版」便可，開發版是免費的，每日可請求數30,000 次，對於通常的項目測試而言足夠了。

• 點擊應用，進入詳情。注意：因爲系統要對新建的項目進行一系列初始化工做，例如建立數據表格等。須要等待3分鐘後再進行後續操做。
• 點擊設置-》應用key，記錄「App ID」和「App Key」。後續使用LeanCloud功能時須要用到

• 點擊建立class，類名設置爲bug，默認權限須要勾選爲「無限制」，不然部分功能將被限制。（若是擔憂數據安全性，能夠點擊這裏查看優化方案，在此咱們先實現主體功能）

• 點擊新建立的class，右側顯示的，就是該類保存的數據表。

• 到此爲止，已完成了LeanCloud的配置工做，不須要像數據庫那樣，定義表，定義每列屬性等操做，系統後自行處理。

VUE組件使用說明

設置好LeanCloud，咱們就可使用信息收集的組件了

組件的載入

• 按常規載入方式便可，點擊這裏，獲取源碼
• 將代碼文件夾放入項目中，例如這裏放在components文件夾中
• 在所有VUE中載入組件，如layout組件中
• 引用 import FrontTool from '@/components/front-tool/front-tool'
• 註冊 components: {FrontTool},
• 使用 <front-tool/>
  

API介紹

• 【this.$addCustomData(Object)】 添加自定義數據，即在數據收集時，上報特定的自定義數據，經過key-value方式保存。
• 【this.$clearCustomData()】 清除自定義數據，該方法將在路由變化時自動被調用，即自定義數據僅在當前路由有效，路由跳轉後將自動清空。
• 【this.$addGlobalData(Object)】添加全局自定義數據，在整個程序中有效，每次上報數據都將攜帶該信息，可用於保存用戶帳號密碼等全局信息，以便改bug時從新登陸該帳號，重現問題
• 【this.$clearGlobalData()】清除全局自定義數據。
• 以上函數均自動註冊到VUE全局函數中，在VUE文件中直接經過this.調用便可
• 以上函數在生成環境中將會自動失效，不用擔憂報錯，無需特別註釋相關代碼。

修改配置文件

• 修改LeanCloud的配置信息，打開front-tool.VUE，找到AV.init， 填入前面記錄的 LeanCloud 的「App ID」和「App Key」。
  

• 修改對應各個環境的域名前綴。若所有都不命中，則自動設置爲local本地環境。

  let envObj = {
    dev: '-d.xxx.com', // 開發環境域名前綴
    test: '-t.xxx.com', // 測試環境域名前綴
    pre: '-p.xxx.com', // 預發佈環境域名前綴
    prod: '.xxx.com', // 正式環境域名前綴
  }

運行項目

• 原頁面左下角將出現前端工具按鈕
• 點擊彈出菜單 -> 點擊上報數據。
• 從新打開LeanCloud，打開bug類。在右側，咱們能夠看到剛剛上傳的數據。

到此，數據上報的部分也已完成，最後剩下的是數據查看部分的配置過程。

bug管理系統配置說明

• 這部分就更簡單了，先點擊這裏，獲取相關代碼。
• av.js是leadCloud插件，VUE.js就是VUE庫，bug-list.html是數據列表頁面，bug-detail.html是詳情頁面。
• 修改bug-list.html及bug-detail.html頁面中的LeanCloud配置，一樣找到AV.init，填入「App ID」和「App Key」。
• 將這四個文件放進靜態服務器，直接訪問bug-list對應連接。便可看到上報的數據列表，點擊詳情可查看某條數據的詳情信息
  
• 到此，數據查看部分也配置，整個系統也部署完成啦，很簡單吧。

github 網站配置

有些同窗可能沒有本身的靜態服務器，不要緊，那咱們用github也能夠作靜態服務器

• 咱們先建立一個新項目，項目名不重要。
• 點擊setting，找到GitHub Pages欄（ctrl+f搜索GitHub Pages可快速定位），設置爲master分支。
  
• 回到項目，咱們會發現倉庫多了個_config.ym文件，這個就是使用github作靜態服務器的配置文件。
• 接下來是常規的操做，克隆，推送，將前面下載的4個文件推到github上。
  
• 從新打開GitHub Pages欄，打開給出的路徑，這個路徑訪問的就是咱們github的倉庫，咱們在路徑上加上/bug-list.html，便可訪問數據列表頁面。
  
• Github配置也很方便，就是訪問速度有點慢，不按期可能被牆，有時間的同窗建議買個雲服務器，按流量計費很便宜，天天一毛幾毛錢就行。有困難的話，在留言區留言，筆者有空能夠寫篇文章介紹。

待優化

系統部署完了，已經能夠應付通常的項目需求。但本系統還有可進一步優化的地方

• 數據安全問題，由於LeanCloud的配置信息是明文寫在代碼中的。而前端代碼又是很容易被破解，那有什麼辦法能夠保證數據的安全性的呢？
• 這個系統不只能夠在測試環境用，在生成環境也能夠發揮它的做用的，例如咱們能夠監聽後端返回的接口狀況，當返回異常狀態碼時，主動上報數據。以便定位生成環境上的問題。
• 除了接口狀況，咱們還能夠收集VUE的報錯信息，存儲到自定義數據中，收集生產環境的報錯信息。
• 非VUE版本。目前該系統數據收集部分僅作了VUE版本的，後續將開發純js版本的，讓咱們在開發非VUE項目時也能使用。
• 前三個問題的解決方案，請關注後續文章，點擊這裏查看

完結祝好