小程序bug监控工具



应用场景

1、监听线上未知错误

// 例如:调用错误
var result = {}
console.log(result.data.msg) // 抛出错误

2、记录错误执行堆栈,更方便重现错误


小程序使用

1、引入资源

在app.js中加入,记得放在App对象上面

var xbossdebug = require('xbossdebug.js') // 引用xbossdebug
xbossdebug.apikey = 'maizuo' // apikey为自定义唯一值,用于后端记录时区分应用
xbossdebug.url = 'https://domain.com/'; // 上报服务端地址

2、测试是否正常使用

App({
  onLaunch: function () {
    xbossdebug.notifyError('error')
  }
})

3、控制台查看network,如果看到一个指向你配置url的请求,那就成功了。

// 发送的结构如下
{
    apikey: String // 应用唯一id
    breadcrumbs: Array // 函数执行面包线,方便用于错误重现
    error: String // 错误堆栈信息
    releseStage: String // 当前执行环境
    systemInfo: Object // 用户系统信息
    notifierVersion: String // 插件版本
    appVersion: String // 小程序版本
    locationInfo: Object // 用户位置信息
    userInfo: Object // 用户信息
    timing: Object // 页面加载耗时
}

4、可选参数

xbossdebug.setSystemInfo = true; // 获取系统信息
xbossdebug.setUserInfo = true; // 获取用户信息
xbossdebug.setLocation = true; // 获取用户位置信息
xbossdebug.monitorMethodCall = true; // 监听用户自定义方法(默认只监听生命周期函数)
xbossdebug.methodWhitelist = ["foo", "bar"]; // 监听白名单 白名单和黑名单同时配置时,只应用白名单
xbossdebug.methodBlacklist = ["foo", "bar"]; // 监听黑名单

方案设计思想

TODO

  1. 服务端记录数据
  2. 数据并可视化
  3. 资源加载监控
  4. 页面性能监控
  5. typescript版本
  6. 自动化测试

作者:zhengguorong
链接:小程序bug监控工具-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
应用场景1、监听线上未知错误// 例如:调用错误 var result = {} console.log(result.data.msg) // 抛出错误2、记录用户操作路径,更方便重现错误小程序使用1、引入资源在app.js中加入dist目录下的xbossdebug.min.js,记得放在App对象上面var xbossdebug = require('xbossdebug.min.js') // 引用xbossdebug xbossdebug.config.key = 'maizuo' // key为自定义唯一值,用于后端记录时区分应用 xbossdebug.config.url = 'https://domain.com/'; // 上报服务端地址 // 可选参数 xbossdebug.config.setSystemInfo = true; // 获取系统信息 xbossdebug.config.setLocation = true; // 获取用户位置信息2、测试是否正常使用App({   onLaunch: function () {     xbossdebug.error('error')   } })3、控制台查看network,如果看到一个指向你配置url的请求,那就成功了。// 发送的结构如下 {     key: String // 应用唯一id     breadcrumbs: Array // 函数执行面包线,方便用于错误重现     error: String // 错误堆栈信息     systemInfo: Object // 用户系统信息     notifierVersion: String // 插件版本     locationInfo: Object // 用户位置信息 }高级配置如果你的应用日志量较大,可以通过以下参数合并日志和随机抽样。xbossdebug.config.random = 1 // 默认为1,表示100%上报,如果设置0.5,就会随机上报 xbossdebug.config.repeat = 5 // 重复上报次数(对于同一个错误超过多少次不上报) xbossdebug.config.mergeReport = true, // mergeReport 是否合并上报, false 关闭, true 启动(默认) xbossdebug.config.except = [ /^Script error\.?/, /^Javascript error: Script error\.? on line 0/ ], // 忽略某个错误二次开发1**、安装依赖**// 进入项目目录安装依赖 npm install // 安装rollup,用于js编译打包 npm install -g rollup2、开发模式 (监听代码变化,生成xbossdebug.js)npm run watch3、编译(生成xbossdebug.min.js)npm run build方案设计思想TODO服务端记录数据数据并可视化资源加载监控页面性能监控typescript版本✅自动化单元测试参考资料代码思想参考fundebug,如果大家觉得还不错,希望大家支持fundebug的saas服务。代码风格参考https://github.com/gomeplusFED/GER
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值