js-apm-monitor
是一个简单、轻量级的H5性能和异常监控库。致力于为H5开发者提供快捷的手段监控H5页面性能和异常的基础数据并上报。
- 简洁的API设计,开箱即用;
- 使用 TypeScript 构建,提供可靠性;
- 一站式满足性能和异常的监控需求;
- 日志上报服务支持定制化;
npm install --save js-apm-monitor
import apmMonitor from 'js-apm-monitor';
apmMonitor.init({
url: 'your upload url',
monitor: {
performance: true, // 开启性能监控
requestPerformance: true, // 开启接口性能监控
jsError: true, // 开启JS运行异常监控
consoleError: true, // 开启console.error 错误上报
resourceError: true, // 开启资源加载异常监控
requestError: true, // 开启请求异常监控
}
})
apmMonitor.customReporter((log) => {
// your report code
tracker.track({
name: 'log',
...log
})
})
字段名 |
中文名 |
解释 |
useragent |
UA |
|
client_os |
客户端系统 |
|
client_os_version |
客户端系统版本好 |
|
network |
网络类型 |
|
browser |
浏览器名称 |
|
browser_version |
浏览器版本号 |
|
screen_width |
屏幕宽度 |
|
screen_height |
屏幕高度 |
|
字段名 |
中文名 |
解释 |
redirect_time |
重定向耗时 |
|
dns_time |
DNS 解析耗时 |
|
tcp_time |
TCP 连接耗时 |
|
ssl_time |
SSL 安全连接耗时 |
|
ttfb_time |
网络请求耗时 |
读取到第一个字节的时间 |
response_time |
数据传输耗时 |
|
dom_analysis_time |
DOM 解析耗时 |
|
resources_time |
资源加载耗时 |
|
firstbyte_time |
首包时间 |
|
fpt_time |
首次渲染时间 |
|
tti_time |
首次可交互时间 |
单页应用此时还不可交互 |
dom_ready_time |
DOM Ready 时间 |
|
load_time |
页面完全加载时间 |
参考价值不大,部分图片可能加载很慢 |
资源加载性能 |
|
|
script_count |
JS资源数量 |
|
script_load_time |
所有JS加载耗时 |
从第一个JS加载开始到最后一个JS加载完成之间的耗时 |
style_count |
样式资源数量 |
|
style_load_time |
所有样式加载耗时 |
从第一个style加载开始到最后一个style加载完成之间的耗时 |
img_count |
图片资源数量 |
|
img_load_time |
所有图片加载耗时 |
|
字段名 |
中文名 |
值 |
error_type |
错误类型 |
(script | unhandledrejection | resource | consoleError | fetch | ajax) |
error_level |
错误等级 |
error |
error_url |
报错文件 |
|
error_lineno |
报错行 |
|
error_colno |
报错列 |
|
error_stack |
报错堆栈 |
|
error_msg |
错误详情 |
|