简介
wts-monitor 是一款前端性能监控工具，它可以监控 Web 应用的性能指标，比如页面加载时间、资源加载时间、异常信息等等。通过使用 wts-monitor 可以对前端应用的性能问题做到快速定位和排查问题，提高用户体验。
安装
在命令行中使用 npm 进行安装：
npm install wts-monit --save
快速上手
初始化
import WtsMonitor from 'wts-monit'
const monitor = new WtsMonitor({
reportUrl: 'http://your/server/reportUrl'
})在上述代码中，我们通过实例化 WtsMonitor，传递了一个 reportUrl 参数（必须），用来指定数据上报的地址。
监控页面性能指标
monitor.performance().then((data) => {
console.log(data)
}, (e) => {
console.log(e)
})WtsMonitor 提供了 performance 函数来获取页面性能指标，支持 Promise 方式调用。当 Promise 被 resolved 后，会返回以下数据：
-- -------------------- ---- ------- - -------- -- ------- -------- -- ------- -------- -- ------- ----------- -- ------ ------------- -- ---------- -------------- -- ---------- ------------- -- ----- ------------- -- --- ------- ----------- -- -------- --------- -- ---- ------------ -- ---- ------------- -- -------- ---------------- -- ------ ---------------- -- ------ -
添加自定义监控
monitor.addCustom({
key: 'test',
value: 'hello world'
})WtsMonitor 提供了 addCustom 函数可以帮助我们添加自定义监控指标，比如处理前端 JS 的错误信息。
上报数据
monitor.report()
WtsMonitor 提供了 report 函数可以用来上报监控数据到指定的地址，我们需要在初始化时指定 reportUrl 参数。
最佳实践
添加自定义异常处理
window.onerror = function (msg, url, line, col, error) {
monitor.addCustom({
key: 'errorMsg',
value: msg
})
monitor.report()
}在页面中加入自定义异常处理函数，当页面发生异常时，可以将异常信息上报到指定的地址，方便定位排查问题。
对重要交互进行性能监控
-- -------------------- ---- -------
----- --- - ------------------------------
----------------------------- -- -- -
-------------------
---- ---------------
------ ----------
--
----------------
--当页面中有重要交互事件发生时，我们可以在相关的事件处理函数中调用 addCustom 函数，添加自定义指标，然后将数据上报到服务端，以便分析和统计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671198dd3466f61ffe7cf