支持多种小程序！阿里云ARMS推出小程序监控

\u003cp\u003e2018年是小程序蓬勃发展的一年，各大公司如腾讯、阿里、百度、头条等都陆续推出了自己的小程序，小程序已成为一个未来必然的趋势、移动互联网的新风口。据数据统计，目前已上线的微信小程序已超过100万，支付宝小程序、钉钉E应用、百度智能小程序、头条小程序等也在不断发力。由于小程序具有：无需下载、触手可及、用完即走、无需卸载的特性，所以用户体验对于小程序来说非常重要，一旦出现小程序卡顿，缓慢和错误，需要及时发现并修复，否则用户流失的概率会非常大。\u003c/p\u003e\n\u003ch2\u003e小程序与H5的不同\u003c/h2\u003e\n\u003cp\u003e小程序和H5都属于移动端场景下的技术选择方案，那么这里介绍一下小程序与H5的不同。\u003c/p\u003e\n\u003ch3\u003e1. 运行环境的不同\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e传统的H5的运行环境是浏览器，包括webview，其中浏览器提供window、document等BOM对象；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e小程序的逻辑层和渲染层是分开的，逻辑层运行在JSCore中，并没有一个完整的浏览器对象，所以缺少相关的DOM API和BOM API。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e2. 开发成本的不同\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eH5的开发，涉及到开发工具、前端框架、模块管理工具、任务管理工具、UI库的选择、接口调用工具及浏览器兼容性等；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e小程序的开发，指定环境的小程序会提供开发者工具、API及规范的开发标准。由于小程序是跑在指定的环境下的，同时API是指定环境下提供的，所以不用考虑浏览器的兼容性。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e在H5开发中，前端常用的HTML/CSS在不同的小程序中都有指定的文件标准。例如：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e在微信小程序中使用WXML/WXSS；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e在支付宝小程序、钉钉E应用中使用AXML/ACSS；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e在百度智能小程序中使用SWAN/CSS；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e…\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e开发规范在指定的官方文档中都会有明确的使用介绍，使用方法与原来H5的开发大同小异，所以上手开发相对容易。\u003c/p\u003e\n\u003ch3\u003e3. 使用体验的不同\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eH5页面需要在浏览器中渲染，在复杂的业务逻辑或者丰富的页面交互时会有卡顿情况；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e小程序除首次使用略慢，页面切换及跳转等非常顺滑，接近Native。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e通过以上几点小程序和H5的不同的介绍，我们可以发现原来针对H5页面的监控无法直接监控小程序；同时由于小程序封闭性较强，不同的小程序在标准上也略有不同，如微信小程序、支付宝小程序及钉钉E应用等等小程序在使用标准及开放的API方面也会有一些差异，所以针对小程序的监控与针对Web应用的监控会有所不同。\u003c/p\u003e\n\u003ch2\u003e小程序监控的现状\u003c/h2\u003e\n\u003cp\u003e现在针对小程序监控的大概分为以下几类：\u003c/p\u003e\n\u003ch3\u003e1. 小程序的数据统计分析，助力小程序运营\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e相关产品: 微信小程序助手、阿拉丁小程序统计平台等；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e特点：大部分是针对微信小程序提供相应的数据统计分析能力，从多维度分析小程序相关用户数据，适用于小程序运营，但缺乏对于用户体验，小程序性能的监控。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e2. 小程序错误监控\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e相关产品: FunDebug等；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e特点：监控小程序使用户出现的错误，帮助开发者发现并解决小程序错误，但缺乏对于小程序全局性能的监控，对于缓慢请求，缓慢页面没法监测。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e3. 小程序性能监控\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e相关产品: FrontJS、听云小程序监控等；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e特点：主要提供性能相关数据，包括JS错误、网络请求响应情况等。但是只支持微信小程序，而且没有办法把小程序的性能与后台应用的性能关联起来，没法形成端到端的监控。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e通过上面对现有的小程序监控产品分析，存在以下问题：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e无法支持所有的小程序监控，主要支持微信小程序\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e支持多类小程序监控的产品，提供的小程序相关数据较少，主要集中在错误监控\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e没有后台应用服务的性能监控，无法从小程序上的性能问题追溯到后台应用代码和数据库，无法形成端到端的监控\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e基于以上情况，阿里云ARMS前端监控重磅推出小程序监控，旨在帮助端到端的快速定位小程序问题，提升小程序的用户体验。\u003c/p\u003e\n\u003ch2\u003e提供的能力\u003c/h2\u003e\n\u003cp\u003e阿里云ARMS前端监控此次重点推出的小程序监控有以下特点：\u003c/p\u003e\n\u003ch3\u003e1. 覆盖各类符合标准规范的小程序\u003c/h3\u003e\n\u003cp\u003e首先解释一下这里所说的\u0026quot;标准规范的小程序\u0026quot;，即包含App和Page两层:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eApp用来描述整体程序，包含: onError事件；\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003ePage用来描述各个页面，包含: onShow、onHide、onUnload事件。\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e小程序的运行环境依赖于对应的客户端，各类小程序的DSL设计看起来很像，但细节上的差别还是比较多，并且已有了分化的趋势。在这种情况下，阿里云ARMS前端监控为了更好的支持小程序的监控诉求，提供以下小程序监控的场景：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e微信小程序\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e支付宝小程序\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e钉钉E应用\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e其他类别小程序\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003e由于小程序发展迅速，现在无法针对各类小程序都提供对应的监控SDK，所以不属于微信小程序、支付宝小程序和钉钉E应用的小程序可选择其他类别小程序的场景接入进行监控，但要满足上面说的\u0026quot;标准规范的小程序\u0026quot;前提，同时支持npm包。\u003c/p\u003e\n\u003ch3\u003e2. 完善的性能监控指标\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e基础业务指标，帮助了解小程序应用的使用情况\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e应用总PV/UV\u003c/li\u003e\n\u003cli\u003e页面维度的PV/UV\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e小程序各维度指标\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e手机型号\u003c/li\u003e\n\u003cli\u003e操作系统版本\u003c/li\u003e\n\u003cli\u003e微信/支付宝等相应的APP版本\u003c/li\u003e\n\u003cli\u003e网络等\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eJS错误分析\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eJS错误率、错误聚类、JS错误堆栈及错误定位等\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eAPI请求追踪\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cul\u003e\n\u003cli\u003eAPI请求成功率、API请求耗时及API请求的链路追踪\u003c/li\u003e\n\u003c/ul\u003e\n\u003cul\u003e\n\u003cli\u003e自定义事件统计\u003c/li\u003e\n\u003c/ul\u003e\n\u003cul\u003e\n\u003cli\u003e支持业务上自定义事件sum/avg统计\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3\u003e3. 可通过配置选择上报方式\u003c/h3\u003e\n\u003cp\u003e由于业务方使用监控的诉求不同，我们不仅支持优雅的静默数据上报，也支持使用开放的统计能力进行自定义上报。具体可查看官网的前端监控接入概述中的小程序场景相关文档：\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://help.aliyun.com/document_detail/106086.html\"\u003ehttps://help.aliyun.com/document_detail/106086.html\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e总结\u003c/h2\u003e\n\u003cp\u003e小程序作为各大互联网公司重磅加持的方向，未来小程序的应用数量会越来越多，那么对于用户体验方面的关注与提升诉求也会不断增加，阿里云ARMS前端监控提供的小程序监控可帮助客户实时监控发现质量问题，为企业的小程序的稳定运行提供坚实的保障。\u003c/p\u003e\n\u003cp\u003e附录：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e业务实时监控服务ARMS：\u003cbr /\u003e\n\u003ca href=\"https://arms.console.aliyun.com/#/home\"\u003ehttps://arms.console.aliyun.com/#/home\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e业务实时监控服务ARMS前端监控：\u003cbr /\u003e\n\u003ca href=\"https://arms.console.aliyun.com/#/retcode\"\u003ehttps://arms.console.aliyun.com/#/retcode\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e小程序监控接入文档：\u003cbr /\u003e\n\u003ca href=\"https://help.aliyun.com/document_detail/106086.html\"\u003ehttps://help.aliyun.com/document_detail/106086.html\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e更多内容，请关注前端之巅。\u003c/p\u003e\n\u003cp\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c6acf0133927.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e会议推荐\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e2019年6月，GMTC全球大前端技术大会2019即将到来。小程序、Flutter、移动AI、工程化、性能优化…大前端的下一站在哪里？点击下图了解更多详情。\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://gmtc.geekbang.org/?utm_source=infoq\u0026amp;utm_medium=bottombanner\"\u003e\u003cimg src=\"https://static.geekbang.org/infoq/5c6a6324955d6.png\" alt=\"\" /\u003e\u003c/a\u003e\u003c/p\u003e\n