sentry使用

概念

• js錯誤日誌統計工具，官網文檔

• 如下說明前提條件都是raven-js

日誌收集必要條件

• sentry平臺賬號註冊

• raven客戶端安裝

sentry服務平臺

進行首頁->新建項目以後，點擊settings,能夠設置錯誤日誌收集條件，其中客戶
端dsn（結構：協議://公鑰:私鑰@sentry平臺地址／sentryId）, 在sentry
客戶端raven安裝配置中會用到。

sentry客戶端raven

安裝步驟

• 根據使用平臺選擇raven（sdk選擇官網有說明）。

• 配置方法以下（我用的是react,使用的是import方式,其中url就是sentry服務端獲取的dsn,省略號是配置options):

  import Raven from 'raven-js';
  Raven.config(url, {
      release: '1.0.0',
      whitelistUrls: [
          ...
      ],
      ...
  }).install();

主要參數說明（全部上報都會攜帶的參數，公用）

• tags(對應sentry服務平臺錯誤詳情中的tags,便於分析錯誤發生的情景):

  

• user(對應sentry服務平臺錯誤詳情中的user,便於記錄觸發錯誤的具體用戶):

  

• extra(對映sentry服務平臺錯誤詳情中的Additional Data,便於各別信息的統計):

  

• whitelistUrls: 上報到sentry服務平臺的白名單，假如觸發錯誤的js連接腳本host不在其值裏，就沒法上報錯誤。

錯誤日誌上報（以我用的raven-js做爲說明，其餘可查看源代碼)

被動上報

js運行期間，若是發生錯誤時，錯誤（好比點擊回調函數執行報錯，ajax同源請求
報錯等）沒有被try catch或者以其餘方式捕捉，就會冒泡到window，觸發
[onerror][2]事件。固然資源加載失
敗，好比img, script,會執行該元素onerror不會冒泡window.onerror, 
onerror具體聲明以下：

window.onerror = function(messageOrEvent, source, lineno, colno, error) { ... }

由於window.onerror是ECMAScript不標準的屬性，不一樣瀏覽器實現可能會略有
不一樣，error參數是raven上報日誌的關鍵（ps: 沒有error,就找不到錯誤棧
stack,天然就追蹤不到問題），因此raven客戶端巧用try, catch對錯誤進行捕
捉（ps:catch獲取到的error對象有raven須要的東西,好比錯誤棧)，而後採用
captureException進行錯誤上報，核心源代碼以下：

對addEventListener、setTimeout、setInterval、
requestAnimationFrame等回調函數進行了如上包裝，這樣就能夠保證這些函數
的回調報錯時候能夠有錯誤棧，同理，能夠根據項目架構對可能出現問題進行
try..catch包裝，採用手動上報，作到最大限度錯誤日誌上報。

主動上報

採用raven.captureException(msg/e, options),第一參數能夠是字符串，
也能夠是Error對象(ps: raven內部會對所傳參數進行判斷，若是是msg,會轉換
成Error對象),第二個參數options可設置參數同raven配置安裝時能夠用的參數
同，只不過這裏用到的參數做用域只限於此條錯誤日誌，raven.config中用的
options對全部錯誤日誌都生效。

應用可以使用的監聽鉤子（*.adEventListener(以下事件，callback)

• ravenSuccess | onRavenSuccess: raven上報成功以後會dispatch此事
  件，能夠監聽此事件作一些其餘的事情，好比上報到其餘的平臺等等。

• ravenFailure | onRavenFailure：raven上報失敗以後會dispatch此事
  件，能夠監聽此事件作一些其餘的事情，好比上報到其餘的平臺等等。

• ravenHandle | onRavenHandle：手動調用Raven.captureException之
  後會dispatch此事件，能夠監聽此事件作一些其餘的事情，好比上報到其餘的平臺
  等等。

注意事項

總結一下就是根據本身的狀況，能夠設置一下whitelistUrls， ignoreErrors，
ignoreUrls，上報比例以及javascript跨域資源錯誤統計處理（crossorigin），若是你使用webpack,能夠在output中添加一個參數crossOriginLoading，webpack編譯時會自動給按需加載的js獲取加上crossorigin,說明以下：

服務端response頭部添加Access-Control-Allow-Origin: *。

建議

公鑰，私鑰信息不要存放於前端頁面，能夠放在中間服務器，走客戶端－》中間服務－》sentry服務。