開源前端腳本錯誤監控及跟蹤解決項目-BadJS 試用

時間 2019-12-08

標籤開源前端腳本錯誤監控跟蹤解決項目 badjs 試用简体版

原文原文鏈接

BadJS 是一個web 前端腳本錯誤監控及跟蹤項目。此項目爲鵝廠 imweb（qq羣:179045421）團隊的開源項目。此項目支持單機，集羣，docker。存儲支持mongodb等。

官網文檔：https://github.com/BetterJS/doc 本文主要參考了此文檔

功能

1 一站式體系化解決方案：業務只須要簡單的配置，引入上報文件，便可實現腳本錯誤上報，每日統計郵件跟蹤方便。html

2 可視化查詢系統，快速定位錯誤信息：web應用程序腳本數量龐大，開發人員在如此之多的腳本中定位某個問題變得困難。BadJS可以巧妙定位錯誤腳本代碼，進行反饋。經過各類查詢條件，快速找到詳細錯誤日誌。
跨域、Script Error等棘手問題再也不是難題：tryjs幫你發現一切。前端

3 真實用戶體驗監控與分析：經過瀏覽器端真實用戶行爲與體驗數據監控，爲您提供JavaScript、AJAX請求錯誤診斷和頁面加載深度分析幫助開發人員深刻定位每個問題細節。即便沒有用戶投訴，依然能發現隱蔽bug，主動提高用戶體驗。node

4 用戶行爲分析：細粒度追蹤真實的用戶行爲操做及流程，前端崩潰、加載緩慢及錯誤問題，可關聯到後端進行深度診斷。mysql

5 產品質量的保障：瀏覽器百花齊放，用戶環境複雜，巨大的差別致使開發人員難以重現用戶遇到的問題。沒法像後臺同樣上報全部用戶操做日誌。經過BadJS，上報用戶端腳本錯誤，爲產品質量保駕護航。git

我這裏記錄一下我在win10下單機使用（hello world的程度）的過程。

1. 環境要求

nodejs 0.12+github

mysql 5.0+web

mongodb 3.0+sql

git 命令，用於拉取各個系統模塊mongodb

2. 安裝

1 git clone https://github.com/BetterJS/badjs-installer.gitdocker

2 進入到badjs-installer的目錄，運行 npm run clone ，拉取各個模塊

3 運行npm run install ,安裝依賴，這個步驟很容易出現問題，對於新用戶建議進入各個模塊進行npm install 若是npm很差使，請用yarn試試

4 進入badjs-web/db ，將裏面的 create.sql 導入到 mysql中

5 安裝mysql

6 安裝mongodb（保證不須要驗證也能夠登陸，即無用戶名和密碼登陸）

7 修改 badjs-installer\badjs-web下的配置 project.json中的mysql的數據庫用戶名和密碼。默認是用戶名和密碼都是root。能夠改爲本身的。

3. 運行

運行 npm run start ，啓動各個模塊

4 配置

1 訪問 http://127.0.0.1:8081/index.html ，進入頁面肯定啓動成功。
2 用用戶名admin和密碼admin登陸。
3 申請一個項目並審覈經過
4 效果以下

記住上報的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"})的id必定要有，用在步驟4配置的項目裏的上報id就好了。