easy-debug

v1.2.6

Published

3 years ago

debug so easy

Downloads

0High
0Medium
0Low

function

debug PageLifecycle devops

EasyDebug支持pc和移动端web,UNIAPP，微信小程序，支付宝小程序，头条小程序的错误收集上报，分析小工具。

功能特性

自动捕获全局错误
支持自动以日志类型
支持手动创建日志(可以用于埋点)
灵活定时上传 || 实时上传
支持微信小程序/支付宝小程序/头条小程序/百度小程序
支持桌面和移动端浏览器
支持客户端app(基于uniapp)

安装

npm or yarn

npm install easy-debug --save 
yarn add easy-debug -S

cdn

<script src="https://cdn.jsdelivr.net/npm/easy-debug/dist/EasyDebug.min.js"></script>

使用方法

浏览器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EasyDebug</title>
</head>
<body>

<script src="dist/EasyDebug.js"></script>
<script>
const bugCtx = EasyDebug.getInstance({
    AppID:'jwCbG268w0sYfOdv',
    AppSecret:'6UkYvpyOlUb5Z4BD8PvRhl9h1yMbCC42',
    Env:'Brower'
})
// 接管全局的事件
bugCtx.start()

console.log(bugCtx)
setTimeout(()=>{
  throw Error('xxxxxxx')
},4000)
</script>
</body>
</html>

UNIAPP

/**
 * 单个组件中使用,以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()

微信小程序

// 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
  }
})

支付宝小程序

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
data 配置的值

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
- asset 资源加载相关的问题
- live 直播相关问题（也鼓励按照业务模块来划分)
- order 订单相关问题
data 消息体，可以是任意类型
level info，消息等级。可以参照'info','error','warn'等来区分不同错误等级。

bugCtx#upLog()

将缓存池的消息上传到服务器上，并且清除本地的缓存信息.

后续升级计划

调整语法，让整体更优雅
优化文档，让上手更快
优化服务端错误信息展示，让用户可以获得更好的体验