0.2.7 • Published 4 years ago
wall_sdk v0.2.7
wall_sdk
简介
wall_sdk 是一款前端监听系统(SDK),负责收集前端信息,包括 ajax, fetch ,error,用户行为等。监控服务还包括 wall 监控系统的服务端wall-server
项目整体的部署流程请参考-部署
主要性能
- 采用 express 中间件, 可以快速处理 wallEvent
- 监听用户行为:用户点击,路由改变,用户请求, 资源加载,具体类型为eventType
- 监控: onerror 全局监听, addEventListener 全局监听,try...catch 主动捕获,重写 XMLHttpRequest 对象方法 普通错误,primose 异常, console.error, 图片加载错误, xhr 错误,fetch 错误
- 适用
vue
react
- 可以上传自定义错误
- 可以自定义用户行为
- uuid 统计 uv
- ucid(useid) 统计用户
- 对 ERROR 设置上报频率
- performance 页面性能数据
- TS 搭建
- img 图片上传日志
npm 引用
引入 sdk 放到所有 js 资源之前
npm install wall_sdk --save
import Wall from 'wall_sdk'
Wall.init({
project_id: xxxxxxxxxx, // 项目标识
isTest: false,
frequency: 1,
});
具体 init 初始化参考 options
vue 中使用(自定义错误)
Vue 2.x 中我们应该这样捕获全局异常:
Vue.config.errorHandler = function(err, vm, info) {
let {
message, // 异常信息
name, // 异常名称
script, // 异常脚本url
line, // 异常行号
column, // 异常列号
stack // 异常堆栈信息
} = err;
WALL.createCustomErrorEvent({
message: 'vue异常',
content: {
message,
name,
script,
line,
column,
stack
}
});
// vm为抛出异常的 Vue 实例
// info为 Vue 特定的错误信息,比如错误所在的生命周期钩子
};
react
React 16.x 版本中引入了 Error Boundary:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
this.setState({ hasError: true });
// 将异常信息上报给服务器
WALL.createCustomErrorEvent({
message: 'react异常',
content: info
});
}
render() {
if (this.state.hasError) {
return '出错了';
}
return this.props.children;
}
}
开发
进入目录安装依赖:
npm i 或者 yarn install
开发& 测试:
npm run start
打开 http://localhost:8001
index.html 中包含各种类型错误,可以调试
打包
npm run build
wallEvent
wallEvent 含义: 错误的发生,用户的行为, 资源的加载,统称为 事件
,即为 event,event 中包含事件的详细信息。
可以参考 wallEvent-demo
interface EventInterface {
type: keyof EventType // wallEvent.type
info: InfoInterface; // 上报的具体信息内容
key?: string; // 每个event 都有自己的 唯一key
version?: number; // sdk 版本
createTime?: number; // event创建时间
options?: OptionsInterface; // wall 初始化信息
userId?: string; // 用户id
uuid?: string; // 设备id
}
wallEvent.type
wallEvent 的类型-type 如下, 每个类型都会触发信息上报
type EventType = {
ERROR_XHR: 'ERROR_XHR', // xhrerror
ERROR_LINK: 'ERROR_LINK', //静态资源 link加载错误
ERROR_IMAGE: 'ERROR_IMAGE', //静态资源 img
ERROR_SCRIPT: 'ERROR_SCRIPT', // 静态资源 script加载错误
ERROR_CUSTOM: 'ERROR_CUSTOM', // 用户自定义错误
ERROR_RUNTIME: 'ERROR_RUNTIME', // 普通错误
ERROR_PROMISE: 'ERROR_PROMISE', // peomise error
ERROR_CONSOLE: 'ERROR_CONSOLE', // console.error
BEHAVIOR_XHR: 'BEHAVIOR_XHR', // 用户请求
BEHAVIOR_XPATH: 'BEHAVIOR_XPATH', // 用户点击路径
BEHAVIOR_FETCH: 'BEHAVIOR_FETCH', // 用户请求
BEHAVIOR_CUSTOM: 'BEHAVIOR_CUSTOM', // 用户自定行为
BEHAVIOR_URLCHANGE: 'BEHAVIOR_URLCHANGE', // 路由改变
DURATION: 'DURATION', // 用户停留时间
RESCOURCES: 'RESCOURCES'
};
options
interface OptionsInterface {
project_id: string; // 项目id
origin: string; // server 地址
frequency: number;
isTest?: boolean;
userId?: string;
}
name | describe | explain |
---|---|---|
project_id | 项目 id | 必填 |
origin | 后台上报服务地址 | 必填-端口默认为 9090 |
frequency | 上报频率 | 非必填 -范围为 0-1, 默认为 1 |
isTest | 是否是测试环境 | 非必填 - 默认为 false-测试模式下打点数据仅供控制台打印浏览, 不会上传到系统中 |
userId | 业务用户 id | 非必填 - 默认为 系统自动生成 |
方法
fn | describe | explain |
---|---|---|
createCustomErrorEvent(message: string, content: Object) | 自定义错误 | message: 错误信息标题,content: {}错误信息内容 |
createCustomBehaviorEvent(behaviorType: string,behaviorResult: object,message: string) | 自定义行为 | message: 错误信息标题,behaviorType:自定义行为类型,behaviorResult: 具体内容 |
eventDomo
{
type: 'BEHAVIOR_XHR',
info: {
message: '异步请求',
url: 'http://localhost:8001/sockjs-node/info?t=1580906284133',
method: 'GET',
status: 200,
responseSize: null,
statusText: 'OK',
success: true,
duration: 17
},
options: {
token: '9999',
origin: 'http://localhost:9090',
isTest: false,
frequency: 1,
userId: 'wall_KLSkzxldp0fxpyHXOKSuCrMJQoWMoKg2'
},
key: 'NtsGbhvxzDSm1ti2uffSue7u2UIFPVXo',
version: '0.2.2',
createTime: 1580906284151,
currentUrl: 'http%3A%2F%2Flocalhost%3A8001%2F%3Fa%3D1',
project_id: 1,
time: 1581031275,
};
TODO
- indexDB 存储,可以追寻用户行为路径,可以追踪到错误发生之前的用户行为
- 崩溃和卡顿
- sourceMap
- webpack 插件
- 用户访问应用次数记录统计(记录第一次加载, 记录刷新) session pv
- 每个页面首次加载时间统计(记录第一次加载) 路由切换机制-单页面和 pc
- 微信小程序