業務線接入前端異常監控sentry

	是否開源	收費	語言	監控范圍
sentry	是	自己搭建服務器（免費）價格	英文	Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue......
fundebug	否	收費（708一年，本地版：12萬一年）	中文	Angular、AngularJs、Backbone、Ember、JavaScript、React、Vue、微信小程序等等......

why？（為什么要有前端異常監控）

隨着移動互聯網的快速發展，互聯網獲取流量的渠道越來越多樣化。前端的應用場景不在局限於網頁，通常是網頁、公眾號、安卓端、ios都有涉及。這樣的話很多邊界問題完全依賴於后端的監控和測試階段的測試是完全不夠的。

用系統化的報錯采集替代人工上報。以便於獲得更快速的異常收集。

How？（怎么做）

js的異常處理方式

收集異

 
            // try-catch 異常處理 
           

 
            // try-catch 在我們的代碼中經常見到，通過給代碼塊進行 try-catch 進行包裝后，當代碼塊發生出錯時 catch 將能捕捉到錯誤的信息，頁面也將可以繼續執行。 
           

 
            // 但是 try-catch 處理異常的能力有限，只能捕獲捉到運行時非異步錯誤，對於語法錯誤和異步錯誤就顯得無能為力，捕捉不到。 
           

 
            try  
            {

 
            error     
            // 未定義變量

 
            console.log( 
            '我知道錯誤了' 
            );

 
            console.log(e);

}

 
            ---------------------------------------------------------------------------------------------------------------------------- 
           

 
            // window.onerror 異常處理 
           

 
            // 無論是異步還是非異步錯誤，onerror 都能捕獲到運行時錯誤。 
           

 
            // 另外 onerror 是無法捕獲到網絡異常的錯誤 
           

 
            window.onerror =  
            function  
            (msg, url, row, col, error) { 
           

 
            console.log( 
            '我知道錯誤了' 
            );

 
            console.log({

 
            msg,  url,  row, col, error

})

 
            return  
            true 
            ;

};

js異常的上報方式

根據定義好的數據格式，利用ajax發送數據

根據定義好的數據格式，利用img標簽發送數據

 
                      // 數據格式示例 
                     
                      {  
                      // 錯誤日志信息 
                     
                      msg:  
                      '' 
                      , 
                     
                      url:  
                      '' 
                      ,  
                      // 錯誤來源頁面url 
                     
                      line:  
                      '' 
                      ,  
                      // 錯誤行數 
                     
                      col:  
                      '' 
                      ,  
                      // 錯誤列數 
                     
                      stack:  
                      '' 
                      , 
                     
                      from:  
                      '' 
                      ,  
                      // 錯誤來源 
                     
                      "navigator.userAgent" 
                      :  
                      '' 
                      ,  
                      //瀏覽器信息 
                     
                      ret: {},  
                      // 解析source map后原始准確定位數據 
                     
                      evtMoniter: []  
                      //用戶行為保存數組,保存最近10次行為操作 
                     
                      }

統計異常監控上報的常見問題
上報后的數據后台對對應的數據進行存儲分類，根據不同項目不同種類的錯誤進行統計。超過一定數量可以設置報警等級制。

entry有兩種安裝方式，一種是利用docker安裝，另外一種是配置pathon環境。官網推薦用docker，下面主要介紹docker渠道的安裝。

構建容器

克隆倉庫 getsentry/onpremise.

創建對應目錄

 
                    mkdir -p data/{sentry,postgres} 
                   

獲取項目的Key, 拷貝最后一行的key

 
                    docker-compose run --rm web config generate-secret-key 
                   

打開docker-compose.yml, 將key考到 SENTRY_SECRET_KEY 后面

 
                    vim docker-compose.yml 
                   

創建項目的superuser，根據提示一次填寫

 
                    docker-compose run --rm web upgrade 
                   

開啟 sentry 服務，就可以進入自己的sentry啦， http:://ip:9000 即可進入你的 sentry

 
                    docker-compose up -d 
                   

nginx配置

 
                    server { 
                   
                    listen   
                    80 
                    ; 
                   
                    server_name yusidi.sentry.com; 
                   
                    location / { 
                   
                    proxy_pass http: 
                    //127.0.0.1:9000; 
                   
                    } 
                   
                    }

利用sentry來改善你的工作流程

文檔：https://blog.sentry.io/2018/03/06/the-sentry-workflow

sourcemap上傳：

 
                  // webpack接入 
                 
                  var SentryCliPlugin = require( 
                  '@sentry/webpack-plugin' 
                  ) 
                 
                  plugins:[ 
                 
                  new  
                  SentryCliPlugin({ 
                 
                  include:  
                  'dist/js' 
                  , 
                 
                  ignoreFile:  
                  '.sentrycliignore' 
                  , 
                 
                  ignore: [ 
                  'node_modules' 
                  ,  
                  'webpack.config.js' 
                  ], 
                 
                  configFile:  
                  'sentry.properties' 
                 
                  }), 
                 
                  ] 
                 
                  根目錄創建文件夾.sentryclirc 
                 
                  [auth] 
                 
                  token=f99aebfed9734d8fa5cc834f80c53a6a6e8a268471e749acbea5c25941115f35 
                 
                  [defaults] 
                 
                  org=jiazheng 
                 
                  project=daily-clean 
                 
                  url=https: 
                  //jz-homer.daojia-inc.com/

homer API

error

 
                      
                    homer.error( 
                    new  
                    Error( 
                    111 
                    )) 
                   

info

 
                    homer.info( 
                    '用戶aaa' 
                    )