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