一、前期准备
前端监控文档：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
网友评论