0.1.2 • Published 4 years ago
wall-sdk v0.1.2
wall-sdk
wall-sdk 是 wall 监听系统的前端 SDK,负责收集前端信息
主要性能
- 采用 express 中间件, 可以快速处理 event
- 监听用户行为:用户点击,路由改变,用户请求, 资源加载
- indexDB 存储,可以追寻用户行为路径,可以追踪到错误发生之前的用户行为
- 适用
vue
react
微信小程序 - 监控: onerror 全局监听, addEventListener 全局监听,try...catch 主动捕获,重写 XMLHttpRequest 对象方法 普通错误,primose 异常, console.error, 图片加载错误, xhr 错误,fetch 错误
- 可以上传自定义错误
- 可以自定义用户行为
- 对 ERROR 设置上报频率
- performance 页面性能数据
- TS 搭建
- img 图片上传日志
npm 引用
npm install wall-sdk --save
import Wall from 'wall-sdk'
Wall.init({
token: xxxxxxxxxx, // 项目标识
isTest: false,// 是否是测试数据,默认为false(测试模式下打点数据仅供控制台打印浏览, 不会上传到系统中)
frequency: 1, // 上报频率(只针对错误和用户行为,页面性能相关,每天上报一次)
});
vue 使用
react 使用
快速开始
进入目录安装依赖:
npm i 或者 yarn install
开发:
npm run start
打开 http://localhost:8001
打包
npm run build:deploy
测试:
event 说明
event
TODO:
- 崩溃和卡顿
- sourceMap
- webpack 插件
- 测试
- 用户访问应用次数记录统计(记录第一次加载, 记录刷新) session pv
- 每个页面首次加载时间统计(记录第一次加载) uv
Vue 2.x 中我们应该这样捕获全局异常:
Vue.config.errorHandler = function (err, vm, info) {
let {
message, // 异常信息
name, // 异常名称
script, // 异常脚本url
line, // 异常行号
column, // 异常列号
stack // 异常堆栈信息
} = err;
// vm为抛出异常的 Vue 实例
// info为 Vue 特定的错误信息,比如错误所在的生命周期钩子
}
2.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 });
// 将异常信息上报给服务器
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
return '出错了';
}
return this.props.children;
}
}
可以看到生命周期钩子里的错误是可以被 errorHandler 捕获到,但是当我们主动点击 div 触发 clickerror 时,会发现这时错误并没有被 errorHandler 捕获到,控制台输出的是 Uncaught Error,也就是没有被捕获到的错误,所以需要注意的是,errorHandler 方法目前还捕获不到绑定监听事件触发的异常,但是可以捕获到在生命周期钩子中调用的方法的错误。
解决方案 :使用 window.onerror
window.onerror = function (message, source, lineno, colno, error) { console.error('通过 onerror 捕获到的错误'); console.error(message); console.error(source); console.error(lineno); console.error(colno); console.error(error); } 在 MVVM 框架中使用 onerror 监听全局异常会发现并不能捕获到绑定事件的详细错误信息,只会输出 Script Error,