@fz-firefly/vue

萤火虫 SDK 的 Vue 2 / Vue 3 一键接入包。安装后只需要调用一次 initFirefly，内部会自动创建客户端、接入 Vue 错误处理并绑定路由面包屑。

@fz-firefly/web、@fz-firefly/core、@fz-firefly/vue-plugin 都是这个包的内部依赖，用户不需要单独安装或 import。

安装

pnpm add @fz-firefly/vue

Vue 3

import { createApp } from 'vue'
import { initFirefly } from '@fz-firefly/vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

initFirefly({
  app,
  router,
  dsn: import.meta.env.VITE_FIREFLY_DSN,
  endpoint: import.meta.env.VITE_FIREFLY_ENDPOINT,
  environment: import.meta.env.PROD ? 'production' : 'development',
  release: import.meta.env.VITE_APP_RELEASE,
})

app.use(router)
app.mount('#app')

Vue 2

import Vue from 'vue'
import { initFirefly } from '@fz-firefly/vue'
import App from './App.vue'
import router from './router'

initFirefly({
  Vue,
  router,
  dsn: process.env.VUE_APP_FIREFLY_DSN,
  endpoint: process.env.VUE_APP_FIREFLY_ENDPOINT,
  environment:
    process.env.NODE_ENV === 'production' ? 'production' : 'development',
  release: process.env.VUE_APP_RELEASE,
})

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')

手动上报

初始化后，组件里可以直接使用：

this.$firefly.captureException(new Error('something went wrong'))
this.$firefly.captureMessage('checkout failed', 'warning')

initFirefly 的返回值也可以拿到 client：

const firefly = initFirefly({ app, ... })
firefly.client.captureException(error)

行为

• 捕获 Vue 2 / Vue 3 组件错误，并保留业务原有的 errorHandler。
• 把客户端挂到 Vue.prototype.$firefly / app.config.globalProperties.$firefly。
• 传入 router 时：
  • onError 上报路由错误；
  • afterEach 记录导航面包屑，并补报导航失败。
• 不传 dist 时默认使用 h5。
• 默认安装 web 全局错误钩子、资源错误钩子和 pagehide 冲刷。