用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序 | 接入阿里云监控

Rolan 2019-2-26 00:40

喜大奔普,微信小程序可接入 ARMS 前端监控啦。阿里云监控可统计JS错误率,访问速度,API请求成功率,PU/PV,页面访问量,API链路追踪,地理分布,设备型号系统版本等等,还可自定义统计内容,很是方便。虽然官方文 ...

喜大奔普,微信小程序可接入 ARMS 前端监控啦。

阿里云监控可统计JS错误率,访问速度,API请求成功率,PU/PV,页面访问量,API链路追踪,地理分布,设备型号系统版本等等,还可自定义统计内容,很是方便。

虽然官方文档写得很清楚,但不同框架和不同环境下的选择不同,本文供大家参考,少走弯路,快速接入。

参考官方文档:https://help.aliyun.com/document_detail/103992.html?spm=a2c4g.11186623.6.605.195a33b7ROXRgP

1、获取SDK内容

将SDK内容copy放在微信小程序/utils目录下的wxLogger.js(名字可随意)文件中

SDK地址:https://retcode.alicdn.com/retcode/wl.js

如果项目使用ES module (import)方式集成,则需要将sdk最后一行引入方式修改:

  1. 修改前:
  2. var clazz=WXLogger;module.exports=clazz;
  3. 修改后:
  4. export default WXLogger;

2、初始化

添加pid、uid: 
pid是你的站点ID,在阿里云控制台--业务实时监控服务--前端监控添加你的监控后,即可在设置--应用设置中看到; 
uid就是你的用户ID,用于统计 UV。

如果项目使用node module (require)方式集成,则添加以下内容:

  1. const WXLogger = require('./wxLogger.js');
  2. const Monitor = WXLogger.init({
  3. pid: '你的pid',
  4. uid: "userId",
  5. region: 'cn'
  6. });
  7. export default Monitor;

如果项目使用ES module (import)方式集成,则添加以下内容:

  1. import WXLogger from './wxLogger.js';
  2. const Monitor = WXLogger.init({
  3. pid: '你的pid',
  4. uid: "userId",
  5. region: 'cn'
  6. });
  7. export default Monitor;

3、日志上报

静默上报

如果项目采用原生开发,直接使用静默采集 PV、Error、API、性能及 Health 数据是最方便的。

需要注意的是:小程序监控项目如需使用 hookApp、hookPage 嵌入生命周期打点,必须符合标准小程序关于 App 和 Page 的规范,即 App层有 onError,Page 层有 onShow、onHide、onUnload

在app.js中使用Monitor.hookApp(options)方法静默捕获Error类日志。其中的options即为App层相应的Object配置。使用方式如下:

  1. import Monitor from 'utils/monitor';
  2. App(Monitor.hookApp({
  3. onShow(options) {
  4. //...
  5. }
  6. }));

在page的JS文件中通过Monitor.hookPage(options)方法静默上报PV、Health数据。使用方式如下:

  1. import Monitor from 'utils/monitor';
  2. Page(Monitor.hookPage({
  3. onLoad(query) {
  4. //...
  5. }
  6. }));

手动上报

如果项目采用框架开发如mpvue,无法直接使用静默上报时,可采用进阶方法-手动上报打点,此时需要注意请勿与静默上报方法同时使用,否则会造成日志重复上报。

  1. import Monitor from 'utils/monitor'
  2. export default {
  3. data() {
  4. return {}
  5. },
  6. created() {},
  7. mounted() {},
  8. onShow() {
  9. Monitor.pageShow()
  10. },
  11. onHide() {
  12. Monitor.pageHide()
  13. },
  14. onError() {
  15. Monitor.pageError()
  16. }
  17. }

在开发中,我们经常会用微信开发者工具进行调试,此时也会把测试环境的数据往上报,造成数据污染,那么就需要对环境进行区分判断,当只有线上环境时,才上报数据。而手动上报的方式可以方便的添加环境判断,达到我们的目的。下面是对Monitor简单的改写:

  1. import WXLogger from 'utils/wxLogger.js'
  2. /**
  3. * 用于判断是否是线上环境
  4. */
  5. const isOnline = (() => {
  6. if (‘你的环境判断方法’) {
  7. return true
  8. } else {
  9. return false
  10. }
  11. })()
  12. /**
  13. * disableHook 是否禁用 request 请求监听。默认会监听并用于上报 API 调用成功率。
  14. * uid 用户 ID,用于统计 UV。
  15. */
  16. const Monitor = WXLogger.init({
  17. pid: "你的pid",
  18. uid: "userId",
  19. region: 'cn',
  20. disableHook: !isOnline
  21. })
  22. const pageShow = () => {
  23. if (isOnline) {
  24. Monitor.pageShow()
  25. }
  26. }
  27. const pageHide = () => {
  28. if (isOnline) {
  29. Monitor.pageHide()
  30. }
  31. }
  32. const pageError = () => {
  33. if (isOnline) {
  34. Monitor.error()
  35. }
  36. }
  37. export default {
  38. pageShow,
  39. pageHide,
  40. pageError
  41. }

4、设置安全域名 
最后设置安全域名,就OK啦。

  1. 如果region设为cn,则将https://arms-retcode.aliyuncs.com添加到request合法域名。
  2. 如果region设为sg,则将https://arms-retcode-sg.aliyuncs.com添加到request合法域名。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 麋鹿的兔 来自: 简书