Buglapse

Браузерный SDK Buglapse ловит на странице ошибки, логи, трейсы, метрики и (по желанию) записывает сессии. Проект определяется DSN (https://{key}@{host}) — он лежит в Настройки → Общие проекта; готовый сниппет со script-тегом — в Настройки → Скрипт загрузчика.

Установка ​

Ничего собирать не нужно — один script-тег, который эта панель отдаёт свежим на каждый запрос, с уже вшитыми текущими переключателями Настройки → Скрипт загрузчика проекта:

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

Он инициализируется сам при загрузке: бандл с этого адреса уже содержит DSN проекта, так что передавать больше ничего не нужно. Два необязательных атрибута задают частые настройки прямо в теге:

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

Всё, что сверх автоматического перехвата ошибок и сессий, — перехват консоли, контекст устройства, запись сессий, дедупликация, входящие фильтры и другое — включается в Настройки → Скрипт загрузчика, а не в этом сниппете. Переключатель, изменённый там, вступает в силу при следующей загрузке этого скрипта на вашем сайте, без передеплоя и без изменения самого тега.

npm-пакет ​

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

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

Дальше ставьте как обычно — npm update подхватывает новые версии, как у любой зависимости:

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

init({
    dsn: '{dsn}',
})

Оба способа дают один и тот же API. Script-тег создаёт глобальный объект Buglapse (Buglapse.captureException(error), Buglapse.log.info(...), ...); npm-пакет экспортирует те же методы по имени (captureException(error), log.info(...), ...) — каждый пример ниже работает с любым из них, если заменить Buglapse. на соответствующий импорт.

Что работает сразу ​

Сразу после init() (или как только загрузился script-тег) необработанные ошибки уже ловятся — необработанные исключения и отклонённые промисы, без дополнительной настройки, — а каждый визит учитывается как сессия для доли без падений. Больше ничего пока не включено: перехват консоли, контекст устройства, запись сессий и остальное — встроенные интеграции, которые вы включаете по необходимости, — см. Интеграции.

Первое событие вручную ​

Автоматический перехват покрывает необработанные ошибки; о пойманной ошибке или хлебной крошке перед ней сообщите так:

ts
Buglapse.addBreadcrumb({ type: 'ui.click', level: 'info', message: 'Clicked "Pay" button' })

try {
    await pay()
} catch (error) {
    Buglapse.captureException(error)
}

Откройте раздел Исключения проекта — через несколько секунд оно появится.