如何在Vue 3中使用组合式API和TypeScript集成Rollbar SDK？

核心背景 #

Rollbar官方文档针对Vue的集成方案基于Vue 2的Vue.prototype，Vue 3中替代方案app.config.globalProperties更适配Options API，但我们可以通过以下几种方式在Composition API中优雅集成，同时兼顾TypeScript类型支持。

方案一：通过getCurrentInstance访问全局属性 #

这种方式直接复用全局属性挂载，适合快速迁移现有代码：

1. 初始化并挂载Rollbar到全局

import { createApp } from 'vue'
import Rollbar from 'rollbar'
import App from './App.vue'

// 初始化Rollbar实例
const rollbar = new Rollbar({
  accessToken: '你的Rollbar访问令牌',
  captureUncaught: true,
  captureUnhandledRejections: true,
  environment: process.env.NODE_ENV
})

const app = createApp(App)
// 挂载到全局属性
app.config.globalProperties.$rollbar = rollbar
app.mount('#app')

2. 扩展TypeScript类型声明
   在项目的类型声明文件（如src/vite-env.d.ts或src/types/vue.d.ts）中添加：

import type Rollbar from 'rollbar'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $rollbar: Rollbar
  }
}

export {}

3. 在Composition API中使用

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const instance = getCurrentInstance()
    // 类型会被TS自动识别
    const rollbar = instance?.appContext.config.globalProperties.$rollbar

    // 示例：上报错误
    const logError = (err: Error) => {
      rollbar?.error(err)
    }

    return { logError }
  }
}

方案二：使用Provide/Inject（Composition API推荐方式） #

这种方式更符合Vue 3的依赖注入设计思想，避免直接依赖全局实例：

1. 初始化并Provide Rollbar实例

import { createApp, InjectionKey } from 'vue'
import Rollbar from 'rollbar'
import App from './App.vue'

const rollbar = new Rollbar({
  accessToken: '你的Rollbar访问令牌',
  captureUncaught: true,
  captureUnhandledRejections: true,
  environment: process.env.NODE_ENV
})

// 定义唯一的注入Key（必须为Symbol类型确保唯一性）
export const RollbarInjectionKey: InjectionKey<Rollbar> = Symbol('Rollbar')

const app = createApp(App)
// 提供Rollbar实例
app.provide(RollbarInjectionKey, rollbar)
app.mount('#app')

2. 在组件中Inject并使用

import { inject } from 'vue'
import { RollbarInjectionKey } from '../main'

export default {
  setup() {
    // 注入实例，TS会自动推导类型
    const rollbar = inject(RollbarInjectionKey)

    const handleBusinessError = () => {
      try {
        // 模拟业务逻辑错误
        throw new Error('数据请求失败')
      } catch (err) {
        rollbar?.error('业务错误：数据请求失败', err)
      }
    }

    return { handleBusinessError }
  }
}

方案三：封装为Composable函数（最高复用性） #

将Rollbar的操作封装成可复用的组合式函数，进一步简化组件内的使用：

1. 创建useRollbar组合式函数

// src/composables/useRollbar.ts
import { inject } from 'vue'
import { RollbarInjectionKey } from '../main'
import type Rollbar from 'rollbar'

export function useRollbar(): Rollbar | undefined {
  const rollbar = inject(RollbarInjectionKey)
  
  if (!rollbar) {
    console.warn('Rollbar实例未正确注入，请检查全局Provide配置')
  }

  return rollbar
}

2. 组件中直接调用使用

import { useRollbar } from '@/composables/useRollbar'

export default {
  setup() {
    const rollbar = useRollbar()

    const submitForm = () => {
      try {
        // 表单提交逻辑
        throw new Error('表单验证失败')
      } catch (err) {
        rollbar?.error('表单提交错误', {
          err,
          formData: { /* 附加表单数据 */ }
        })
      }
    }

    return { submitForm }
  }
}

额外优化：全局错误捕获 #

可以结合Vue 3的全局错误处理器，自动捕获组件内未处理的错误：

// 在main.ts中添加
app.config.errorHandler = (err, instance, info) => {
  rollbar.error('Vue组件全局错误', {
    error: err,
    componentInfo: instance?.type.name,
    errorInfo: info
  })
}

内容的提问来源于stack exchange，提问作者Ethan Franson