如何使用 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

受权方式

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

有关代码库及更多详情可见：[https://github.com/Pgyer/frontend-tracker]