如何使用 frontend-tracker 工具收集前端錯誤？

蒲公英團隊最近開發了一款前端錯誤收集工具，名叫 frontend-tracker ，這款工具主要是在前端網頁出現錯誤時能發現並將錯誤信息反饋到指定服務器上，本着開源精神，如今分享給你們，但願能幫助你們在工做中獲取便利，歡迎你們使用交流並分享給你周圍的小夥伴們。

Frontend Tracker

介紹

Frontend Tracker 能夠發現前端頁面的錯誤，而且用戶察覺錯誤前將錯誤發送至指定服務器。

特色

1. 記錄併發送前端頁面產生的錯誤

2. 記錄腳本錯誤

3. 記錄 XHR 請求錯誤

4. 記錄 XHR 請求超時

5. 記錄速度較慢的 XHR 請求

6. 記錄跨域的 XHR 請求

7. 記錄資源加載錯誤

8. 記錄跨域資源加載

9. 正則表達式兼容的 URL 配置方式

安裝

frontend-tracker 代碼能夠經過使用使用 Bower

bower install frontend-tracker --save

或者使用 npm

npm install frontend-tracker --save

或者直接下載 ZIP 包來得到.

添加到你須要監控錯誤的頁面便可

<script src="path/to/package/dist/tracker.min.js">

配置

添加如下代碼到您的代碼中以啓動 Frontend Tracker

<script type="text/javascript">
  window.setTracker({
    endpoint: '',
    xhr: {
      log: {
        crossOrigin: true,
        slowRequest: true,
        timeout: true,
        error: true
      },
      origin: [
        'http://www.pgyer.com',
        /.*\.tracup\.com/,
      ],
      timeLimit: {
        send: 0,
        load: 0,
        total: 0
      },
      exclude: []
    },
    resource: {
      log: {
        crossOrigin: true,
        error: true
      },
      origin: [],
      exclude: []
    },
    script: {
      log: {
        error: true
      },
      exclude: []
    }
  })
  </script>

配置項

endpoint

String
Required

用於接收錯誤的 URL ／ URI.

xhr

Object
Required

用於配置 XHR 錯誤發生時的行爲

名稱	類型	功能描述
log	Required, Object	配置 XHR 錯誤的記錄行爲
log.crossOrigin	Required, Boolean, Default: false	當設置成 true 時記錄跨域的 XHR 請求
log.slowRequest	Required, Boolean, Default: false	當設置成 true 時記錄速度較慢的 XHR 請求
log.timeout	Required, Boolean, Default: false	當設置成 true 時記錄超時的 XHR 請求
log.error	Required, Boolean, Default: false	當設置成 true 時記錄出錯的 XHR 請求
origin	Optional, Array	設置域內的 URI, 支持正則表達式
timeLimit	Optional, Object	用於描述速度較慢 XHR 請求的時間界定值
timeLimit.send	int, Default: 0	請求發送到開始接收數據前的時間 (ms), 0 表示不限制
timeLimit.load	int, Default: 0	響應內容接收的時間 (ms), 0 表示不限制
timeLimit.total	int, Default: 0	請求花費的總時間 (ms), 0 表示不限制
exclude	Optional, Array	設置忽略錯誤的 URI, 支持正則表達式

resource

Object
Required

用於配置資源錯誤發生時的行爲

名稱	類型	功能描述
log	Required, Object	配置資源錯誤的記錄行爲
log.crossOrigin	Required, Boolean, Default: false	當設置成 true 時記錄跨域的資源請求
log.error	Required, Boolean, Default: false	當設置成 true 時記錄錯誤的資源請求
origin	Optional, Array	設置域內的 URI, 支持正則表達式
exclude	Optional, Array	設置忽略錯誤的 URI, 支持正則表達式

script

Object
Required

用於配置腳本錯誤發生時的行爲

name	type	description
log	Required, Object	配置資源錯誤的記錄行爲
log.error	Required, Boolean, Default: false	當設置成 true 時記錄腳本錯誤
exclude	Optional, Array	設置忽略錯誤腳本文件 URI, 支持正則表達式

處理錯誤信息

錯誤信息會被以 JSON 的形式發送（POST）到設置的 endpoint 上

字段

名稱	值	描述
type	String	錯誤類型 XHR, RESOURCE, SCRIPT 的一種
data	Object	詳細錯誤信息
currentURL	string	發生錯誤的 URL
userAgent	string	發生錯誤瀏覽器的 User-Agent

錯誤信息能夠經過 data.message 得到，詳細信息須要經過解析 data.detail 來得到

類型	data.detail 的結構	描述
XHR	{request: String, response: {status: int, response: String},timing: {send: int, load: int, total: int}}	request: 請求的 URL, status: 狀態碼, response: 響應內容, send: 發送耗時(ms), load: 接收耗時 (ms), total: 總耗時 (ms)
RESOURCE	{tagname: String, resourceURL: String}	tagname: 標籤, resourceURL: 資源 URI
SCRIPT	{file: String, line: int, column: int, trace: String}	file: 腳本文件名, line: 行號, column: 列號, trace: 調用堆棧

受權方式

Frontend Tracker 以 GPL-3 licensed 受權使用.

有關代碼庫及更多詳情可見：[https://github.com/Pgyer/frontend-tracker]