mon-reactive-sdk

前端监控SDK - 支持页面浏览、JS错误、API请求、资源错误监控

功能特性

- 页面浏览监控：自动记录页面访问次数、停留时间
- JS错误监控：捕获运行时错误、Promise错误
- API请求监控：跟踪HTTP请求性能、成功率
- 资源错误监控：监控静态资源加载失败
- 多平台支持：H5、Vue、React、uni-app、微信小程序
- 三种版本选择：Basic、Standard、Premium

安装

``bash


npm

npm install mon-reactive-sdk

yarn

yarn add mon-reactive-sdk

pnpm

pnpm add 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 dev

Windows (命令提示符)

set NODE_OPTIONS=--openssl-legacy-provider && npm run dev

Windows (PowerShell)

$env:NODE_OPTIONS="--openssl-legacy-provider" && npm run dev
`

#### 方法二：降级 Node.js 版本

暂时切换到 Node.js v16 或更低版本运行项目。

#### 方法三：更新 webpack 配置

如果使用 webpack 配置，可以在 webpack 配置文件中添加：

``javascript
// webpack.config.js
module.exports = {
// 其他配置...
node: {
crypto: true,
stream: true
}
}

许可证

MIT