Table of contents
Documentation
Интеграции JavaScript/TypeScript

JavaScript/TypeScript

Hawk предоставляет отдельные SDK для браузера и для Node.js — это два разных пакета, и важно установить именно тот, который подходит вашему окружению:

  • Для браузерных приложений (включая интеграции с React, Vue, Nuxt) используется пакет @hawk.so/javascript
  • Для серверных приложений на Node.js используется отдельный пакет @hawk.so/nodejs

Установка и инициализация

Для JS/TypeScript (браузер) используется SDK @hawk.so/javascript. Базовая инициализация:

import HawkCatcher from '@hawk.so/javascript'; const hawk = new HawkCatcher({ token: 'YOUR_INTEGRATION_TOKEN', });

Экземпляр кэтчера обычно сохраняют и используют как синглтон.

Основные возможности

Глобальный отлов ошибок — SDK автоматически перехватывает необработанные ошибки в приложении и отправляет их в Hawk вместе с дополнительной информацией.

Ручная отправка событий — можно отправлять ошибки из try-catch, логи или произвольные события:

hawk.send('💰 Создан новый заказ', { orderId: 123, amount: 100, user: { id: 111, name: 'John Doe', email: 'john.doe@example.com' }, url: 'https://example.com/order/123', });

Аддоны — SDK автоматически собирает данные о браузере, ОС, URL, версии приложения.

Контекст — можно прикреплять глобально (при инициализации) или к конкретному событию:

const hawk = new HawkCatcher({ token: 'YOUR_INTEGRATION_TOKEN', context: { appName: 'My App', appEnvironment: 'development', isAdblockEnabled: true, }, });

Трекинг консоли браузера — JS SDK может перехватывать console.log/info/warn/error (до 20 последних сообщений) и прикреплять их к событиям для отладки.

Фильтрация чувствительных данных — хук beforeSend:

const hawk = new HawkCatcher({ token: 'ВАШ_ТОКЕН_ИНТЕГРАЦИИ', beforeSend(event) { if (event.payload.context.request?.headers?.Authorization) { delete event.payload.context.headers.Authorization; } if (event.title.startsWith('Script Error.')) { return false; // отмена отправки } return event; } });

Релизы и Source Maps

Для корректной отладки минифицированного кода рекомендуется настроить отправку релизов и source maps через Webpack (@hawk.so/webpack-plugin) или Vite (@hawk.so/vite-plugin) плагины — они автоматически отправляют source maps и коммиты при сборке.

Дополнительно

  • Есть готовые интеграции для React, Vue, Nuxt
  • Если нужного фреймворка нет — можно использовать совместимый Sentry DSN (Hawk поддерживает протокол Sentry SDK) или написать свой кэтчер.
previous
Начало работы
next
Браузер