Skip to content

ZephyrAndMoon/zephyr-monitor

Repository files navigation

欢迎使用 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 信息
}

About

一款使用方便的轻量级前端监控工具 😋

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published