1.0.0-alpha.6 • Published 5 years ago

js-apm-monitor v1.0.0-alpha.6

Weekly downloads
3
License
ISC
Repository
github
Last release
5 years ago

js-apm-monitor

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
    })
})

日志字段

基础字段

字段名中文名解释
useragentUA
client_os客户端系统
client_os_version客户端系统版本好
network网络类型
browser浏览器名称
browser_version浏览器版本号
screen_width屏幕宽度
screen_height屏幕高度

性能日志字段

字段名中文名解释
redirect_time重定向耗时
dns_timeDNS 解析耗时
tcp_timeTCP 连接耗时
ssl_timeSSL 安全连接耗时
ttfb_time网络请求耗时读取到第一个字节的时间
response_time数据传输耗时
dom_analysis_timeDOM 解析耗时
resources_time资源加载耗时
firstbyte_time首包时间
fpt_time首次渲染时间
tti_time首次可交互时间单页应用此时还不可交互
dom_ready_timeDOM Ready 时间
load_time页面完全加载时间参考价值不大,部分图片可能加载很慢
资源加载性能
script_countJS资源数量
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错误详情