帮助中心 > 技术文档 > 客户端SDK > Web 性能监控 SDK > SDK接入

1. 参数

属性 类型 默认值 版本 说明
serverUrl string 必填,数据接收地址
errorCapture boolean true 是否采集和上报页面错误信息
performance boolean true 是否开启性能监控功能
showLog boolean false 是否在浏览器控制台打印上报的数据
sendType ajax image beacon ajax 4.0.0起支持 数据上报方式,与Web JS SDK的一致
batchSend boolean|object false 4.0.0起支持 是否批量发送数据,与Web JS SDK的一致
dataSendTimeout number 3000 4.0.0起支持 数据发送超时时间:设定时间内未完成发送将强制取消请求,单位毫秒
openPromiseCapture boolean false 4.0.0起支持 是否开启 Promise 错误监控功能。通常,Promise 错误多源于接口调用,对于接口错误,如果HTTP 状态码不在 200~300 范围内,SDK默认会上报这些错误,但是可能存在重复上报的情况。
performanceOff [‘basic’,’vitals’,’longtask’] [‘basic’,’vitals’,’longtask’] 4.0.0起支持 设置 performance 个别功能。
1.basic:获取浏览器的导航信息,包括页面加载的各个阶段耗时和重定向次数等详细数据。
2.vitals:web-vitals依赖包,专注于评估网站性能,涵盖加载速度、交互响应及视觉稳定性等方面。
3.longtask:长任务,获取哪些任务执行耗费了 50 毫秒或更多时间。
sourcemapVersion string 需与构建的 sourcemap 文件版本号一致,精准定位错误。
plugins 4.0.0起支持 插件系统,v4版本开始支持用户自定义插件,具体插件开发规范参考插件系统
vue 4.0.0起支持 Vue实例 vue项目传入的Vue实例,用于 errorHandler 拦截收集错误
beforeSend function 4.0.0起支持 拦截器,用于对上报数据进行过滤,返回 null 或 undefined 则不发送,返回其他object类型数据则替换为返回的数据
globalCallback function 4.0.0起支持 上报数据后,会触发该函数

2. 配置示例

以vue+性能监控SDK模块化引入为例:

// 这是项目入口文件:main.js
import { createApp } from 'vue';
import hinaEpm from 'hina-cloud-js-monitor'
import App from './App.vue';

const app = createApp(App);

hinaEpm.init({
  serverUrl: '数据接收地址',
  errorCapture: true,
  performance: true,
  showLog: false,
  sendType: "ajax",
  batchSend: false,
  openPromiseCapture: false,
  performanceOff: ['basic','vitals','longtask'], // 上报所有类型的性能监控数据['basic','vitals','longtask']
  sourcemapVersion: "1.0.0",
  vue: app,
  beforeSend: (data) => {
    return data
  },
  globalCallback: (...args) => {
    console.log(args)
  }
})
作者:张永健  创建时间:2025-01-10 19:58
最后编辑:张永健  更新时间:2025-04-01 16:17