@buglapse/vue — это @buglapse/browser с настроенным Vue. Один вызов init() даёт:

• ошибки, которые Vue ловит в компонентах (render-функции, хуки жизненного цикла, watcher'ы, обработчики событий), — они никогда не доходят до window.onerror, так что один браузерный SDK их не видит;
• текущий маршрут в каждом событии — тегом route и контекстом route;
• с роутером — трейсы переходов от первого guard'а роутера, названные по маршруту (/users/:id), с редиректами и отменёнными переходами.

Установка

Пока SDK не опубликован в публичном npm, пакеты @buglapse/* раздаёт сам Buglapse. Один раз укажите scope в .npmrc рядом с package.json:

@buglapse:registry=https://app.buglapse.com/npm/

npm install @buglapse/vue

Нужен vue 3, а для возможностей роутера — vue-router 4 или новее.

Подключение

Вызовите init() до монтирования приложения:

import { createApp } from 'vue'
import { init } from '@buglapse/vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

init({
    app,
    router,
    dsn: '{dsn}',
    environment: 'production',
    release: '1.4.2',
})

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

init() принимает все опции init() браузерного SDK плюс:

Опция	Тип	По умолчанию	Описание
app	App	—	Приложение. Обязательно
router	Router	—	Экземпляр vue-router. Без него настраиваются только ошибки
tracing	BrowserTracingConfig | false	{}	Опции browserTracingIntegration, которая добавляется при наличии router; false выключает трейсинг
routeLabel	(route) => string	см. Роутер	Как называется маршрут
attachProps	boolean	false	Отправлять props упавшего компонента вместе с ошибкой

Пакет реэкспортирует весь браузерный API, так что импортируйте всё из одного места:

import { captureException, log, setUser, span } from '@buglapse/vue'

Интеграции по-прежнему берутся из @buglapse/browser/integrations и передаются в integrations как обычно. Без router трейсинг не добавляется; чтобы трейсить такое приложение, передайте browserTracingIntegration() сами.

Ошибки

init() оборачивает app.config.errorHandler. Ошибка, пойманная Vue, отправляется как необработанная (она роняет сессию) с контекстом vue:

Ключ
vue.component	Имя компонента — его name, имя файла <script setup> или имя файла
vue.lifecycle_hook	Где Vue её поймал: render function, mounted hook, watcher callback, … (в продакшен-сборке Vue вместо этого даёт ссылку на свой справочник ошибок)
vue.props.*	Props компонента, только с attachProps: true. Строки, числа и булевы отправляются как есть, остальное — своим видом ([object], [Array(3)])

Обработчик, заданный в app.config.errorHandler до init(), по-прежнему вызывается — после того как ошибка поймана. Без него ошибка пишется через console.error, как Vue делает в продакшене.

Ошибки вне компонентов (колбэк setTimeout, отклонённый промис) по-прежнему ловят глобальные обработчики браузерного SDK.

Дальше

• Роутер — контекст маршрута и трейсы переходов;
• Nuxt — ручная настройка в приложении на Nuxt 3;
• всё остальное — логи, спаны, сессии, запись — относится к браузерному SDK.