sdc-monitor-wx-mini

🛠️ 安装

# 使用Npm
npm i sdc-monitor-wx-mini
# 使用Yarn
yarn add sdc-monitor-wx-mini

🥳 使用

// main.js
import { init } from 'sdc-monitor-wx-mini'

// 多实例
const MitoInstance = init({
  // 开发环境可以开启debug，生成环境改为false
  debug:true,
  dsn: 'https://test.com/yourInterface',
  maxBreadcrumbs: 100,
    // 配置上报时的请求头
  configReportWxRequest(data) {
    return {
      header: {
        'Content-Type': 'text/plain; charset=UTF-8'
      },
      dataType: 'text'
    }
  },
})

更多信息关于sdc-monitor-wx-mini的使用点击这里

📁 使用本地文件

如果你是原生微信小程序的开发者，建议将这个url:https://cdn.jsdelivr.net/npm/sdc-monitor-wx-mini/dist/wx-mini.js，下载下来作为一个js文件。然后导入到app.js，就像下面这样：

uni-app（Vue框架）

支持所有vue框架，例如uni-app等等

🛠️ 安装

npm i sdc-monitor-wx-mini sdc-monitor-vue

使用

import { init } from 'sdc-monitor-wx-mini'
import { vuePlugin } from 'sdc-monitor-vue'
import Vue from 'vue'
const MitoInstance = init({
  dsn: 'https://test.com/yourInterface',
  maxBreadcrumbs: 100,
  // 配置上报时的请求头
  configReportWxRequest(data) {
    return {
      header: {
        'Content-Type': 'text/plain; charset=UTF-8'
      },
      dataType: 'text'
    }
  },
  vue:Vue
},[vuePlugin])

更多关于sdc-monitor-vue的用法点击这里

remax（react框架）

🛠️ 安装

npm i sdc-monitor-wx-mini sdc-monitor-react

更多关于sdc-monitor-react的用法click here

options

基础配置项

WxSilentOptionsType

| Name | Type | Default | Description | | :----------------------------: | --------- | ---------- | ------------------------------------------------------------ | | silentRequest | boolean | false | 默认会监控微信小程序的wx.request（接口&下载），为true时，将不再监控 | | silentConsole | boolean | false | 默认会监控微信小程序的wx.console，为true时，将不再监控，由于是重写了wx.console，所以原生的console会被覆盖，建议在测试环境设置成true，在生产环境设置成false | | silentDom | boolean | false | 默认会监控微信小程序的tab、touch事件，当用户touch的标签有id或者class，就会被b捕捉到放入breadcrumb，为true，将不在监听 | | silentRoute | boolean | false | 默认会监控微信小程序App的路由跳转，为true时，将不在监控 | | silentAppOnError | boolean | false | 默认会监控微信小程序的error，为true时，将不在监控 | | silentAppOnUnhandledRejection | boolean | false | 默认会监控微信小程序的unhandledrejection，为true时，将不在监控 | | silentAppOnPageNotFound | boolean | false | 默认会监控微信小程序的微信小程序App的onPageNotFound，为true时，将不在监控 |

WxHookOptionsType

/**
 * 配置wx小程序上报时的wx.request配置
 *
 * @param {(TransportDataType | any)} event 即将上报的数据
 * @return {*}  {Partial<WechatMiniprogram.RequestOption>}
 * @memberof WxHookOptionsType
 */

configReportWxRequest(event: TransportDataType | any): Partial<WechatMiniprogram.RequestOption>

**示例：**配置上报时的请求头的content-type

MITO.init({
  ...
  configReportWxRequest(breadcrumb, hint){
  	return {
      header: {
        'Content-Type': 'text/plain; charset=UTF-8'
      },
      dataType: 'text'
    }
  }
})

/**
 * 钩子函数：wx小程序的App下的onLaunch执行完后再执行以下hook
 *
 * @param {WechatMiniprogram.App.LaunchShowOption} options
 * @memberof WxHookOptionsType
 */

appOnLaunch(options: WechatMiniprogram.App.LaunchShowOption): void

**示例：**在App的onLaunch中打印并输出入参`

MITO.init({
  ...
  appOnLaunch(options){
  	console.log('mito appOnLaunch', options)
  }
})

/**
 * 钩子函数：wx小程序的App下的OnShow执行完后再执行以下hook
 *
 * @param {WechatMiniprogram.App.LaunchShowOption} options
 * @memberof WxHookOptionsType
 */

appOnShow(options: WechatMiniprogram.App.LaunchShowOption): void

**示例：**在App的onShow中打印并输出入参`

MITO.init({
  ...
  appOnShow(options){
  	console.log('mito appOnShow', options)
  }
})

/**
 * 钩子函数：wx小程序的App下的OnHide执行完后再执行以下hook
 *
 * @memberof WxHookOptionsType
 */

appOnHide(): void

**示例：**在App的appOnHide中打印`

MITO.init({
  ...
  appOnHide(){
  	console.log('mito appOnHide', options)
  }
})

/**
 * 钩子函数：先执行下的onPageNotFound执行完后再执行以下hook
 *
 * @param {WechatMiniprogram.OnPageNotFoundCallbackResult} data
 * @memberof WxHookOptionsType
 */

appOnPageNotFound(data: WechatMiniprogram.OnPageNotFoundCallbackResult): void

**示例：**在Page的appOnPageNotFound中打印并输出入参`

MITO.init({
  ...
  appOnPageNotFound(data){
  	console.log('mito appOnPageNotFound', data)
  }
})

/**
 * 钩子函数：先执行hook:pageOnLoad再执行wx小程序的Page下的pageOnLoad
 *
 * @param {IWxPageInstance} page
 * @memberof WxHookOptionsType
 */

pageOnLoad(page: IWxPageInstance): void

**示例：**在Page的pageOnLoad中打印并输出入参`

MITO.init({
  ...
  pageOnLoad(page){
  	console.log('mito pageOnLoad', page)
  }
})

/**
 * 钩子函数：先执行hook:pageOnShow再执行wx小程序的Page下的onShow
 *
 * @param {IWxPageInstance} page
 * @memberof WxHookOptionsType
 */

pageOnShow(page: IWxPageInstance): void

**示例：**在Page的pageOnShow中打印并输出入参`

MITO.init({
  ...
  pageOnShow(page){
  	console.log('mito pageOnShow', page)
  }
})

/**
 * 钩子函数：先执行hook:pageOnReady再执行wx小程序的Page下的pageOnReady
 *
 * @param {IWxPageInstance} page
 * @memberof WxHookOptionsType
 */

pageOnReady(page: IWxPageInstance): void

**示例：**在Page的pageOnReady中打印并输出入参`

MITO.init({
  ...
  pageOnReady(page){
  	console.log('mito pageOnReady', page)
  }
})

/**
 *  钩子函数：先wx小程序的App下的pageOnUnload执行完后再执行以下hook
 *
 * @param {IWxPageInstance} page
 * @memberof WxHookOptionsType
 */

pageOnUnload(page: IWxPageInstance): void

**示例：**在Page的pageOnUnload中打印并输出入参`

MITO.init({
  ...
  pageOnUnload(page){
  	console.log('mito pageOnUnload', page)
  }
})

/**
 * 钩子函数：先执行hook:pageOnHide再执行wx小程序的Page下的onHide
 *
 * @param {IWxPageInstance} page
 * @memberof WxHookOptionsType
 */

pageOnHide(page: IWxPageInstance): void

**示例：**在Page的pageOnHide中打印并输出入参`

MITO.init({
  ...
  pageOnHide(page){
  	console.log('mito pageOnHide', page)
  }
})

/**
 * 先执行hook:onShareAppMessage再执行wx小程序的Page下的onShareAppMessage
 *
 * @param {(WechatMiniprogram.Page.IShareAppMessageOption & IWxPageInstance)} options
 * @memberof WxHookOptionsType
 */

pageOnShareAppMessage(options: WechatMiniprogram.Page.IShareAppMessageOption & IWxPageInstance): void

**示例：**在Page的pageOnShareAppMessage中打印并输出入参`

MITO.init({
  ...
  pageOnShareAppMessage(options){
  	console.log('mito pageOnShareAppMessage', options)
  }
})

/**
 * 先执行hook:onShareTimeline再执行wx小程序的Page下的onShareTimeline
 *
 * @param {IWxPageInstance} page
 * @memberof WxHookOptionsType
 */

pageOnShareTimeline(page: IWxPageInstance): void

**示例：**在Page的pageOnShareTimeline中打印并输出入参`

MITO.init({
  ...
  pageOnShareTimeline(page){
  	console.log('mito pageOnShareTimeline', page)
  }
})

/**
 * 先执行hook:onTabItemTap再执行wx小程序的Page下的onTabItemTap
 *
 * @param {(WechatMiniprogram.Page.ITabItemTapOption & IWxPageInstance)} options
 * @memberof WxHookOptionsType
 */

pageOnTabItemTap(options: WechatMiniprogram.Page.ITabItemTapOption & IWxPageInstance): void

**示例：**在Page的pageOnTabItemTap中打印并输出入参`

MITO.init({
  ...
  pageOnTabItemTap(options){
  	console.log('mito pageOnTabItemTap', options)
  }
})

/**
 * 钩子函数：重写wx.NavigateToMiniProgram将里面的参数抛出来，便于在跳转时更改query和extraData
 *
 * @param {WechatMiniprogram.NavigateToMiniProgramOption} options
 * @return {*}  {WechatMiniprogram.NavigateToMiniProgramOption}
 * @memberof WxHookOptionsType
 */

wxNavigateToMiniProgram(options: WechatMiniprogram.NavigateToMiniProgramOption): WechatMiniprogram.NavigateToMiniProgramOption

**示例：**在用wxNavigateToMiniProgram触发跳转小程序时，可以对传入的参数进行覆盖，如下面对query参数进行追加参数

MITO.init({
  ...
  wxNavigateToMiniProgram(options){
    options.path = `${options.path}?time=${Date.now()}`
    return options
  }
})

/**
 * 钩子函数：代理Action中所有函数，拿到第一个参数并抛出
 *
 * 可用来判断e.type是否等于tap
 *
 * @param {WechatMiniprogram.BaseEvent} e 拿到事件e
 * @memberof WxHookOptionsType
 */

triggerWxEvent(e: WechatMiniprogram.BaseEvent): void

**示例：**截取tap的回调函数，并输出currentTarget对象

MITO.init({
  ...
  triggerWxEvent(e){
    // 当然也可以对touchmove等等事件做判断
    if (e.type === 'tap'){
      // 当前函数就是tap的回调函数，可拿到currentTarget的dataset，里面包含class、id等等属性
      console.log(e.currentTarget)
    }
  }
})