【支付宝小程序】日志管理__前端监控

一、前期准备

前端监控文档：https://opendocs.alipay.com/open/264/tftgpw
前端监控接入步骤文档：https://opendocs.alipay.com/open/264/oaup1c
支付宝小程序集成前端监控sdk步骤文档：https://openmonitor.alipay.com/cloudmonitor/clientApps.htm

二、前端监控简介

支付宝的前端监控目前支持支付宝小程序、微信小程序、H5页面、Android等多种应用。

主要功能：

1.页面资源和接口监控

• 提供应用整体PV、UV、用户留存率、访问地理分布、终端分布的监控大盘；
• 提供通用的接口监控（通过HTTP状态码判断是API否异常）和更细粒度的业务级别的接口监控（大部分场景下需要通过API的HTTP状态码结合返回结果业务状态码一起判断请求状态）；

2.报警管理
提供通用（应用整体的API和JS错误）和更细粒度的报警规则配置（比如针对登录、关键业务的增删改等）；

3.JS Error监控
全量采集Js Error（可以自定义上报）并实时报警，并提供JS Error的地理分布、高频错误、影响用户数据等功能。

4.自定义统计
为帮助您监控和统计轻量级的业务交互行为，前端监控提供了以下两类自定义统计功能：

• 求和统计：用于统计业务中某些事件发生的次数总和，例如某个按钮被点击的次数、某个模块被加载的次数等。
• 均值统计：用于统计业务中某些事件发生的平均值，例如某个模块加载的平均耗时等。

5.日志归档
实时归档线上日志，用于日志的问题定位。

6.页面入口来源依据热门路径分析
提供页面的入口来源分析（扫码、腰封、消息等），依据用户的点击行为分析和业务的留存率分析等。

三、在前端监控平台中创建需要监控的应用

步骤文档：https://opendocs.alipay.com/open/264/oaup1c
云监控地址：https://openmonitor.alipay.com/cloudmonitor/generalSituation.htm

步骤如下：

1）应用创建

登录云监控点击“前端监控”，创建需要监控的应用。

image.png

2）填写基本信息

选择 应用类型 并设置 应用名称

image.png

四、在支付宝小程序中集成前端监控的sdk

可集成到小程序中的前端监控的sdk下载地址：https://opendocs.alipay.com/open/264/foke8e

步骤如下：

1）下载可集成到小程序的前端监控的sdk

image.png

2）集成到支付宝小程序中

接入sdk文档地址：云监控 ---前端监控 --- 【需要监控的项目】--- 设置 --- 接入设置

解压压缩包，并将alipayLogger_v1.1.0.js放置入项目中，目录自定义，并在app.js引入SDK，例如：import monitor from '/path/to/alipayLogger';（尽量参照此语法引入到项目中），并初始化。如下所示：

image.png

image.png

引入的代码如下：
//1、导入monitor
import monitor from '/path/to/alipayLogger';

//2、将以下内容复制黏贴至小程序app.js文件的onLaunch()函数中以完成初始化。
monitor.init({
  pid: "t29n3pydoi/dsyfkcmelew==",
  options: options,
  sample: 1,
  autoReportApi: true,
  autoReportPage: true,
  // Http请求返回数据中状态码字段名称
  code: ["xxx"],
  // Http返回数据中的error message字段名称
  msg: ["xxx"]
});

3）日志上报

日志上报文档地址：https://opendocs.alipay.com/open/264/qqre4z

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

// 对于一些特殊的场景，可以通过monitor.error('xxx')或monitor.error(e)上报错误信息。
App(monitor.hookApp({
  onShow(options) {
    //...
  }
}))

2、实时日志
开发者可通过monitor.logInfo()函数打印日志，日志汇聚并实时上报到云监控。

直接调用monitor.logInfo(xxx)即可。

image.png

五、查看实时日志

支付宝开放平台：https://openhome.alipay.com/platform/developerIndex.htm

image.png

image.png

image.png