如何使用 frontend-tracker 工具发现并反馈前端错误？

摘要: frontend-tracker ，主要是在前端网页出现错误时能发现并将错误信息反馈到指定服务器上。

蒲公英团队最近开发了一款前端错误收集工具，名叫 frontend-tracker ，这款工具主要是在前端网页出现错误时能发现并将错误信息反馈到指定服务器上，本着开源精神，现在分享给大家，希望能帮助大家在工作中获取便利，欢迎大家使用交流并分享给你周围的小伙伴们。

Frontend Tracker

介绍

Frontend Tracker 可以发现前端页面的错误，并且用户察觉错误前将错误发送至指定服务器。

特点

记录并发送前端页面产生的错误

记录脚本错误

记录 XHR 请求错误

记录 XHR 请求超时

记录速度较慢的 XHR 请求

记录跨域的 XHR 请求

记录资源加载错误

记录跨域资源加载

正则表达式兼容的 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]