小程序Pro SDK接入--应用性能监控全链路版-火山引擎

文档中心

立即注册

导航

小程序Pro SDK接入

最近更新时间：2024.09.06 15:48:16首次发布时间：2022.09.01 16:20:36

本文介绍小程序如何接入应用性能监控全链路版提供的SDK，直接使用平台上的产品及服务。

使用限制

需要区分中国大陆（不包括港澳台地区）和海外的SDK上报域名。

中国发布的应用：上报到中国大陆服务器，域名为https://apmplus.volces.com。
海外发布的应用，上报到马来西亚柔佛服务器，域名为https://apmplus.ap-southeast-1.volces.com。
注意
柔佛是开白地域，如需查看该地域接入的应用和功能页面，请提交工单。

步骤一：接入SDK

原生小程序接入

CJS（推荐）

相对于NPM，CJS接入方式省去构建NPM的步骤。

获取SDK。
- 微信平台SDK地址
- 抖音平台SDK地址
- 支付宝平台SDK地址
- 百度平台SDK地址
- 飞书平台SDK地址
  将SDK地址下的内容复制并放在小程序/monitor/apmplus.js文件中。

接入并初始化。

使用node module(require)方式集成
将以下内容添加至app.js文件中，完成初始化。

// app.js
const client = require('./monitor/apmplus.js');
client.init({
  aid: 123, // 替换成您的aid
  token:'xxx-xxx' // 替换成您的token
})    
client.start()

// App({...})

使用ES module(import)方式集成
将以下内容添加至app.js文件中，完成初始化。

// app.js
import client from './monitor/apmplus.js'
client.init({
  aid: 123, // 替换成您的aid
  token:'xxx-xxx' // 替换成您的token
})    
client.start()

// App({...})

NPM

NPM方式接入SDK需要引入指定小程序的适配层。
所有平台的适配层如下所示：

微信小程序平台：WxAdapter
抖音小程序平台：TtAdapter
支付宝小程序平台：MyAdapter
百度小程序平台：SwanAdapter
飞书小程序平台：LarkAdapter

例如，在微信小程序平台则引入WxAdapter，可有效减少无用代码冗余。下面以微信小程序为例，介绍使用NPM方式接入SDK的步骤。

小程序接入NPM。
每个小程序平台都有各自NPM的接入方式，例如：微信小程序NPM接入指南。
安装NPM。
```
npm install @apmplus/mini-program
```

将以下代码添加到app.js文件中，接入并初始化。

// app.js
import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program'
const client = createMiniProgramClient([WxAdapter])
client.init({
  aid: 123, // 替换成您的aid
  token:'xxx-xxx' // 替换成您的token
})
client.start()

// App({...})

三方框架接入

NPM（推荐）

npm install @apmplus/mini-program

Taro

Taro支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。

如果您的产物是一个平台，以微信小程序为例。
将以下内容添加至app.js文件中以完成初始化。

// app.js
import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program';

const client = createMiniProgramClient([WxAdapter]);
if (client) {
  client.init({
    aid: 123, // 替换成您的aid
    token:'xxx-xxx' // 替换成您的token
  });
  client.start();
}
// class App extends Component {

如果您的产物是多个平台，那么可以用环境变量TARO_ENV的方式按需引入正确的适配层。
例如您要编译两个端：微信小程序、抖音小程序的产物。

添加微信小程序对应的文件wx.js。

// wx.js
import { createMiniProgramClient, WxAdapter } from '@apmplus/mini-program'
const client = createMiniProgramClient([WxAdapter])
export default client

添加抖音小程序对应的文件tt.js。

// tt.js
import { createMiniProgramClient, TtAdapter } from '@apmplus/mini-program'
const client = createMiniProgramClient([TtAdapter])
export default client

在app.js中根据环境名TARO_ENV动态引入指定文件。

// app.js
let client
if (process.env.TARO_ENV === 'weapp') {
  client = require('./wx').default
} else if (process.env.TARO_ENV === 'tt') {
  client = require('./tt').default
}
if (client) {
  client.init({
    aid: 123, // 替换成您的aid
    token:'xxx-xxx' // 替换成您的token
  })
  client.start()
}
// class App extends Component {

如果您的产物下包含支付宝小程序平台，则需要额外配置一个integration。

import Taro from '@tarojs/taro';
import { createMiniProgramClient, MyAdapter, FrameworksAdapterIntegration } from '@apmplus/mini-program';
const client = createMiniProgramClient([MyAdapter]);
if (client) {
  client.init({
    aid: 123, // 替换成您的aid
    token:'xxx-xxx' // 替换成您的token
    integrations: [FrameworksAdapterIntegration({ Taro })],
  });
  client.start();
}

Uni app

Uni app也支持产物为微信小程序、抖音小程序、支付宝小程序、百度小程序、飞书小程序。如果你的产物是多个平台，可以用条件编译按需引入正确的适配层，示例代码如下：

import { createMiniProgramClient, WxAdapter, TtAdapter } from '@apmplus/mini-program'

const getCorrectAdapter = () => {
  switch (process.env.VUE_APP_PLATFORM) {
    case 'mp-weixin':
      return [WxAdapter]
    case 'mp-toutiao':
      return [TtAdapter]
    default:
      return null
  }
}

const client = createMiniProgramClient(getCorrectAdapter())
if (client) {
  client.init({
    aid: 123, // 替换成您的aid
    token:'xxx-xxx' // 替换成您的token
  })
  client.start()
}

说明

Uni App版本不同导致环境变量名不同，需根据实际业务场景进行代码优化。

步骤二：设置合法域名

以下以微信小程序为例，介绍设置合法域名的详细操作步骤。

登录微信小程序后台。
在左侧导航栏，选择开发 > 开发管理。
单击开发设置页签，在服务器域名区域，单击修改。
在身份验证页面，管理员完成身份验证。
在配置服务器域名页面，request合法域名后输入https://apmplus.volces.com，然后单击保存并提交。

（可选）步骤三：详细配置

export type InitOptions = {
  aid: number // 应用ID，必填参数
  token: string // 应用 token，必填参数
  userId?: string // 手动用户ID
  deviceId?: string // 设备ID
  useLocalConfig?: boolean = false // 是否使用本地配置，若设置为true，则不拉取平台配置的采样
  domain?: string // 私有化部署方式必填，填写部署的域名
  plugins?: Plugins // 插件配置 详情见「配置插件」文档  
  integrations?: Integration[] // 集成配置，在兼容Taro支付宝小程序时用到，详情见「按需加载集成」文档
}

步骤四：验证上报

所有已接入的小程序平台可以使用以下方式验证是否成功接入SDK。
以微信小程序为例，介绍详细操作步骤。

登录微信小程序后台。
在左侧导航栏，选择开发者工具 > network。
观察页面请求触发的情况。
至少触发以下两个请求，表示接入成功，且稍等片刻后平台也会有对应数据展示。

注意事项

尽量将初始化SDK放到App初始化前，这样获取对开发者的可用信息更为全面。如果您需要等待某个接口下发后配置userId再进行上报，请参见API参考。
通过getSystemInfo获取的设备信息，在开发者工具调试时，上报的数据与线上(真机调试)有些差异，具体差异体现在：
- mver：小程序版本
- menv：小程序环境
- model：设备型号
- brand：设备品牌