mitojs

mitojs#

资源概述#

mitojs 是一套轻量级的前端与小程序监控 SDK，提供从前端错误捕获到数据上报的完整方案。它支持 Web 浏览器和微信小程序两大场景，通过 @mitojs/wx-mini 包为小程序提供 wx.request、路由切换、console、代码错误、点击/触摸事件等全链路监控能力。

核心特点：

全链路监控：自动 hook wx.request/wx.downloadFile/wx.uploadFile，监控 HTTP 请求耗时与异常；自动捕获 wx.onError/wx.onUnhandledRejection，记录 JS 运行时错误
路由追踪：监听小程序页面切换（onShow/onHide/onLoad），自动记录用户行为路径
面包屑（Breadcrumbs）：自动记录用户操作历史（点击、请求、路由跳转、console），便于错误回溯
丰富的 Hook 与 Options：beforeSend 数据过滤、transport 自定义上报通道、silent 静默特定事件类型
多框架支持：@mitojs/browser（Web）、@mitojs/vue（Vue 2/3）、@mitojs/react（React）、@mitojs/wx-mini（微信原生/uni-app/remax）
TypeScript 原生：完整类型定义，IDE 自动补全

项目数据（2026-08-10）：

GitHub：499⭐ / 77 forks / MIT License
npm（@mitojs/core）：最新版 3.0.1 / 42 versions
npm（@mitojs/wx-mini）：最新版 3.1.0 / 45 versions
活跃度：最后推送 2025-08-27
语言：TypeScript

设计规范#

架构设计#

mitojs 采用分层架构，核心层（@mitojs/core）提供通用监控能力，各平台 SDK 在核心层基础上做适配：

包名	场景	功能
`@mitojs/core`	核心	基础事件、面包屑、上报通道、配置管理
`@mitojs/browser`	Web 浏览器	XHR/Fetch hook、路由、资源错误、click 事件
`@mitojs/wx-mini`	微信小程序	wx.request hook、wx 路由、wx console、wx tab/touch
`@mitojs/vue`	Vue 2/3	Vue errorHandler 集成
`@mitojs/react`	React	React Error Boundary 集成

监控能力矩阵#

监控项	Web	小程序
HTTP 请求（XHR/Fetch/wx.request）	✅	✅
JS 代码错误	✅	✅
资源加载错误	✅	❌（小程序无 DOM）
路由变化	✅	✅
console 日志	✅	✅
用户点击/触摸	✅	✅
Promise 未捕获	✅	✅
上传/下载	❌	✅

审核规范#

mitojs 是开发工具库，不涉及平台审核。使用时需注意：

上报数据可能包含用户信息，需在后端接收服务中做数据脱敏
小程序版 SDK 不会触发额外的权限请求
debug: true 模式下会在 console 输出详细日志，生产环境必须设为 false

开发指南#

快速上手（小程序）#

1. 安装

code

npm install @mitojs/wx-mini

2. 初始化

在 app.ts 中引入并初始化：

code

import { init } from '@mitojs/wx-mini'

const MitoInstance = init({
  // 上报地址（需自建后端接收服务）
  dsn: 'https://your-api.com/report',
  // 开发环境开启 debug，生产环境关闭
  debug: __DEV__,
  // 面包屑最大数量（默认 20）
  maxBreadcrumbs: 30,
  // 静默特定事件（可选）
  silent: ['click'],
  // 自定义上报前的数据处理
  beforeSend(data) {
    // 过滤敏感字段
    if (data.request && data.request.url.includes('/auth')) {
      return null // 返回 null 取消本次上报
    }
    return data
  }
})

3. 手动埋点

code

// 记录自定义日志
MitoInstance.log({
  message: '用户完成支付',
  level: 'Info',
  customData: { orderId: '123456', amount: 99.9 }
})

// 手动记录页面浏览（框架未自动 hook 时）
MitoInstance.trackPager('pages/order/detail')

// 设置用户信息
MitoInstance.setUser({
  id: 'user_001',
  username: '张三',
  role: 'vip'
})

4. uni-app 项目中使用

code

// main.ts
import { init } from '@mitojs/wx-mini'

export default createApp({
  onLaunch() {
    init({
      dsn: 'https://your-api.com/report',
      debug: false
    })
  }
})

5. 自定义上报通道

code

import { init } from '@mitojs/wx-mini'

init({
  dsn: 'https://your-api.com/report',
  // 自定义 transport（替代默认的 wx.request 上报）
  transport(data) {
    wx.request({
      url: 'https://custom-endpoint.com/log',
      method: 'POST',
      data: JSON.stringify(data),
      header: { 'Content-Type': 'application/json' }
    })
  }
})

常见陷阱#

DSN 后端需自行搭建 — mitojs 只负责采集和上报，后端接收服务（数据存储、可视化面板）需自建，这是它与 Sentry 的核心区别
小程序 wx.request 频率限制 — 高频上报会占用小程序请求配额，建议开启批量上报或降低采样率
debug: true 大量 console 输出 — 开发时方便排查，但会影响性能，生产环境务必关闭
hook 原生 API 可能与框架冲突 — uni-app/Taro 等框架自身也会 hook wx.request，需测试兼容性
包体影响 — @mitojs/wx-mini 约 15KB（gzip），对小程序主包有影响，可考虑放分包

生态资源#

竞品对比#

方案	Stars	定位	自建后端	Sentry 集成	小程序支持
mitojs	499⭐	轻量全链路监控	✅（需自建）	❌	✅ 原生
sentry-miniapp	676⭐	Sentry 小程序 SDK	❌（Sentry SaaS）	✅	✅ 7 端
fundebug	商业	商业小程序监控	❌（SaaS）	❌	✅

选型建议#

场景	推荐
需要数据自主可控（私有化部署）	mitojs
已使用 Sentry 生态	sentry-miniapp
小预算 + 无需自建后端	Fundebug（商业）
仅需基础错误上报	wx.onError + 自定义上报

社区资源#

GitHub Issues — 问题反馈
在线文档 — 完整 API 文档（中文）
npm：@mitojs/wx-mini
npm：@mitojs/core

版本更新#

v3.x（当前主线）#

@mitojs/core 3.0.1 / @mitojs/wx-mini 3.1.0
支持 beforeSend 数据过滤
支持 transport 自定义上报通道
Apache 2.0 License（2025-08-27 更新）

v2.x（历史版本）#

基础监控功能定型
面包屑、用户信息、自定义日志
Vue 2/3 + React 集成

发展趋势#

mitojs 的 last commit 在 2025-08-27，距今约 1 年。活跃度有所下降，但核心功能稳定、文档完善。如需更高频维护的替代方案，可关注 sentry-miniapp（2026-08 仍活跃）。

详细文档

mitojs#

资源概述#

设计规范#

架构设计#

监控能力矩阵#

审核规范#

开发指南#

快速上手（小程序）#

常见陷阱#

生态资源#

竞品对比#

选型建议#

社区资源#

版本更新#

v3.x（当前主线）#

v2.x（历史版本）#

发展趋势#