Buglapse

Проект в Buglapse определяется DSN — адресом вида https://{key}@{host}. Он лежит в Настройки → Общие проекта. DSN разрешает только отправлять события, читать по нему ничего нельзя, поэтому его не нужно прятать в браузерном коде.

ПриложениеКак подключать
Сайт без сборки или любой фронтендScript-тег
Фронтенд со сборщиком (Vite, webpack)npm: @buglapse/browser
Vue 3npm: @buglapse/vue
Nuxt 3Плагин с @buglapse/vue
Node.js: API, воркеры, скриптыnpm: @buglapse/node
Уже подключён Sentry SDK (PHP, Python, Go, мобильные…)Смените DSN
Другой языкСвой SDK по протоколу

Script-тег ​

Самый простой путь: ничего не нужно собирать. Готовый сниппет со всеми настройками лежит в Настройки → Скрипт загрузчика:

html
<script
    src="https://app.buglapse.com/cdn/{project-token}/buglapse.min.js"
    data-environment="production"
    data-release="1.4.2"
    async
></script>

DSN уже вшит в скрипт, вызывать init() не нужно. Сразу после загрузки ловятся необработанные ошибки и отмены промисов, и учитываются сессии. Остальное — логи консоли, трейсинг, запись сессий, фильтры — включается переключателями на той же странице. Изменения применяются при следующей загрузке страницы, сниппет менять не нужно.

Методы SDK доступны через глобальный объект: Buglapse.captureException(error), Buglapse.setUser({ id }).

npm-пакеты ​

Пакеты @buglapse/* раздаёт сам Buglapse. Один раз укажите registry в .npmrc рядом с package.json:

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

Дальше пакеты ставятся и обновляются как обычно.

Браузер ​

bash
npm install @buglapse/browser
ts
import { init } from '@buglapse/browser'

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

Вызовите init() как можно раньше — до остального кода приложения. Интеграции (консоль, трейсинг, запись сессий) при установке из npm подключаются в коде, а не в панели, — см. справочник Browser SDK.

Vue ​

bash
npm install @buglapse/vue
ts
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}' })

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

Так ловятся ошибки внутри компонентов, к каждому событию добавляется текущий маршрут, а переходы роутера записываются как трейсы. Подробнее — в справочнике Vue SDK.

Nuxt ​

Модуля для Nuxt пока нет. Подключите @buglapse/vue в клиентском плагине:

ts
// plugins/buglapse.client.ts
import { init } from '@buglapse/vue'

export default defineNuxtPlugin((nuxtApp) => {
    init({
        app: nuxtApp.vueApp,
        router: useRouter(),
        dsn: useRuntimeConfig().public.buglapseDsn,
    })
})

Серверную часть (Nitro) подключайте через @buglapse/node. Детали — на странице Nuxt.

Node.js ​

bash
npm install @buglapse/node
ts
import { init } from '@buglapse/node'
import { httpServerIntegration, nodeContextIntegration } from '@buglapse/node/integrations'

init({
    dsn: process.env.BUGLAPSE_DSN,
    environment: process.env.NODE_ENV,
    release: process.env.GIT_SHA,
    integrations: [httpServerIntegration(), nodeContextIntegration()],
})

Нужен Node 18.19 или новее. Вызовите init() первой строкой точки входа, до импорта остального приложения. Без интеграций SDK ловит только падения процесса. Ошибки, которые перехватил фреймворк (Express, Fastify), нужно передать в captureException() из его обработчика ошибок — см. Ошибки в Node.

Короткоживущие процессы

Скрипт, CLI-команда или serverless-функция должны вызвать await flush() перед выходом, иначе последние события не успеют уйти.

Проверьте подключение ​

Отправьте тестовую ошибку:

ts
Buglapse.captureException(new Error('Проверка Buglapse'))   // script-тег
captureException(new Error('Проверка Buglapse'))            // npm

Через несколько секунд она появится в разделе Исключения проекта. Если не появилась — см. Не приходят события.

Что дальше ​