我们开源了一款前端错误收集工具 frontend-tracker ， 欢迎大家体验反馈~

[pgyer]

这款工具是蒲公英团队自主开发的，现在分享给大家，希望能帮助大家在工作中获取便利，欢迎大家反馈让它变得更完善。

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]