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

JavaScript

В этой инструкции рассмотрим, как отслеживать ошибки в JavaScript и TypeScript приложениях с помощью Хоука. Вы сможете получать уведомления возникающих проблемах, которые будут сопровождаться дополнительной информацией: адресом, фрагментом кода, параметрами запроса. Это существенно ускоряет отладку, снижает время реакции на баги и улучшает стабильность продукта.

Шаги

  1. Зарегистрируйтесь и получите Интеграционный Токен
  2. Установите пакет
  3. Добавьте инициализацию пакета
  4. Настройте отправку Source Maps (рекомендуется)

Установка

npm install @hawk.so/javascript --save

или

yarn add @hawk.so/javascript

Или подключите через CDN

<script src="https://cdn.jsdelivr.net/npm/@hawk.so/javascript@3/dist/hawk.min.js" async></script>

Инициализация

Импортируйте и создайте экземпляр HawkCatcher с вашим токеном:

import HawkCatcher from '@hawk.so/javascript'; const hawk = new HawkCatcher({   token: 'ВАШ_ТОКЕН_ИНТЕГРАЦИИ' });

Вы также можете передать токен в виде строки напрямую:

const hawk = new HawkCatcher('ВАШ_ТОКЕН_ИНТЕГРАЦИИ');

Если используете CDN, инициализировать можно прямо в атрибуте onload:

<script src="https://cdn.jsdelivr.net/npm/@hawk.so/javascript@3/dist/hawk.min.js" onload="const hawk = new HawkCatcher({token: 'ВАШ_ТОКЕН_ИНТЕГРАЦИИ'})"></script>

Дополнительные настройки

При инициализации HawkCatcher можно передать такие параметры:

Параметр Тип Описание
token string обязательный интеграционный токен проекта  
release string | number идентификатор сборки (нужен для поддержки source maps)
user { id, name?, image?, url? } данные текущего пользователя
context object дополнительные данные, которые будут отправляться с каждым событием
vue Vue constructor включает обработку ошибок во Vue-приложениях
disableGlobalErrorsHandling boolean отключить глобальное отслеживание ошибок
disableVueErrorHandler boolean отключить обработчик ошибок Vue
consoleTracking boolean перехват console.log, console.error и др
beforeSend (event) (function) хук, позволяющий модифицировать или фильтровать событие перед отправкой

Проверка работы

Для теста можно вызвать метод .test():

hawk.test();

Отправка ошибок вручную

Если вы хотите вручную отправлять ошибки (например, в try/catch), используйте метод .send()

hawk.send(new Error('Что-то пошло не так'), { debugInfo: 'текущий пользователь — аноним' });

Интеграция с фреймворками

Пакет @hawk.so/javascript поддерживает работу с реактивными фреймворками из коробки.

  • Vue — вам нужно прикрепить инстанс приложения.
  • React — поддерживается по умолчанию

Отправка source maps

☝️
Совет
Настоятельно рекомендуем настроить отправку source maps в Хоука при сборке приложения. Без этого информация об ошибках будет выглядеть неполноценно, код и названия функций будут минифицированы, дебаг затруднен.

В современных проектах код обычно минифицируется и собирается в бандлы. В результате:

  • теряются исходные имена функций и переменных;
  • структура файлов становится нечитаемой.

Отправка Source maps в Хоука позволяет:

  • восстанавливать оригинальные имена функций и переменных;
  • показывать точные номера строк и файлов в отчётах об ошибках.

Для расшифровки стектрейсов из минифицированного кода:

  1. Передавайте sourcemap-файлы вместе с релизом (при сборке) — для этого можно использовать Hawk Vite Plugin или Hawk Webpack Plugin
  2. Укажите параметр release при инициализации HawkCatcher.

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

Хоук автоматически фильтрует пароли, заголовки, токены, номера карт и прочую чувствительную информацию на своей стороне. Вы также можете удалить любые данные из ивента перед отправкой с помощью beforeSend():

const hawk = new HawkCatcher({ token: 'ВАШ_ТОКЕН_ИНТЕГРАЦИИ', beforeSend(event) { // Удаляем адрес пользователя if (event.payload.context.ip) { delete event.payload.context.ip; } // Для отмены отправки, вернем false if (event.title.startsWith('Script Error.')) { return false; } return event; } });

Полезные ссылки

previous
Интеграции
next
Документы