uni-app前端监控方案：基调听云APP探究

一、前言

在前期博文《跨平台应用开发进阶(三十七)uni-app前端监控方案 Sentry 探究》中讲解了Sentry， Sentry是一个开源实时错误监控项目，支持包括 web 前端、服务器端、移动端及其游戏端等多端配置。考虑到目前存量产品在用监控方案听云，故弃用Sentry，探究听云集成应用详情。

二、产品介绍

基调听云App 移动应用性能管理产品采用SDK方式实现对App的崩溃、卡顿、超时等性能问题进行采集，并能对真实用户体验数据进行量化分析，实现版本迭代过程中的用户体验优化。

基调听云APP 以集成SDK方式，通过在指定方法中嵌码去采集方法中的数据。可以通过报表服务器查询各种方法的数据和调用次数。

具有如下功能：

1. 数据采集
   • HTTP/HTTPS协议数据收集
   • 崩溃/卡顿异常数据收集
   • 事件性能数据收集
   • 视图性能数据收集
   • 进程内存和CPU使用率
   • 用户体验分析数据收集
2. 网络数据
   • 应用响应时间
   • DNS解析时间
   • TCP建连时间
   • SSL握手时间
   • 首包时间
   • 访问量

SDK也可以采集线程堆栈，数据库、自定义参数和HTTP请求参数。

3. 用户体验分析-应用启动数据

   • 启动耗时
   • 启动次数
   • 启动期间的崩溃、事件性能数据

4. 用户体验分析-用户操作数据

   • 操作耗时
   • 阻塞耗时
   • 操作次数
   • 操作期间的崩溃、事件性能数据

5. 用户体验分析-页面加载数据

   • 页面交互耗时
   • 页面展现耗时
   • 页面加载期间的事件性能数据

2.1 工作原理

2.1.1 Android平台工作原理

基调听云SDK 通过虚拟机技术在应用打包编译过程中对应用采样点（HTTP标准协议和HTTPS标准协议）进行嵌码操作，该操作会在协议类库方法前后部署基调听云SDK探针，该过程不会影响用户代码逻辑。

每当App启动时，基调听云Agent开始工作。应用有网络请求时，通过之前部署的基调听云SDK探针以一定的采集频率来采集数据，并对采集的数据进行汇总后，上传到服务器（报表展现）。

应用退出到后台或用户关闭App时，基调听云Agent停止工作，以便减少不必要的流量消耗。

• Android SDK性能消耗
  应用App嵌码后体积增量为370KB左右。

2.1.2 iOS平台工作原理

利用objective-c的runtime特性，通过Method swizzle技术，可以实现在运行时替换 selector 对应的方法实现，达到给方法挂钩的目的。也就是说，嵌入基调听云的 SDK 后,在程序启动之初，基调听云的SDK会对相应的方法执行swizzle操作，从而在调用一个被swizzle过后的函数时，将会首先调用SDK相应的自定义函数，在SDK的函数中会执行一些数据采集的操作，然后SDK的函数会再回调原函数的实现，不会影响原程序逻辑。

• iOS SDK体积增量
  三种指令架构增加 2.71M，具体表现为：

• Armv7 增加 0.81M

• Armv7s 增加0.81M

• Arm64 增加0.99M

三、项目集成

集成听云至项目中，不同平台采用不同的集成方案（对于集成实施者不友好）。其中，android采用sdk集成方式实现，ios采用uni-app官方插件形式集成。

3.1 Android集成

参照集成文档《TingYun_SDK_Android_Gradle_2.15.6_3.0_uni-app》可完成集成操作。

有关Android本地组包操作，详参博文《跨平台应用开发进阶(九) ：uni-app 实现Android原生APP-本地打包集成极光推送(JG-JPUSH)详细教程》。

APP启动后可在 logcat 处通过 NBSAgent 筛选出如下信息，即代表集成成功：

3.2 iOS集成

参照探针集成文档《iOS集成-基调听云App性能监控》，可完成探针集成。

参照探针部署文档《iOS集成听云uni-app插件》，可完成探针部署。

探针引入js文件tingyun-uni-app-agent.js下载地址《iOS集成听云uni-app插件JS资源文件》。

探针部署uni-app插件tingyunAppUniPlugin下载地址《iOS集成听云uni-app插件引入》。

注⚠️：iOS集成可采用uni-app插件形式，集成结果仍需要借助xCode离线编译形式在控制台logcat 处通过 NBSAgent 筛选验证，iOS离线编译详参博文《跨平台应用开发进阶(十四) ：uni-app 实现IOS原生APP-本地打包集成极光推送(JG-JPUSH)详细教程》。

四、答疑解惑

4.1 APP 各项监测指标是否需要特殊设置（数据埋点）或调用接口实现？

主要监测指标：

• 用户体验全面检测：分析真实用户使用过程，覆盖应用全生命周期（包含：应用启动、页面展现、用户操作三大核心场景），助力业务人员快速准确了解用户体验。
• CDN质量监测：基于核心技术，自动识别 CDN 厂商信息，提供详细的 CDN 节点分布并支持全局过滤，通过网络时间、可用性和下载速率综合评估 CDN 质量，助力运维人员了解 CDN 节点分布、匹配策略和综合质量。
• 网络探测分析：通过探测应用使用过程中的网络波动，提供网络延时和丢包率两大核心指标，让运维人员能够区分判别客户端网络环境较差导致的网络错误。
• 移动拨测：基于真实用户下发拨测任务，支持即时监测和CDN 对比分析两种场景，并能配置立即执行、请求错误后执行和请求结束后执行三种不同条件，针对地域、运营商、接入方式和VIP 用户四种维度下发任务。协助运维人员即时了解网络故障，进行 CDN 选型对比分析。
• 卡顿异常分析：基于真实用户体验，分析主线程阻塞时间达到 5 s 的严重卡顿问题，提供卡顿过程中的五个调用栈，协助研发人员精准定位卡顿发生的原因。
• 端到端全链路追踪：提供客户端到服务端的全链路追踪，当前端响应耗时超长时，能够通过对应的单样本数据直接追踪至后端应用，帮助运维人员分析前端响应耗时超长是否是由于后端服务响应较慢导致。

4.2 Android 如何给用户打标？

ios集成中应用以下方法实现用户打标：

// 调用听云探针接口设置用户id 
Tingyun.setUid(uid);

android用户打标方式如下：

const tingyunModule = uni.requireNativePlugin('TingyunUniModule')
tingyunModule.setUserIdentifier('uid')

通过以上方式集成听云之后，重新编译并发布新App。发布后5分钟左右，即可在基调听云控制台（部署在内网服务器，登录相应的服务器控制台查看）看到该App的性能数据。

更详细的安装说明，可以在基调听云控制台阅读和下载相关安装说明文档。

五、产品集成关注点

• 网络带宽占用：听云APP网络数据每分钟上传一次，如果上传失败后会做本地缓存，最多缓存10分钟的数据，先进先出。崩溃、卡顿数据是立即上传。带宽占用高的话是否存在影响APP的正常使用？

• 合规检测：APP上架应用市场，安全合规这块有需要特别注意的吗？之前集成极光推送，就检测出频繁自启动等问题导致APP无法上架，需升级极光插件才能解决此问题，为此衍生出插件需要支持在线升级。

• 插件升级：目前听云APP uni-app插件尚未上传至DCloud应用市场，为离线集成方式。离线方式的话，如果插件需升级，APP就需要重新发包配合升级。

• 开关控制：如果在APP用户使用过程中发现由于集成听云导致的APP性能、bug出现，是否存在备用修复方案？例如通过读取应用后台开关参数来决定是否启用听云。

• 插件集成方式不兼容：应用Android Studio离线集成听云APP，对于uni-app中引入的其他在线集成插件不兼容，此种插件集成方式不友好，不可用。

• 排错方式不友好：听云APP针对uni-app框架采集数据是针对的是H5 Activity加载。所以展示为io开头。无法做到根据这个activity去映射项目中的实际页面。如果接口请求响应时间过长或页面白屏，加载慢，从听云控制台可以看到数据报告指标，但无法定位具体页面及方法。

六、拓展阅读

• 基调听云官网
• 基调听云官方文档
• 《跨平台应用开发进阶(三十七)uni-app前端监控方案 Sentry 探究》
• 《跨平台应用开发进阶(九) ：uni-app 实现Android原生APP-本地打包集成极光推送(JG-JPUSH)详细教程》
• 《跨平台应用开发进阶(十四) ：uni-app 实现IOS原生APP-本地打包集成极光推送(JG-JPUSH)详细教程》