0.2.1 • Published 3 years ago

@enncloud/frontend-monitor-sdk v0.2.1

Weekly downloads
25
License
MIT
Repository
gitlab
Last release
3 years ago

1、简介

frontend-monitor-sdk 是一款前端监控工具,主要包含下面几个方面信息监控:

  • 1)前端异常监控;
  • 2)页面性能监控;
  • 3)设备信息采集;

2、异常捕获详情

  • 1)js错误信息监控;
  • 2)支持vue错误信息监控(需要将vue传入,并设置vueError:true);
  • 3)支持promise中未捕获异常信息的抓取;
  • 4)支持ajax库(xhr)异常信息捕获;
  • 5)支持console.error错误信息捕获;
  • 6)支持资源错误信息捕获。

3、页面性能监控

  • 1)重定向的时间;
  • 2)DNS 查询时间;
  • 3)DNS 缓存时间;
  • 4)卸载页面的时间;
  • 5)tcp连接耗时;
  • 6)内容加载完成的时间;
  • 7)解析dom树耗时;
  • 8)白屏时间;
  • 9)页面加载完成的时间;
  • ...

4、设备信息采集

  • 1)设备类型;
  • 2)操作系统;
  • 3)操作系统版本;
  • 4)屏幕高、屏幕宽;
  • 5)当前使用的语言-国家;
  • 6)联网类型;
  • 7)横竖屏;
  • 8)浏览器信息;
  • 9)浏览器指纹;
  • 10)userAgent;
  • ...

5、引入方式

1、支持es6方式引入
import { MonitorJS } from "@enncloud/frontend-monitor-sdk";

2、支持commonjs方式引入
const MonitorJS = require("@enncloud/frontend-monitor-sdk");

### 6、异常监控Usage

1)异常监控初始化代码: new MonitorJS().init({ env: MonitorJS.DEV,//运行环境,MonitorJS.DEV测试环境、MonitorJS.PRE预发环境,MonitorJS.PROD生产环境 consoleError:true, //配置是否需要记录console.error错误信息 vueError:true, //配置是否需要记录vue错误信息 vue:Vue, //如需监控vue错误信息,则需要传入vue extendsInfo:{ //自定义扩展信息,一般用于数据持久化区分 a:"", //自定义信息a(名称可自定义)可参考测试栗子 module b:"", //自定义信息b(名称可自定义) getDynamic:()=>{ //获取动态传参 1.4.5版本及以后支持该方式

    }
}

});

2)参数说明: { env: 运行环境,MonitorJS.DEV测试环境、MonitorJS.PRE预发环境,MonitorJS.PROD生产环境 jsError :配置是否需要监控js错误 (默认true) promiseError :配置是否需要监控promise错误 (默认true) resourceError :配置是否需要监控资源错误 (默认true) ajaxError :配置是否需要监控ajax错误 (默认true) consoleError :配置是否需要监控console.error错误 (默认false) vueError :配置是否需要记录vue错误信息 (默认false) vue : 如需监控vue错误信息,则需要传入vue extendsInfo : { //自定义扩展信息,一般用于数据持久化区分 a:"", //自定义信息a(名称可自定义)可参考测试栗子 module b:"", //自定义信息b(名称可自定义) getDynamic:()=>{ //获取动态传参 1.4.5版本及以后支持该方式

    }
}

}

3)响应(持久化数据)说明: { errorCategory:"", //错误类型(枚举):js_error 、resource_error、vue_error、promise_error、ajax_error、console_info、console_warn、console_error、unknow_error logType: "Info", //日志类型(枚举) Error、Warning、Info service: "fn-cloud-builder",//项目唯一标示 router: "file:///Users/xinaoshuneng/Desktop/workspace/front/frontend-monitor-sdk/test/index.html" curTime: "2021-01-20 14:25:57"//发生时间 message: "加载 IMG 资源错误"//错误内容 errorName: "error"//错误类型名称 url: ""//错误请求的地址 pagePath: "" line: 0 col: 0 stack: ""//错误栈 errorCode: "" extInfo: "{}"//自定义扩展信息 deviceInfo:"", //设备信息(JSON字符串) browserInfo://浏览器信息 userInfo://扩展用户信息 }

### 7、上报页面性能Usage

1)页面性能信息采集代码: new MonitorJS().monitorPerformance({ pageId:"page_0001", //页面唯一标示 env: MonitorJS.DEV,//运行环境,MonitorJS.DEV测试环境、MonitorJS.PRE预发环境,MonitorJS.PROD生产环境 extendsInfo:{ //扩展信息,一般用于数据数据持久化区分 module:"项目", filterOne: "page_0001", getDynamic:()=>{ return { filterTow:()=>{}, }; } } });

2)参数说明: { pageId :页面唯一标示 env: 运行环境,MonitorJS.DEV测试环境、MonitorJS.PRE预发环境,MonitorJS.PROD生产环境 }

3)响应(持久化数据)说明: { blankTime: "12.00" domReadyTime: "84.00" loadPageTime: "147.00" logType: "Info", //日志类型(枚举) Error、Warning、Info service: "fn-cloud-builder",//项目唯一标示 router: "file:///Users/xinaoshuneng/Desktop/workspace/front/frontend-monitor-sdk/test/index.html" curTime: "2021-01-20 14:25:57"//发生时间 extInfo: "{}"//自定义扩展信息 deviceInfo:"", //设备信息(JSON字符串) browserInfo://浏览器信息 userInfo://扩展用户信息 }

### 8、使用时机
1) 普通项目,页面初始化时候,就可以完成初始化监控工具(最好在业务代码的前面,避免监控有漏);
2) vue项目,需要在new Vue之前初始化监控工具,避免监控有漏;
0.2.1

3 years ago

0.2.0

3 years ago

0.1.8

3 years ago

0.1.9

3 years ago

0.1.7

3 years ago

0.1.6

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.5

3 years ago

0.1.0

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago