easy-debug
TypeScript icon, indicating that this package has built-in type declarations

1.2.6 • Public • Published

EasyDebug

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(options)

初始化方法,返回一个实例bugCtx.

  • options 是初始化参数. Defaults:
    • AppID: 每个应用分配
    • AppSecret: 为每个应用分配
    • Env: Brower,运行环境,默认浏览器
    • upLogUrl: //devops.jingjin.site/api/bug/up,日志上传的地址,现在放一台服务器供调试使用。如有需要可以设置自己的服务器
    • realTimeSend: 是否记录日志后立即上传(即不需要缓存池),适合用于需要详细记录每次消息的场景,因为如果一分钟请求一次的话,容易丢失部分消息(比如用户突然关闭并且不再打开的情况)
    • sendTime: 600000,日志自动上传的时间,默认为1分钟一次

bugCtx#setConfig(key,value)

手动修改实例的配置

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()

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


后续升级计划

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

Package Sidebar

Install

npm i easy-debug

Weekly Downloads

4

Version

1.2.6

License

ISC

Unpacked Size

92.1 kB

Total Files

27

Last publish

Collaborators

  • function