如何使用 frontend-tracker 工具發現並反饋前端錯誤？

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

Frontend Tracker

介紹

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

特色

記錄併發送前端頁面產生的錯誤
記錄腳本錯誤
記錄 XHR 請求錯誤
記錄 XHR 請求超時
記錄速度較慢的 XHR 請求
記錄跨域的 XHR 請求
記錄資源加載錯誤
記錄跨域資源加載
正則表達式兼容的 URL 配置方式

安裝

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

bower install frontend-tracker --save

或者使用 npmjava

npm install frontend-tracker --save

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

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

<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.npm

xhr

Object
Required

受權方式

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

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