基于 Uniapp 开发框架的小程序接入¶

更新日志

2022.9.29：初始化参数新增 isIntakeUrl 配置，用于根据请求资源 url 判断是否需要采集对应资源数据，默认都采集。

2022.3.29：

新增 traceType 配置，配置链路追踪工具类型，如果不配置默认为 ddtrace。目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6 种数据类型。
新增 allowedTracingOrigins 允许注入 trace 采集器所需 header 头部的所有请求列表。可以是请求的origin，也可以是正则。

前置条件¶

安装 DataKit。

应用接入¶

登录观测云控制台，进入用户访问监测页面，点击左上角新建应用，即可开始创建一个新的应用。

在右侧，选择安装配置的接入方式，点击右侧的参数配置，填入相关配置参数后，即可复制到项目中使用。

使用方法¶

在 Uniapp 项目入口文件 main.js 头部位置以如下方式引入代码：

NPM¶

VUE 2VUE 3

引入(可参考 uniapp 官方npm 引入方式)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('@cloudcare/rum-uniapp')
// 初始化 Rum
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// 必填，Datakit域名地址 需要在微信小程序管理后台加上域名白名单
  applicationId: '<应用 ID>', // 必填，dataflux 平台生成的应用ID
  env: 'testing', // 选填，小程序的环境
  version: '1.0.0', // 选填，小程序版本
  service: 'miniapp', //当前应用的服务名称
  trackInteractions: true, // 用户行为数据
  sampleRate: 100, //指标数据收集的百分比，100 表示全收集，0 表示不收集
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // 非必填，允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin，也可以是正则
})
//#endif
....

引入(可参考 uniapp 官方npm 引入方式)

...
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
import { datafluxRum } from '@cloudcare/rum-uniapp'
// 初始化 Rum
datafluxRum.initVue3({
  datakitOrigin: '<DATAKIT ORIGIN>',// 必填，Datakit域名地址 需要在微信小程序管理后台加上域名白名单
  applicationId: '<应用 ID>', // 必填，dataflux 平台生成的应用ID
  env: 'testing', // 选填，小程序的环境
  version: '1.0.0', // 选填，小程序版本
  service: 'miniapp', //当前应用的服务名称
  trackInteractions: true, // 用户行为数据
  sampleRate: 100, //指标数据收集的百分比，100 表示全收集，0 表示不收集
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // 非必填，允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin，也可以是正则
})
//#endif
....

CDN¶

VUE 2VUE 3

下载文件本地方式引入(下载地址)

...
import Vue from 'vue'
//#ifndef H5 || APP-PLUS || APP-NVUE || APP-PLUS-NVUE
const { datafluxRum } = require('./dataflux-rum-miniapp.js'); // js文件本地路径
// 初始化 Rum
datafluxRum.init(Vue, {
  datakitOrigin: '<DATAKIT ORIGIN>',// 必填，Datakit域名地址 需要在微信小程序管理后台加上域名白名单
  applicationId: '<应用 ID>', // 必填，dataflux 平台生成的应用ID
  env: 'testing', // 选填，小程序的环境
  version: '1.0.0', // 选填，小程序版本
  service: 'miniapp', //当前应用的服务名称
  trackInteractions: true, // 用户行为数据
  sampleRate: 100, //指标数据收集的百分比，100 表示全收集，0 表示不收集
  allowedTracingOrigins: ['https://api.example.com',/https:\/\/.*\.my-api-domain\.com/],  // 非必填，允许注入trace采集器所需header头部的所有请求列表。可以是请求的origin，也可以是正则
})
//#endif
....