@evertro/monitor-browser

Evertro Monitor PC Web 独立入口 — 无 Taro 依赖

概述

本包是面向纯 PC Web 项目（非 Taro 框架）的 SDK 入口。与 @evertro/monitor-taro 的区别是：

| 特性 | @evertro/monitor-taro | @evertro/monitor-browser | |------|------------------------|---------------------------| | 目标环境 | Taro 小程序 + H5 | 纯 PC Web | | 依赖 Taro | 是 | 否 | | 加载的插件 | 自动检测平台 | 仅 Web 插件 | | 传输层 | WeappTransport / H5Transport | 仅 H5Transport | | React ErrorBoundary | 提供 | 不提供 |

如果你的项目是纯 Vue/React PC Web 应用（不使用 Taro），应选择本包。

安装

pnpm add @evertro/monitor-browser

快速开始

import { BrowserMonitor } from '@evertro/monitor-browser';

BrowserMonitor.init({
  appId: 'my-pc-web-app',
  dsn: 'https://monitor-api.example.com/v1/report',
  environment: 'production',
  debug: false,
});

// 设置用户信息
BrowserMonitor.setUser({
  userId: '100',
  isLogin: true,
  sessionId: 'xxx',
});

模块说明

monitor.ts — BrowserMonitor 主类

与 EvertroMonitor API 完全一致，但内部只加载 Web 平台插件。

初始化流程

BrowserMonitor.init(config)
  │
  ├── 1. 通过 navigator.userAgent 获取设备信息
  │
  ├── 2. 创建引擎
  │     └── new CollectorEngine(config)
  │
  ├── 3. 加载 Web 插件
  │     ├── WebErrorPlugin
  │     ├── WebBreadcrumbPlugin
  │     ├── WebPerformancePlugin
  │     ├── WebNetworkPlugin
  │     └── WebWhiteScreenPlugin
  │
  ├── 4. 创建 H5Transport
  │     └── new H5Transport(config.dsn)
  │
  ├── 5. 创建上报队列
  │     └── new ReportQueue(transport, config, ...)
  │
  ├── 6. 连接引擎到上报队列
  │
  ├── 7. 初始化引擎
  │
  └── 8. 启动上报队列

公开 API

| 方法 | 描述 | |------|------| | BrowserMonitor.init(config) | 初始化 SDK | | BrowserMonitor.setUser(userContext) | 设置用户信息 | | BrowserMonitor.addBreadcrumb(crumb) | 手动添加操作链路 | | BrowserMonitor.captureException(error) | 手动上报异常 | | BrowserMonitor.captureMessage(message) | 手动上报消息 | | BrowserMonitor.flush() | 立即 flush 队列 | | BrowserMonitor.destroy() | 销毁 SDK |

Vue 2 集成

import { BrowserMonitor } from '@evertro/monitor-browser';

// main.js
BrowserMonitor.init({
  appId: 'my-vue2-app',
  dsn: 'https://monitor-api.example.com/v1/report',
});

// Vue 全局错误处理器自动捕获
Vue.config.errorHandler = (err, vm, info) => {
  BrowserMonitor.captureException(err);
};

Vue 3 集成

import { BrowserMonitor } from '@evertro/monitor-browser';

const app = createApp(App);

BrowserMonitor.init({
  appId: 'my-vue3-app',
  dsn: 'https://monitor-api.example.com/v1/report',
});

app.config.errorHandler = (err, instance, info) => {
  BrowserMonitor.captureException(err);
};

React 集成

import { BrowserMonitor } from '@evertro/monitor-browser';

BrowserMonitor.init({
  appId: 'my-react-app',
  dsn: 'https://monitor-api.example.com/v1/report',
});

// 配合 React ErrorBoundary 使用
class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    BrowserMonitor.captureException(error);
  }
  render() {
    return this.props.children;
  }
}

与旧 @tracking-sdk/apm 的迁移对照

如果你正在从旧 @tracking-sdk/apm 迁移到本 SDK：

// 旧 SDK
import { EventTrack } from '@tracking-sdk/apm';
EventTrack.init({ REQ_AGENT: 'my-app', ACCOUNT_KEY: 'user_info' }, router, Vue);
EventTrack.reportEventTrack('错误事件', { errorMessage: '...' });
EventTrack.getBehaviorInfo();

// 新 SDK
import { BrowserMonitor } from '@evertro/monitor-browser';
BrowserMonitor.init({ appId: 'my-app', dsn: '...', environment: 'production' });
BrowserMonitor.captureException(new Error('...'));
// 操作链路（breadcrumbs）自动采集，无需手动管理

上报结构已对齐： 新 SDK 输出的 ReportPayload 与旧 SDK 的 pushTrack() 结构一致（扁平 Base + events[eventId/eventName/eventCode/attr]），后端无需改动。

依赖关系

@evertro/monitor-types
@evertro/monitor-core
@evertro/monitor-transport
@evertro/monitor-web        ←── Web 平台插件
        ↓
@evertro/monitor-browser    ←── PC Web 独立入口

导出一览

export { BrowserMonitor } from './monitor';