摘要： 試用BadJS。
- 原文：開源前端腳本錯誤監控及跟蹤解決項目-BadJS 試用
- 作者：過錯
Fundebug經授權轉載，版權歸原作者所有。
BadJS 是 一個web 前端腳本錯誤監控及跟蹤項目。此項目為鵝廠 imweb（qq群:179045421） 團隊的開源項目。此項目支持單機，集群，docker。存儲支持mongodb等。
官網文檔：https://github.com/BetterJS/doc 本文主要參考了此文檔
功能
-
一站式體系化解決方案：業務只需要簡單的配置，引入上報文件，即可實現腳本錯誤上報，每日統計郵件跟蹤方便。
-
可視化查詢系統，快速定位錯誤信息：web應用程序腳本數量龐大，開發人員在如此之多的腳本中定位某個問題變得困難。BadJS能夠巧妙定位錯誤腳本代碼，進行反饋。通過各種查詢條件，快速找到詳細錯誤日志。跨域、Script Error等棘手問題不再是難題：tryjs幫你發現一切。
-
真實用戶體驗監控與分析：通過瀏覽器端真實用戶行為與體驗數據監控，為您提供JavaScript、AJAX請求錯誤診斷和頁面加載深度分析幫助開發人員深入定位每一個問題細節。即使沒有用戶投訴，依然能發現隱蔽bug，主動提升用戶體驗。
-
用戶行為分析：細粒度追蹤真實的用戶行為操作及流程，前端崩潰、加載緩慢及錯誤問題，可關聯到后端進行深度診斷。
-
產品質量的保障：瀏覽器百花齊放，用戶環境復雜，巨大的差異導致開發人員難以重現用戶遇到的問題。無法像后台一樣上報所有用戶操作日志。通過BadJS，上報用戶端腳本錯誤，為產品質量保駕護航。
我這里記錄一下 我在win10下單機使用（hello world的程度）的過程。
1. 環境要求
- nodejs 0.12+
- mysql 5.0+
- mongodb 3.0+
- git 命令，用於拉取各個系統模塊
2. 安裝
-
進入到badjs-installer的目錄，運行 npm run clone ，拉取各個模塊
-
運行npm run install ,安裝依賴，這個步驟很容易出現問題 ，對於新用戶建議進入各個模塊進行npm install 如果npm不好使，請用yarn試試
-
進入badjs-web/db ，將里面的 create.sql 導入到 mysql中
-
安裝mysql
-
安裝mongodb（保證不需要驗證也可以登錄，即無用戶名和密碼登錄）
-
修改 badjs-installer\badjs-web下的配置 project.json中的mysql的數據庫用戶名和密碼。默認是用戶名和密碼都是root。可以改成自己的。
3. 運行
運行 npm run start ，啟動各個模塊
4. 配置
- 訪問 http://127.0.0.1:8081/index.html ，進入頁面確定啟動成功。
- 用戶名admin和密碼admin登錄。
- 申請一個項目並審核通過
- 效果如下
記住 上報的id
5. 測試
下載項目 https://github.com/BetterJS/badjs-report
找到里面的badjs-report\example下的index.html
<!Doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="../src/bj-report.js"></script>
<script src="../src/bj-wrap.js"></script>
<script src="../src/requirejs/require.js"></script>
</head>
<body>
<script>
BJ_REPORT.init({id: 1 , uin : 1, random: 1 , url:"http://127.0.0.1:80/badjs"})
//主動上報錯誤日志
BJ_REPORT.report("終於成功了");
//info上報，用於記錄操作日志
BJ_REPORT.info("info");
//可以結合實時上報，跟蹤問題; 不存入存儲
BJ_REPORT.debug("debug");
//記錄離線日志
BJ_REPORT.offlineLog("offlineLog");
var mm=1/0;
var a=b;
</script>
</body>
</html>
注意，原文代碼是 我從別的地方考一個require.js 這里是我自己加的。
BJ_REPORT.init({id: 1 , uin : 1, random: 1 , url:"[http://127.0.0.1:80/badjs](http://127.0.0.1/badjs)"})的id一定要有，用在步驟4配置的項目里的上報id就行了。
6. 看看效果吧
刷新index.html頁面。效果：
7. 后記
基本完成了。效果也還可以。
當然和fundebug相比還是要差了很多，尤其是沒有重放功能等。不過也算是夠用了。
作者：過錯
出處：http://www.cnblogs.com/wang2650
關於作者：net開發做的久而已。十余年時光虛度！
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接。如有問題，可以郵件：wang2650@163.com 聯系我，非常感謝。