@zhaogyna/vue

Vue 2 / Vue 3 适配包，重导出 @zhaogyna/browser 全部 API + Vue 专有函数。

兼容性

| Vue 版本 | 最低版本 | 说明 | |----------|----------|------| | Vue 3.x | 3.0.0 | 完整支持 | | Vue 2.x | 2.7.0 | 支持（Vue 2.7 回植了 Composition API，含 onErrorCaptured） | | Vue 2.6 及以下 | — | 不支持（缺少 onErrorCaptured 组合式钩子） |

| Vue Router 版本 | 说明 | |-----------------|------| | Vue Router 4.x | 完整支持 | | Vue Router 3.x | 支持（afterEach / fullPath / name 均兼容） |

安装

npm install @zhaogyna/vue

peerDependencies: vue >= 2.7.0，vue-router >= 3.0.0（可选）

本包已内含 @zhaogyna/browser，无需重复安装。

快速开始

Vue 3 项目

import { createApp } from 'vue'
import { init, setupVueErrorHandler, setupVueRouterBreadcrumb } from '@zhaogyna/vue'
import router from './router'
import App from './App.vue'

init({
  dsn: 'https://monitor.example.com/api/envelope',
  release: '1.0.0',
  environment: 'production',
})

const app = createApp(App)
setupVueErrorHandler(app)
setupVueRouterBreadcrumb(router)
app.use(router)
app.mount('#app')

Vue 2.7 项目

import Vue from 'vue'
import { init, setupVueErrorHandler, setupVueRouterBreadcrumb } from '@zhaogyna/vue'
import router from './router'

init({
  dsn: 'https://monitor.example.com/api/envelope',
  release: '1.0.0',
  environment: 'production',
})

// Vue 2 传入 Vue 构造函数（而非 App 实例）
setupVueErrorHandler(Vue)
setupVueRouterBreadcrumb(router)

完整配置项

与 @zhaogyna/browser 完全一致，参见 @zhaogyna/browser 配置项。

Vue 专有 API

setupVueErrorHandler

全局错误处理器，兼容 Vue 2 和 Vue 3。

// Vue 3
import { createApp } from 'vue'
import { setupVueErrorHandler } from '@zhaogyna/vue'

const app = createApp(App)
setupVueErrorHandler(app)
app.mount('#app')

// Vue 2.7
import Vue from 'vue'
import { setupVueErrorHandler } from '@zhaogyna/vue'

setupVueErrorHandler(Vue)

| 参数 | 类型 | 说明 | |------|------|------| | app | VueAppLike | Vue 3 App 实例 或 Vue 2 构造函数（必填） |

内部行为：

• 保留用户原始的 errorHandler，在其之前调用 SDK 上报
• Vue 2 写 Vue.config.errorHandler，Vue 3 写 app.config.errorHandler
• 标记 mechanism = { type: 'vue_error_handler', handled: true, data: { info } }
• 附加 vue.component（组件名，取自 $options.name 或 $options.__name）和 vue.lifecycleHook（生命周期钩子名）到 extra

createMonitorErrorCaptured

返回 onErrorCaptured 回调函数。

<script setup>
import { onErrorCaptured } from 'vue'
import { createMonitorErrorCaptured } from '@zhaogyna/vue'

onErrorCaptured(createMonitorErrorCaptured())
</script>

无参数，返回 (err, instance, info) => boolean 函数。

内部行为：

• 标记 mechanism = { type: 'vue_error_captured', handled: true }
• 附加 vue.component 和 vue.lifecycleHook
• 返回 false 阻止错误继续向上传播

setupVueRouterBreadcrumb

Vue Router 导航面包屑，兼容 Vue Router 3.x 和 4.x。

import { setupVueRouterBreadcrumb } from '@zhaogyna/vue'

// Vue Router 3.x
import router from './router'
setupVueRouterBreadcrumb(router)

// Vue Router 4.x
import { createRouter } from 'vue-router'
const router = createRouter({ /* ... */ })
setupVueRouterBreadcrumb(router)

| 参数 | 类型 | 说明 | |------|------|------| | router | Router | Vue Router 实例（必填） |

监听 router.afterEach，路由变化自动添加 type: 'navigation' 面包屑，包含 from / to / from_name / to_name（路由名称）。

getVueMajorVersion

运行时检测 Vue 主版本号。

import { getVueMajorVersion } from '@zhaogyna/vue'

const app = createApp(App)   // Vue 3 → typeof app === 'object'
getVueMajorVersion(app)      // 3

getVueMajorVersion(Vue)      // Vue 2 → typeof Vue === 'function' → 2

| 参数 | 类型 | 说明 | |------|------|------| | app | VueAppLike | Vue 3 App 实例 或 Vue 2 构造函数 | | 返回值 | 2 \| 3 | Vue 主版本号 |

重导出的 Browser API

以下 API 从 @zhaogyna/browser 完整重导出，可直接从 @zhaogyna/vue 引入：

| API | 说明 | |-----|------| | init | 初始化 SDK | | captureException | 捕获异常 | | captureMessage | 捕获消息 | | track | 自定义埋点 | | setUser | 设置用户信息 | | setTag / setTags | 设置标签 | | setExtra / setExtras | 设置附加数据 | | setLevel | 设置级别 | | setTransaction | 设置事务名 | | setFingerprint | 设置指纹 | | addBreadcrumb / clearBreadcrumbs | 面包屑管理 | | startSpan | 开始追踪 Span | | startFunnel / trackFunnelStep / endFunnel | 漏斗分析 | | addIntegration / lazyLoadIntegration | 集成管理 | | flush / close | 刷新/关闭 SDK | | on | 生命周期监听 | | withScope / getClient | 作用域/客户端 | | createClient / getActiveClients / findClientForUrl | 多实例 | | 所有集成工厂函数 | globalErrorHandler、tryCatchWrapper、breadcrumbCollector、httpInterceptor、dedupe、trackDedupe、httpContext、inboundFilter、functionToString、browserSessionIntegration、performanceVitals、longTaskObserver、resourceObserver、pageViewTracker、clickTracker、exposureTracker、stayTracker、sessionReplay |

License

MIT