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

日志字段

基础字段

| 字段名 | 中文名 | 解释 | |----|----|-----| |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|错误详情||