通过SDK接入开启Web/H5监控-移动研发平台-阿里云

本文介绍如何在代码中快速接入SDK，开启Web/H5监控。

准备工作

已创建项目和应用。具体操作请参见快速入门。

SDK接入

SDK同时支持CDN接入和NPM包接入

CDN接入

第一步：集成SDK

在html的head标签中，添加script标签引入SDK资源文件

<script src="https://o.alicdn.com/alicloud-ams/alibabacloud-apm-h5-sdk/index.js"></script>

说明

SDK采用CDN覆盖式发布机制，该CDN资源可以保持拉取最新版本的SDK，接入方无需手动更新。

第二步：配置和使用SDK

挂载window模式

此模式下SDK会挂载在EMAS的命名空间下，EMAS.APM为SDK的构造器

// SDK 初始化
var apm = new window.EMAS.APM({
  appKey: 'appKey', // EMAS 控制台创建应用后分配
  appSecret: 'appSecret', // EMAS 控制台创建应用后分配
  appVersion: 'appVersion', // 应用版本号
  channel: 'channel', // 应用渠道号
  userNick: 'userNick', // 用户昵称
  userId: 'userId', // 用户id
});

/**
*  SDK 功能配置和启动
*  各功能插件配置请查阅SDK API文档
*/
var plugins = apm.start()

AMD模式

require(['@aliyun-emas/apm'], (APM) => {
  const apm = new APM({
    appKey: 'appKey', // EMAS 控制台创建应用后分配
    appSecret: 'appSecret', // EMAS 控制台创建应用后分配
    appVersion: 'appVersion', // 应用版本号
    channel: 'channel', // 应用渠道号
    userNick: 'userNick', // 用户昵称
    userId: 'userId', // 用户id
  });

  /**
  *  SDK 功能配置和启动
  *  各功能插件配置请查阅SDK API文档
  */
  const plugins = apm.start();


})

说明

SDK采用UMD规范，SDK资源加载前如果存在AMD Loader，则SDK不会挂载到window上，此时需要通过ADM的方式进行加载。

NPM接入

第一步：集成SDK

npm install @alicloud-emas/apm

说明

NPM接入方式需要手动更新SDK版本并发布上线，有关SDK版本更新内容请参考SDK发布说明

第二步：配置和使用SDK

import APM from '@alicloud-emas/apm';

// SDK 初始化
const apm = new APM({
  appKey: 'appKey', // EMAS 控制台创建应用后分配
  appSecret: 'appSecret', // EMAS 控制台创建应用后分配
  appVersion: 'appVersion', // 应用版本号
  channel: 'channel', // 应用渠道号
  userNick: 'userNick', // 用户昵称
  userId: 'userId', // 用户id
});

/**
*  SDK 功能配置和启动
*  各功能插件配置请查阅SDK API文档
*/
const plugins = apm.start()

说明

SDK配置项和插件配置项请参考SDK API。

验证上报内容

当接入完成后，运行项目，当在浏览器的Network中看到apm-gateway.aliyuncs.com/log/upload的post请求并且接口状态为200即为接入成功
前往控制台，可以看到上报的PV以及其他数据

SPA应用接入

SPA（Single Page Application）单页面应用在接入SDK时，需要关注PV数据的上报是否要监听应用内部的路由状态。

说明

SDK内部提供了History和Hash路由的监听能力，此功能默认是关闭状态，需要手动开启。

History路由模式

// 初始化SDK......

// 启动SDK ，配置PV 插件开启路由监听
// 当SPA应用内部采用History路由，需要手动开启History路由的监听，此时在应用内部切换子页面的时候会自动上报PV数据
apm.start({
  pv: {
    enableHistory: true,
  }
})

Hash路由模式

// 初始化SDK......

// 启动SDK ，配置PV 插件开启路由监听
// 当SPA应用内部采用Hash路由，需要手动开启Hash路由的监听，此时在应用内部切换子页面的时候会自动上报PV数据
apm.start({
  pv: {
    enableHash: true,
  }
})

手动上报

当自动监听路由无法满足需求时，可以采用手动上报模式

// 初始化SDK......

// 启动SDK ，获取PV 插件
const {pv} = apm.start({
  pv: {
    autoPV: false, // 当需要完全手动上报PV数据，需要将autoPV关闭
  }
})

// 手动上报PV
pv && pv.sendPV()