本文介绍如何通过SDK接入前端监控数据到日志服务移动运维监控。移动运维监控用于实时监控JS异常、页面性能等问题,并且支持智能分析,帮助您低成本、高效率地发现前端页面中的各类隐患。

前提条件

已创建移动监控应用。具体操作,请参见添加应用

步骤1:开通Web Tracking

  1. 登录日志服务控制台
  2. 在Project列表区域,单击目标Project。
  3. 日志存储 > 日志库页签中,选择目标Logstore右侧的图标图标 > 修改
  4. Logstore属性页面,单击右上方的修改
  5. 打开WebTracking开关,并单击保存

步骤二:安装SDK包

  1. 安装依赖包。
    npm i sls-wpk-reporter --save
  2. 导入SDK核心包。
    import SlsReporter from 'sls-wpk-reporter'
  3. 导入插件安装包。
    import {
      wpkglobalerrorPlugin, // JS异常监控
      wpkperformancePlugin, // 性能监控
    } from 'sls-wpk-reporter'
    说明 当您需要添加采集插件,用于扩展SDK的打点能力时,需要导入wpkinterfacePlugin包,导入命令为import wpkinterfacePlugin from 'sls-wpk-reporter/src/plugins/interface'。详细的采集插件说明,请参见采集插件扩展说明

步骤三:上报数据

常见的SDK Demo示例如下。

const wpk = new SlsReporter({
  bid: 'sls-f****bfa4573', 
  project: 'my-project',
  endpoint: 'cn-hangzhou-intranet.log.aliyuncs.com',
  slsParams: { 
    app_name: '', 
    user_nick: '', 
    logon_type: '', 
  },
  rel: '1.0', 
  uid: '123456',
  plugins: [ 
    [wpkperformancePlugin],
    [
      wpkglobalerrorPlugin,
      {
        jsErr: true, // 是否开启JS异常监控。
        resErr: true, // 是否开启资源加载异常监控。
      },
    ],
  ],
});
wpk.install(); // 初始化。
// 上报一条数据。
wpk.logReport({  
  key1: '1',
  key2: '2'
})
参数名称 是否必填 说明
bid 您在日志服务移动运维监控平台上所添加的应用的ID。更多信息,请参见添加应用
project 您在添加应用时所选的日志服务Project。
endpoint 日志服务Project所属的Endpoint。如何获取,请参见服务入口
slsParams 上报扩展数据。参数值为Object类型。具体格式,请参见logdata说明
rel 前端资源版本号。推荐配置。

支持字符串和函数两种方式。使用函数设置时,最终需要返回的也是字符串。

uid 浏览当前页面的用户的唯一标识,默认使用uuid。推荐配置。

支持字符串和函数两种方式。使用函数设置时,最终需要返回的也是字符串。

plugins 采集插件。
没有设置任何插件时,默认使用wpkflowPlugin插件,用于上报站点流量数据。
说明 当您需要添加插件,扩展SDK打点能力时,可添加插件配置。详细的采集插件说明,请参见采集插件扩展说明
sampleRate 采样率。

默认情况下,性能数据的采样率为10%,其他类型的数据采样率为100%。

beforeSend 用于数据上报时的前置处理,添加return false可阻止日志上报。参数值为Object类型。具体格式,请参见logdata说明
spa 是否使用SPA应用。
  • (默认值)false:不使用。
  • true:使用SPA应用,可配合wpkflowPlugin插件更好的打点,自动监听hashchange事件。
debug 是否开启debug模式。
  • (默认值)false:关闭。
  • true:开启。开启后,可以输出更详细的打点过程日志。一般用于接入时的联调分析。
    说明 生产环境中,建议关闭。

采集插件扩展说明

当您需要添加插件,扩展SDK打点能力时,可在SDK代码中添加如下插件配置。

插件 说明 示例
wpkglobalerrorPlugin 用于监控全局错误。 插件配置说明如下:
{
  jsErr: true, // 是否开启JS异常监控。
  jsErrSampleRate: 1, // JS异常数据的采样率。
  jsErrFilter: fn, // JS异常数据过滤的回调函数,参数为Error对象。如果返回false,则不上报JS异常数据。
  resErr: false, // 是否开启资源异常监控。
  resErrSampleRate: 1 // 资源异常监控采样率。
  resErrFilter: fn // 资源异常数据过滤的回调函数,参数为Error对象。如果返回false,则不上报资源异常数据。
}
wpkinterfacePlugin 用于监控API请求异常。 插件配置说明如下:
{
  enable: true, // 是否开启API请求监控。
  sampleRate: 1,  // API请求数据的采样率。
  withBody: false, // 是否上报请求的Body参数。
  errorFilter: function(params) {
    // API请求异常数据过滤的回调函数,参数包含请求地址、响应码及响应内容。如果返回false,则不上报API请求异常数据。
    // params格式为{url: '', status: '', response: '', body: '', reqHeaders: {}, resHeaders:{},queryString: ''}
    // 返回结果为{bizCode: '', msg: '', traceId: ''},SDK会将该结果一起上报。
 }
}
wpkperformancePlugin 用于自动上报性能数据。 插件配置说明如下:
{
  enable: true, // 是否开启自动上报性能数据功能。
  sampleRate: 0.1 // 性能数据的采样率。
}
wpkflowPlugin 用于监控站点流量。
开启后,默认在onload阶段自动上报站点流量数据。
说明 如果在SDK构造参数中将spa设置为true,则在hashchange阶段也会自动上报站点流量数据。
插件配置说明如下:
{ 
enable: true // 是否开启站点流程监控。
}

API说明

您可以在SDK中调用如下API。

API 说明
.logReport(logdata) 用于主动上报一条数据。配置内容,请参见logdata说明
.setConfig(opts) 用于更新SDK实例的配置。配置内容,请参见采集插件扩展说明
.install() 用于安装SDK,即初始化所有的设置,包含各个插件的初始化。
注意 调用此方法后,SDK的初始化工作才算完成,后续才能成功调用其他API。
.installAll() 用于安装SDK,即初始化所有的设置,包含内置的所有插件及安装全家桶。适合不接内核的场景。
.diagnose() 诊断API,用于调试。

调用该API后,会在浏览器控制台上输出诊断信息,并重定向到一个新页面,显示上报结果。

logdata说明

logdata为扩展数据。SDK在上报数据时,会将您自定义的扩展数据一起上报。

{
   key1: 'v1',
   key2: 'v2'
}

后续步骤