mon-reactive-sdk

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

功能特性

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

安装

# npm
npm install mon-reactive-sdk

# yarn
yarn add mon-reactive-sdk

# pnpm
pnpm add mon-reactive-sdk

使用方法

1. 基础使用

// 引入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();

2. React项目集成

// 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项目集成

Vue 3 项目集成

// 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 项目集成

// 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');

4. Vue 2 项目中的使用示例

// 在组件中使用
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'
    });
  }
}

5. Vue 2 路由集成

// 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：高级版本，包含所有功能，更高的采样率，支持更多高级特性

// 选择合适的版本
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更新 |

实例方法

sdk.init()

启动SDK，初始化所有监控

sdk.setUserId(userId)

设置用户ID，用于用户行为跟踪

sdk.trackUserAction(actionName, params)

手动跟踪用户行为

sdk.reportPageView(data)

手动上报页面浏览数据

sdk.reportJSError(error)

手动上报JS错误

sdk.reportApi(data)

手动上报API请求数据

sdk.reportResourceError(data)

手动上报资源错误

更多文档

详细使用说明请参考 SDK集成指南

浏览器兼容性

SDK 兼容所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。同时也兼容 IE 11 浏览器（需要 polyfill 支持）。

Vue 2 项目常见问题解决

解决 "digital envelope routines::unsupported" 错误

在 Vue 2 项目中安装 SDK 后，如果遇到以下错误：

Error: error:0308010C:digital envelope routines::unsupported

这是由于 Node.js 版本过高（v17+）与 webpack 4（Vue 2 常用版本）的兼容性问题导致的。可以通过以下方法解决：

方法一：设置环境变量

在项目根目录创建 .env 文件，添加以下内容：

NODE_OPTIONS=--openssl-legacy-provider

或者在启动命令前添加环境变量：

# 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 配置文件中添加：

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

## 许可证

[MIT](./LICENSE)