美文网首页小程序起步小程序
【支付宝小程序】日志管理__前端监控

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

作者: Sraindy | 来源:发表于2020-07-28 13:12 被阅读0次

    一、前期准备

    前端监控文档: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

    相关文章

      网友评论

        本文标题:【支付宝小程序】日志管理__前端监控

        本文链接:https://www.haomeiwen.com/subject/eeffrktx.html