前端监控SDK - 支持页面浏览、JS错误、API请求、资源错误监控
npm install mon-reactive-h5前端监控SDK - 支持页面浏览、JS错误、API请求、资源错误监控
- 页面浏览监控:自动记录页面访问次数、停留时间
- JS错误监控:捕获运行时错误、Promise错误
- API请求监控:跟踪HTTP请求性能、成功率
- 资源错误监控:监控静态资源加载失败
- 多平台支持:H5、Vue、React、uni-app、微信小程序
- 三种版本选择:Basic、Standard、Premium
``bashnpm
npm install mon-reactive-sdk
使用方法
$3
`javascript
// 引入SDK
import { createStandardSDK } from 'mon-reactive-sdk';// 初始化SDK
const sdk = createStandardSDK({
appId: 'your_app_id',
reportUrl: 'https://your-report-server.com/v1/report',
sampleRates: {
pageview: 1,
jserror: 1,
api: 0.3,
resource: 0.5
}
});
// 启动SDK
sdk.init();
`$3
`jsx
// main.jsx / main.tsx
import { createStandardSDK } from 'mon-reactive-sdk';// 初始化SDK
const sdk = createStandardSDK({
appId: 'your_app_id',
reportUrl: 'https://your-report-server.com/v1/report'
});
// 启动SDK
sdk.init();
// 将SDK实例挂载到window,方便在组件中使用
window.monitorSDK = sdk;
`$3
#### Vue 3 项目集成
`javascript
// main.js
import { createApp } from 'vue';
import { createStandardSDK } from 'mon-reactive-sdk';
import App from './App.vue';const app = createApp(App);
// 初始化SDK
const sdk = createStandardSDK({
appId: 'your_app_id',
reportUrl: 'https://your-report-server.com/v1/report'
});
// 启动SDK
sdk.init();
// 挂载到全局属性
app.config.globalProperties.$monitor = sdk;
app.mount('#app');
`#### Vue 2 项目集成
`javascript
// main.js
import Vue from 'vue';
import { createStandardSDK } from 'mon-reactive-sdk';
import App from './App.vue';// 初始化SDK
const sdk = createStandardSDK({
appId: 'your_app_id',
reportUrl: 'https://your-report-server.com/v1/report'
});
// 启动SDK
sdk.init();
// 通过Vue原型挂载到全局
Vue.prototype.$monitor = sdk;
// 创建Vue实例
new Vue({
render: h => h(App)
}).$mount('#app');
`$3
`javascript
// 在组件中使用
import Vue from 'vue';export default {
mounted() {
// 访问全局SDK实例
const monitor = this.$monitor;
// 手动上报用户行为
monitor.trackUserAction('component_mounted', {
component: 'MyComponent',
timestamp: Date.now()
});
// 手动设置用户ID
if (this.$store.state.user.id) {
monitor.setUserId(this.$store.state.user.id);
}
},
methods: {
handleClick() {
// 上报点击事件
this.$monitor.trackUserAction('button_clicked', {
button: 'submit',
formName: 'loginForm'
});
}
},
beforeDestroy() {
// 可以在这里上报组件卸载事件
this.$monitor.trackUserAction('component_destroyed', {
component: 'MyComponent'
});
}
}
`$3
`javascript
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';Vue.use(Router);
const router = new Router({
routes
});
// 路由守卫中集成SDK
router.beforeEach((to, from, next) => {
// 记录路由切换
if (Vue.prototype.$monitor) {
Vue.prototype.$monitor.trackUserAction('route_change', {
from: from.path,
to: to.path,
timestamp: Date.now()
});
}
next();
});
export default router;
`SDK版本选择
- BasicSDK:轻量版本,仅包含页面浏览和JS错误监控
- StandardSDK:标准版本,包含所有基础功能,合理的采样率设置
- PremiumSDK:高级版本,包含所有功能,更高的采样率,支持更多高级特性
`javascript
// 选择合适的版本
import { createBasicSDK, createStandardSDK, createPremiumSDK } from 'mon-reactive-sdk';// 或者使用SDK选择器
import { createSDK } from 'mon-reactive-sdk';
const sdk = createSDK({
appId: 'your_app_id',
reportUrl: 'https://your-report-server.com/v1/report',
tier: 'standard' // basic, standard, premium
});
`配置项
| 配置项 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| appId | string | 无 | 应用唯一标识,必填 |
| reportUrl | string | 无 | 上报地址,必填 |
| version | string | - | 应用版本号,可选。如果不提供,PC端会尝试从process.env.VUE_APP_VERSION获取,小程序和APP会使用各自平台的版本号 |
| sampleRates | object | - | 各类型数据的采样率 |
| isMiniProgram | boolean | false | 是否为小程序环境 |
| isApp | boolean | false | 是否为APP环境 |
| platform | string | - | 平台标识 |
| userId | string | - | 用户ID,可后续通过setUserId更新 |
实例方法
$3
启动SDK,初始化所有监控$3
设置用户ID,用于用户行为跟踪$3
手动跟踪用户行为$3
手动上报页面浏览数据$3
手动上报JS错误$3
手动上报API请求数据$3
手动上报资源错误更多文档
详细使用说明请参考 SDK集成指南
浏览器兼容性
SDK 兼容所有现代浏览器,包括 Chrome、Firefox、Safari、Edge 等。同时也兼容 IE 11 浏览器(需要 polyfill 支持)。
Vue 2 项目常见问题解决
$3
在 Vue 2 项目中安装 SDK 后,如果遇到以下错误:
`
Error: error:0308010C:digital envelope routines::unsupported
`这是由于 Node.js 版本过高(v17+)与 webpack 4(Vue 2 常用版本)的兼容性问题导致的。可以通过以下方法解决:
#### 方法一:设置环境变量
在项目根目录创建
.env 文件,添加以下内容:`
NODE_OPTIONS=--openssl-legacy-provider
`或者在启动命令前添加环境变量:
`bash
Linux/Mac
NODE_OPTIONS=--openssl-legacy-provider npm run devWindows (命令提示符)
set NODE_OPTIONS=--openssl-legacy-provider && npm run devWindows (PowerShell)
$env:NODE_OPTIONS="--openssl-legacy-provider" && npm run dev
`#### 方法二:降级 Node.js 版本
暂时切换到 Node.js v16 或更低版本运行项目。
#### 方法三:更新 webpack 配置
如果使用 webpack 配置,可以在 webpack 配置文件中添加:
``javascript