欢迎使用 ZephyrMonitor 👋🏼

简体中文 | English

一款前端监控工具，包含错误监控、性能监控、设备信息收集、网络状态监测等功能。

• 对于前端线上产生的 错误 进行收集上报，支持跨域 Javascript 文件错误信息定位；

  JavaScript、Promise、Vue、资源加载 类型错误

• 支持上报 首屏性能 以及 页面资源 的加载状态，计算其多个 关键性能节点 数据提供于页面性能优化参考

  例如：first byte、首次可交互耗时、页面加载完成耗时、解析 dom 树耗时 等信息；

• 在以上功能基础上提供运行环境的 设备信息

  例如：机型、网络环境、浏览器信息、分辨率 等信息；

• 支持上报 console 自定义类型输出信息；

• 支持自定义间隔时间上报当前页面的 网速 情况。

可以将错误信息上报到服务端，对其中的堆栈信息进行 sourcemap 的解析来定位原文件中的报错位置，便于解决项目中的错误。

具体使用例子请见：zephyr-monitor-use-demo

⚙️ 安装或构建

安装

npm install zephyr-monitor

cnpm install zephyr-monitor -S

yarn add zephyr-monitor

构建

git clone git@github.com:ZephyrAndMoon/zephyr-monitor.git

npm install / cnpm install / yarn

npm run build
# 打包文件会输出为 dist/ZephyrMonitor.min.js 

🔗 引入

<!-- <script> 标签引入 -->
<script src="ZephyrMonitor.min.js"></script>

// ES module
import ZephyrMonitor from "zephyr-monitor";

// CommonJS
const ZephyrMonitor = require("zephyr-monitor");

📖 快速使用

// 初始化监控工具基础配置
const ZM = new ZephyrMonitor({
   pageId:""  // 页面标示
})

// 错误监控初始化代码
ZM.initError({
    url:"", // 上报地址
});

// 页面性能监控初始化代码
ZM.initPerformance({
    url:"",  // 上报地址
    useNetworkSpeed:true, // 是否定时间隔上报网速情况 默认为 false
});

💡 方法参数

new ZephyrMonitor

• pageId

  String（必须）

  页面标识

• useLogger

  Boolean

  • 是否开启控制台日志输出；
  • 默认开启，需要关闭设置成 false

• useCrossorigin

  Boolean

  是否开启远程 JavaScript 文件中报错的错误信息定位

new ZephyrMonitor().initError

• url

  String（必须）

  错误上报地址

• reportMethod

  Object

  信息上报方式，默认使用 XHR 上传 （如果传入子参数多于一个的话，默认顺序 Img - Fetch - Beacon - XHR）

  • reportMethod.useImg: Boolean 默认 false，使用 Img 标签上传
  • reportMethod.useFetch: Boolean 默认 false，使用 Fetch 方法上传
  • reportMethod.useBeacon: Boolean 默认 false，使用 Beacon 方法上传

• error

  Object

  捕获的错误类型对象，默认捕获 JavaScript 类型、资源类型、Promise 类型错误

  • error.vue: Boolean 默认 false，捕获 Vue 类型错误
  • error.console: Boolean 默认 false，捕获打印输出类型错误
  • error.js: Boolean 默认 true，捕获 Javascript 类型错误
  • error.resource: Boolean 默认 true，捕获资源加载类型错误
  • error.promise: Boolean 默认 true，捕获 Promise 类型错误

• vue

  VueConstructor

  开启 Vue 类型错误捕获时需要传入引入的 Vue

  import Vue from "vue";
  
  ZephyrMonitor.initError({
    // ...
    vue: Vue, 
  });

• extendsInfo

  String

  额外需要传入的自定义扩展信息

new ZephyrMonitor().initPerformance

• url

  String（必须）

  错误上报地址

• usePerf

  Boolean

  是否启用页面性能监控，默认 true

• useResource

  Boolean

  是否启用资源加载监控，默认 true

• usefulResourceType

  Object

  监控加载的资源类型，默认为 script/css/fetch/xmlhttprequest/link/img

  • usefulResourceType.useRScript: Boolean 默认 false，监控 script 标签类型资源加载情况
  • usefulResourceType.useRCSS: Boolean 默认 false，监控 css 标签类型资源加载情况
  • usefulResourceType.useRLink: Boolean 默认 false，监控 link 标签类型资源加载情况
  • usefulResourceType.useRImg: Boolean 默认 false，监控 img 标签类型资源加载情况
  • usefulResourceType.useRFetch: Boolean 默认 false，监控 Fetch 获取的资源加载情况
  • usefulResourceType.useRXHR: Boolean 默认 false，监控 XHR 获取的资源加载情况

• reportMethod

  Object

  与 FrontEndMonitor.initError 中此参数相同

• useNetworkSpeed

  Boolean

  是否开启定时网速信息上报，默认 false，间隔时间默认为 60s

• timeInterval

  Number

  定时上报网速信息的间隔时长

🔎 上报信息参数

错误信息对象

{
    pageId: String,        // 页面标识
    time: String,          // 报错时间
    category: String,      // 错误类型
    logType: String,       // 信息类别
    logInfo: {                  
        url: String,       // 报错地址
        stack: String,     // 错误堆栈（未解析）
        errorInfo: String, // 报错信息
        otherInfo: Object  // 其他信息
    },
    deviceInfo: Object,    // 设备信息，详情见下方"设备信息对象"描述
    extendsInfo: Object    // 自定义扩展信息
}

页面性能信息对象

{
    pageId: String,                   // 页面标识
    time: String,                     // 报错时间
    markUser: String,                 // 用户标识
    markUv: String,                   // Unique Visitor
    deviceInfo: Object,               // 设备信息，详情见下方"设备信息对象"描述
    performance: {
        analysisTime: String,         // 解析 dom 树耗时
        blankTime: String,            // 白屏时长
        dnsCacheTime: String,         // DNS 查询缓存耗时
        dnsTime: String,              // DNS 查询耗时
        domReadyTime: String,         // dom 加载完成耗时
        firstInteractTime: String,    // 首次可交互耗时
        pageLoadedTime: String,       // 页面加载完成耗时
        redirectTime: String,         // 重定向耗时
        resTime: String,              // 数据传输耗时
        tcpTime: String,              // tcp 连接耗时
        ttfbTime: String,             // First Byte 时长
        unloadTime: String,           // 卸载页面耗时
    },
    resource:[
        {
            dnsTime: String,          // dns 查询耗时
            initiatorType: String,    // 发起资源类型
            name: String,             // 请求资源路径/资源名
            nextHopProtocol: String,  // http 协议版本
            redirectTime: String,     // 重定向耗时
            reqTotalTime: String,     // 请求响应耗时
            responseTime: String,     // 响应完成耗时
            tcpTime: String,          // tcp 连接耗时
            ttfbTime: String,         // First Byte 时长
        }
   ]
}

网速信息对象

{
  pageId: String,        // 页面标识
  time: String,          // 记录时间
  category: String,      // 日志类型
  logType: String,       // 信息类别
  networkSpeed: String,  // 网速
  deviceInfo: Object,    // 设备信息，详情见下方"设备信息对象"描述
  extendsInfo: Object    // 自定义扩展信息
}

设备信息对象

{
    deviceType: String,        // 设备类型
    browserInfo: {
        name: String,          // 浏览器名称
        version: String,       // 浏览器版本
    },
    engineInfo: {
        name: String,          // 内核名称
        version: String,       // 内核版本
    },
    detailInfo: {              // deviceType 为 PC 时该信息为 null
        vendor: String,       // 设备品牌
        model: String,         // 设备型号
        type: String,          // 设备类型
    },
    OSInfo:{
        name: String,          // 操作系统名称
        version: String,       // 操作系统版本
    },
    fingerprint: String,       // 浏览器指纹
    language: String,          // 当前使用语言
    netWork: String,           // 网络状态
    orientation: String,       // 横竖屏状态
    screenHeight: Number,      // 设备高度
    screenWidth: Number,       // 设备宽度
    userAgent: String          // 设备 UA 信息
}