liushi-monitor

前端性能监控SDK及数据分析平台 V1

目前只支持对于Vue3项目进行简单监控，若有对线上Vue3项目进行实时数据监控的需求，可以使用此项目

子项目说明

该监控套件整体采用Monorepo作为仓库管理方案，子项目在packages文件夹下，分别为：

• monitor-sdk：监控目标项目的SDK工程主体
• analysis-platform：监控数据分析平台
• server：后端服务器

线下测试示例项目在example文件夹下，暂用的示例项目为之前的劳动二课H5学生端

环境要求

• pnpm: ^10
• node: ^18
• https: 在分析平台项目里，token放在cookie中。而在Chorme较新的版本里，线下开发时，开启 sameSite=none;secure=false 配置才会让请求成功携带cookie，而这对配置只会在https环境下生效, 故需要接入自己的证书，并开启https运行前后端

运行指令

在根目录下调用以下指令启动项目

# 运行sdk并开启热更新
pnpm run dev:sdk

# 运行后端服务器
pnpm run dev:serevr

# 运行分析平台
pnpm run dev:platform

或者在根目录下的packages.json中，直接使用脚本快捷启动

现有功能

监控SDK能力

• 基于优先级的异步调度自消费上报引擎V1、加密上报能力
• 对Vue3项目的兼容支持
• PV、UV监控
• JS代码报错、资源加载报错、未处理的异步报错监控（数据收集部分仍需优化）
• 对SPA应用的浏览路径栈和页面曝光简单监控
• 基础首屏Web性能指标、SPA页面加载监控
• 接口请求监控
• 默认全局点击监控（对应插件暂时未启用）
• Vue3框架报错监控
• 日志缓存和重启时继续上报（方案未定，暂未实现）

分析平台能力

代码中有很多AI生成，组织有一定问题，读起来可能会有点难受

• 用户角色管理以及基于角色的权限菜单
• 埋点配置（适配SDK和后端进行功能迭代）
• 报错分析（赶时间的半成品，需要根据具体业务需求拓展）
• 用户行为分析（赶时间产物，鸡肋版，运行了看下就知道了，真要用的话，需要根据具体业务需求，整体重新写）
• 性能监控（勉强能看，但是具体分析维度仍需根据具体业务需求重写）

后端服务器

基于Nest.js+BullMQ，赶时间产物，65% AI，鸡肋版，真要用的话，很多地方要重写

自定义用户行为收集的事件命名规范参考

适用于监控组件中的自定义埋点

参见: 产品分析的简单事件命名约定