cloudr-f2e / monitor

👀 一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、页面性能并上报服务端的SDK

一款轻量级的收集页面的用户点击行为、路由跳转、接口报错、代码报错、并上报服务端的SDK

功能

• 🔨监听请求错误
• 🔨console
• 🔨路由跳转
• 🔨代码报错
• 🔨click、wx:tab、touchmove
• 🔨资源加载错误
• 🏅自定义上报错误
• 🚀丰富的hooks与配置项支持可高定制化
• 🌝支持IE8和安卓5以上
• 👌持续迭代与更新
• 完善的浏览器e2e和微信小程序e2e
• 完善的单元测试（77%~coding）
• 支持原生Web @zyf2e/monitor-browser
• 支持Web框架（Vue3、Vue2、React@Next） @zyf2e/monitor-web
• 支持原生微信小程序、支持uni-app等微信小程序框架 @zyf2e/monitor-wx-mini
• 支持Web性能监控 @zyf2e/monitor-web-performance
• 支持微信小程序性能监控 @zyf2e/monitor-wx-mini-performance

安装

web

使用npm

$ npm i @zyf2e/monitor-web

使用yarn

$ yarn add @zyf2e/monitor-web

web-performance

$ npm i @zyf2e/monitor-web-performance

使用yarn

$ yarn add @zyf2e/monitor-web-performance

wx-mini

使用npm

$ npm i @zyf2e/monitor-wx-mini

使用yarn

$ yarn add @zyf2e/monitor-wx-mini

使用指南

使用指南

• vue接入指南
• react接入指南
• wx-mini接入指南
• performance接入指南
• wx-mini-performance接入指南

hooks与配置项

hooks与配置项

示例

monitor-在线demo

收集信息平台展示

该SDK能收集哪些信息：下面这些例子给你一一展示：

vue-在线示例

react-在线示例

js-在线示例

wx-mini-在线示例

monitor's Issues

help：如何使用单一模块

title:

你好，作者，首先这个 issues 不是一个 bug

content:

看了源码的实现，发现代码之间的耦合性有点高。

比如：如果只是想使用用户行为这块逻辑，请问有什么好的办法吗

引入库之后，APP被替换成了Wechat的了

方便加下微信聊一下么？

: "MITO" is not exported by "node_modules/.pnpm/@[email protected]/node_modules/@zyf2e/monitor-web/dist/web.esm.js"

Describe the bug
我在vue3项目中，通过pnpm i @zyf2e/monitor-web安装的，如下引用：
在main.ts中 import { MITO } from "@zyf2e/monitor-web"
报TS错误：找不到模块“@zyf2e/monitor-web”或其相应的类型声明。ts(2307)

在vite构建时报错：
MITO" is not exported by "node_modules/.pnpm/@[email protected]/node_modules/@zyf2e/monitor-web/dist/web.esm.js

Expected behavior
希望能正常解析

Information
"@zyf2e/monitor-web": "^2.1.56",

• Mitojs Version [e.g. ^2.1.56]
• Environment: [Vue3.0]
• Error info stack [e.g. "MITO" is not exported by "node_modules/.pnpm/@[email protected]/node_modules/@zyf2e/monitor-web/dist/web.esm.js"]

这个项目可以自行构建吗？

大佬好！我想自己构建这个项目应该怎么操作呢？

我下载源码后，直接运行yarn命令后，提示找不到资源包：“ http://npmreg.qa.91jkys.com/@zyf2e%2fmonitor-types/-/monitor-types-2.1.29.tgz ”，我直接访问这个连接发现这个连接确实不能访问。请问应该怎么解决呢？

apikey 错乱

Describe the bug、
Thanks to the authors for their contributions
在微引用项目 使用错误上报的时候，我们在每一个子项目 采取了 分别上报，每一个 apikey 且都不同，但是我们发现 有些页面跳转的时候 上报的是错误的 apikey ，猜测 是上一个 实例没有销毁 ，是否有销毁的钩子函数

Expected behavior
A clear and concise description of what you expected to happen.

Information

• Mitojs Version [e.g. v2.0.0]
• Environment: [e.g. Vue2.6、Vue3.0、React17.0]
• Error info stack [e.g. MITO is not defined]

使用 @zyf2e/monitor-web 上报错误时没有浏览器和设备信息

Describe the bug
A clear and concise description of what the bug is.
使用 @zyf2e/monitor-web 这个库上报错误时没有浏览器和设备信息（看了下源码，是这个库本身就不支持此功能吗）

Expected behavior
A clear and concise description of what you expected to happen.
期望上报错误时能同时携带详细的浏览器类型、版本以及设备数据

Information

• Mitojs Version [^2.1.51]
• Environment: [React17.0]
• Error info stack []

unhandledrejection考虑到跨域问题了吗？

As best as I can tell, the cause is that "unhandledrejection" event handlers are silently ignored if they originate from a different script origin. (For more info, see MDN on same-origin policy.) Chrome is very strict with file URLs' security origins in particular, but I've found that unknowingly breaking the same origin policy can happen for other reasons too (such as developing in webpack-dev-server with Chrome Dev Tools open). See this Chrome issue for discussion.

源码一直会走error回调【移动端】

//这是报错信息
index.js?5e8f:1021 Uncaught TypeError: Cannot read property 'reduce' of undefined
    at onMessage (inject.js:16)
    at wrapperListener (index.js?5e8f:1017)

//这块源码走了错误回调----[TouchEvent]移动端args----还会报错fn
replaceOld(proto, 'addEventListener', function (originalAddEventListener) {
        return function (eventName, fn, options) {
            const wrapperListener = (...args) => {
                try {
                    return fn.apply(this, args);
                }
                catch (error) {
                    console.log('wrapperListener', error);
                    throw error;
                }
            };
            return originalAddEventListener.call(this, eventName, wrapperListener, options);
        };
    });

example 的优化

可以使用 MSW 做服务接口的模拟，拥有请求状态及响应，MSW 使用了 service workers，作为请求代理，和真实服务响应并无差异。

MSW 是作为开发环境使用的数据拦截及模拟的依赖工具，这里使用在 example 中使用，作为服务模拟，但应在 example 标识，MSW 的作用

我看到当前的 demo 中使用了个人的服务，为了缓解压力，同样在demo中使用MSW也会增强 mito 的特性展示

click ，看源码是在 window.addEventListener 上监听，那iput 输入呢？不会自动上报？

click ，看源码是在 window.addEventListener 上监听，那iput 输入呢？不会自动上报？

silentXhr和enableTraceId同时为true时请求头中不会带有traceId

背景：当silentXhr和enableTraceId同时为true时请求头中不会带有traceId

SDK_VERSION："1.2.7"

当前配置：

MITO.init({
dsn: '/log/mito/report',
apikey: '1iavk9zi8a5er2cf',
silentXhr: true,
enableTraceId: true,
traceIdFieldName: 'traceId',
includeHttpUrlTraceIdRegExp: /mito/,
backTrackerId(){
return store.getters.userInfo.userId;
}
})

你好，请问上报的接口中deviceInfo和record字段是有什么作用，我尝试的时候都是空对象和空数组

你好，请问上报的接口中deviceInfo和record字段是有什么作用，我尝试的时候都是空对象和空数组

监控导致小程序全局会有转发、分享朋友圈功能

监控导致小程序全局会有转发、分享朋友圈功能

解决方案(建议):
在执行监控初始化后执行 noMonitorPageLift 将分享功能重置为其原有方式，并且此方式貌似不会影响监控功能

MITO.init()

const WX_PAGE_LIFT = ['onShareAppMessage', 'onShareTimeline']

const originPage = Page

const noMonitorPageLift = (cb) => {
  cb()

  Page = (options) => {
    WX_PAGE_LIFT.map((lift, index) => {
      const originMethod = options[lift]

      WX_PAGE_LIFT[index] = { name: lift, method: originMethod }
    })

    originPage.call(this, options)

    WX_PAGE_LIFT.forEach((liftInfo) => {
      originPage[liftInfo.name] = liftInfo.method
    })
  }
}

noMonitorPageLift ()

请问支持React吗

点击行为应该如何开启上报？

点击行为只是收集进 breadcrumb 但并未上报，这个要怎么开启吗？

errorId 生成问题

Describe the bug
A clear and concise description of what the bug is.
如下代码中的两个错误具有相同的 name 和 messag，但是错误栈stack不同。monitor中将它们归类为了一类错误，计算的errorId相同，是否有问题？

const Example = () => {
  const handleClick = () => {
    const a = [1, 2];
    return a.map((item) => item.split('')); // 1. TypeError: item.split is not a function
  };
  const anotherClick = () => {
    const a = [1, 2];
    return a.map((item) => item.split('')); // 2. TypeError: item.split is not a function
  };
  return (
    <div>
      <button onClick={handleClick}>Click1</button>
      <button onClick={anotherClick}>Click2</button>
    </div>
  );
};

Expected behavior
A clear and concise description of what you expected to happen.

Information

• Mitojs Version [e.g. v2.0.0]
• Environment: [e.g. Vue2.6、Vue3.0、React17.0]
• Error info stack [e.g. MITO is not defined]

请问@zyf2e/monitor-wx-mini-performance这个能用在uniapp开发的小程序上面吗？

monitor-wx-mini-performance 这个sdk支持uniapp小程序吗

服务端在哪里？不开源吗？

没有服务端的话，是不是现在还不能使用你这个项目做监控呢？

请问行为上报只能上报错误类型吗？

在文档中没看到有字段控制是否上报用户行为的，例如点击事件，能否记录到breadcrumb，并且设置了maxBreadcrumbs后，自动发起请求，但是文档中没看到，而在beforeDataReport中我看到一段
···
// (event.data.actionType === undefined || !event.data.isTrackData) 为true那么认为此次上报的类型是错误上报，否则是埋点上报
···
上报类型除了error， console，还有其他类型吗？

现在有页面性能监控的实践么？

现在有页面性能监控的实践么？比如我想知道一个路由加载到底使用了多久？

这个支持报警，通知开发人员发送邮件吗

Describe the bug
A clear and concise description of what the bug is.

Expected behavior
A clear and concise description of what you expected to happen.

Information

• Mitojs Version [e.g. v2.0.0]
• Environment: [e.g. Vue2.6、Vue3.0、React17.0]
• Error info stack [e.g. MITO is not defined]

怎么接入自己的服务端

怎么接入自己的服务端

Java project

beforePushBreadcrumb 中存在类型事件，也会导致死循环。

Describe the bug

 let result: BreadcrumbPushData = null
      // 如果用户输入console，并且logger是打开的会造成无限递归，
      // 应该加入一个开关，执行这个函数前，把监听console的行为关掉
      const beforePushBreadcrumb = this.beforePushBreadcrumb
      slientConsoleScope(() => {
        result = beforePushBreadcrumb(this, data)
      })

这里只处理 console 死循环的情况；
假如 beforePushBreadcrumb，存在模拟点击，http 请求等，也会出现死循环的情况。

Information

• Mitojs Version 2.1.50
• Environment: Vue2.6

在electron内置浏览器中, isType('Window')没有判断出是浏览器环境

Describe the bug
在electron中不能正常使用

Expected behavior
希望在electorn中也能正常使用

Information
由于 electron 内置浏览器中调用 Object.prototype.toString.call(window) 返回 '[object global]' 而非 '[object Window]',
因此 @zyf2e/monitor-utils 模块的 isType 函数没有正确判断出来是浏览器环境

原生小程序环境返回上一级页面失败时，微信会抛出 Maximum call stack size exceeded 错误

背景：有些场景下，小程序当前页面栈为空，此时调用wx.navigateBack API时，mitojs捕捉到错误上报时，微信小程序会抛出RangeError: Maximum call stack size exceeded 错误

SDK_VERSION："1.2.5"

小程序基础库：2.15.0

说明：此情况下会上报2次ROUTE_ERROR 和1次 JAVASCRIPT_ERROR

当前配置：

const MITO = require('./libs/mito.min')
const randomNum = utils.tool.randomString(10)
MITO.init({
  dsn: 'https://lihua1108.com',
  apikey: `log-${config.miniApp.origin}`,
  maxBreadcrumbs: 20,
  enableTraceId: true,
  includeHttpUrlTraceIdRegExp: /api/,
  silentConsole: true,
  backTrackerId(){
       const { userid = '' } = wx.getStorageSync('guider') || {}
  	return userid || randomNum
  },
  beforePushBreadcrumb(breadcrumb, hint){
  	if (hint.type === 'Console') return false
   }
})

服务端和后天管理端 有吗

trackDsn使用问题

请问trackDsn配置以后，如何使用，看文档没有找到什么方法。

看到有这个判断event.data.actionType === undefined || !event.data.isTrackData，不知道使用什么方法才能使用，MITO.log不行

是否支持taro第三方框架

Describe the bug
A clear and concise description of what the bug is.

Expected behavior
A clear and concise description of what you expected to happen.

Information

• Mitojs Version [e.g. v1.0.0]
• Environment: [e.g. Vue2.6、Vue3.0、React17.0]
• Error info stack [e.g. MITO is not defined]

跨域

window.error监听不是会跨域么，是怎么处理跨域的问题呀

疑问，TransportData Queue 为了解决什么问题？感觉没什么用处？

Describe the bug
TransportData Queue 我理解是处理小程序请求并发，可能带来的请求超时问题；
从源码角度看，就是一个队列异步请求；flushStack 没有什么作用？
以上为我的观点，谢谢
Expected behavior

Information

• Mitojs Version [e.g. v2.0.0]
• Environment: [e.g. Vue2.6、Vue3.0、React17.0]
• Error info stack [e.g. MITO is not defined]

PV、UV需要自己手动上报吗

关于上报的，目前只看到错误才会上报，其他事件都没有，是需要自己手动上报吗还是需要设置什么？

Information

• 2.1.54
• Vue3.0

引入小程序版本时,文件中的App变量名于其他第三方JS发生冲突

版本

• Mitojs Version [/* @mitojs/wx-mini version ' + 3.0.1 */]

引入方式
在小程序app.js中

const MITO = require('js文件')
MITO.init({
})

初始化之后, 引入另一个js文件后, 调用其中的api时报错. 比如源代码中 App.b.c, 报错 b为undefined.
因此怀疑是App被覆盖.
如果不初始化MITO. 则不会报错.