# easy-debug
**Repository Path**: Funcion_woqu/easy-debug
## Basic Information
- **Project Name**: easy-debug
- **Description**: debug快乐起来
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-06-10
- **Last Updated**: 2021-10-18
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
=======
EasyDebug支持pc和移动端web,UNIAPP，微信小程序，支付宝小程序，头条小程序的错误收集上报，分析小工具。
* [功能特性](#feature)
* [安装](#install)
* [范例](#example)
* [Api](#api)
## 功能特性
* 自动捕获全局错误
* 支持自动以日志类型
* 支持手动创建日志(可以用于埋点)
* 灵活定时上传 || 实时上传
* 支持微信小程序/支付宝小程序/头条小程序/百度小程序
* 支持桌面和移动端浏览器
* 支持客户端app(基于uniapp)
## 安装
### npm or yarn
```cmd
npm install easy-debug --save
yarn add easy-debug -S
```
### cdn
```html
```
## 使用方法
* [浏览器](#brower)
* [UNIAPP(基于uniapp开发的小程序和app都有效)](#uniapp)
* [微信小程序(官方语法)](#wx)
* [支付宝小程序(官方语法)](#ali)
### 浏览器
```html
EasyDebug
```
### UNIAPP
```javascript
/**
* 单个组件中使用,以app.vue为例
*/
//app.vue
const EasyDebug = require('easy-debug')
const bugCtx = EasyDebug.getInstance({
AppID:'jwCbG268w0sYfOdv',
AppSecret:'6UkYvpyOlUb5Z4BD8PvRhl9h1yMbCC42',
Env:'Uni'
})
export default {
globalData: {
},
onLaunch: function () {
console.log('App Launch')
},
onShow: function (options) {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
onError: function (msg) {
console.log(msg)
bugCtx.logRecord({type:'onError',level:'error',data:{msg}})
bugCtx.upLog()
}
}
/**
* 写在main.js中全局可用
*/
//main.js
const EasyDebug = require('easy-debug')
const bugCtx = EasyDebug.getInstance({
AppID:'jwCbG268w0sYfOdv',
AppSecret:'6UkYvpyOlUb5Z4BD8PvRhl9h1yMbCC42',
Env:'Uni'
})
uni.$EasyDebug = EasyDebug
//这样可以在任意页面如下调用
uni.$EasyDebug.logRecord({type:'onError',level:'error',data:{msg}})
uni.$EasyDebug.uplog()
```
### 微信小程序
```javascript
// app.js
const EasyDebug = require('easy-debug')
const bugCtx = EasyDebug.getInstance({
AppID:'jwCbG268w0sYfOdv',
AppSecret:'6UkYvpyOlUb5Z4BD8PvRhl9h1yMbCC42',
Env:'WxMini'
})
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
throw Error('333333333333333')
}
})
},
onError (msg) {
console.log(bugCtx)
console.log(msg)
bugCtx.logRecord({type:'onError',level:'error',data:{msg}})
bugCtx.upLog()
},
globalData: {
userInfo: null,
bugCtx
}
})
```
### 支付宝小程序
```javascript
const EasyDebug = require('./easybug/index.js')
const bugCtx = EasyDebug.getInstance({
AppID:'jwCbG268w0sYfOdv',
AppSecret:'6UkYvpyOlUb5Z4BD8PvRhl9h1yMbCC42',
Env:'AliMini'
})
App({
onLaunch(options) {
// 第一次打开
// options.query == {number:1}
console.info('App onLaunch');
},
onShow(options) {
throw Error('333333333333333')
},
onError (error) {
console.log('app error',JSON.stringify(error));
bugCtx.logRecord({type:'onError',level:'error',data:{msg:error}})
bugCtx.upLog()
},
});
```
## API
* EasyDebug.getInstance()
* bugCtx.setConfig()
* bugCtx.logRecord()
* bugCtx.upLog()
-------------------------------------------------------
### EasyDebug.getInstance(options)
初始化方法，返回一个实例bugCtx.
* `options` 是初始化参数. Defaults:
* `AppID`: 每个应用分配
* `AppSecret`: 为每个应用分配
* `Env`: `Brower`,运行环境，默认浏览器
* `upLogUrl`: `//devops.jingjin.site/api/bug/up`,日志上传的地址，现在放一台服务器供调试使用。如有需要可以设置自己的服务器
* `realTimeSend`: 是否记录日志后立即上传（即不需要缓存池),适合用于需要详细记录每次消息的场景，因为如果一分钟请求一次的话，容易丢失部分消息（比如用户突然关闭并且不再打开的情况)
* `sendTime`: `600000`,日志自动上传的时间，默认为1分钟一次
-------------------------------------------------------
### bugCtx#setConfig(key,value)
手动修改实例的配置
* `type` 配置名称,允许修改的值参见[EasyDebug.getInstance](#getInstance)
* `data` 配置的值
```javascript
const EasyDebug = require('easy-debug')
const bugCtx = EasyDebug.getInstance({AppID:'xx',AppSecret:'xx', Env:'Uni'})
bugCtx.setConfig('upLogUrl','http://diy.log.com/api/bug/up') //修改日志上报的服务端地址
bugCtx.setConfig('realTimeSend',true) //修改配置为实时上传日志
bugCtx.setConfig('sendTime',3000) //修改自动上传日志的时间间隔
```
-------------------------------------------------------
### bugCtx#logRecord({type='default'',data={},level='info'})
添加一行消息，并将消息记录到缓存池。一般为localStorage,避免网络频繁请求影响业务所需的网络资源
* `type` `default`消息类别，随便自己取，但是为了后台好归类，一般建议如下方式使用
* `request` 请求相关
* `click` 点击相关
* `event` 全局的事件相关
* `vue` vue框架的问题,如何捕获vue框架内的问题参见[vue.config.errorHandler](https://cn.vuejs.org/v2/api/#errorHandler)
* `asset` 资源加载相关的问题
* `live` 直播相关问题（也鼓励按照业务模块来划分)
* `order` 订单相关问题
* `data` 消息体，可以是任意类型
* `level` `info`，消息等级。可以参照'info','error','warn'等来区分不同错误等级。
-------------------------------------------------------
### bugCtx#upLog()
将缓存池的消息上传到服务器上，并且清除本地的缓存信息.
-------------------------------------------------------
## 后续升级计划
* 调整语法，让整体更优雅
* 优化文档，让上手更快
* 优化服务端错误信息展示，让用户可以获得更好的体验