Инструменты разработчика браузера

Работа с STOMP.js в браузере почти всегда опирается на стандартные инструменты отладки WebSocket-соединений, встроенные в DevTools современных браузеров. Основной поток сообщений STOMP проходит поверх WebSocket, поэтому диагностика разделяется на два уровня: транспортный (WebSocket) и протокольный (STOMP-фреймы).

Network-панель и WebSocket-сессии

Вкладка Network в DevTools позволяет отслеживать установку и работу WebSocket-соединений, через которые функционирует STOMP.

При открытии соединения STOMP.js инициирует WebSocket handshake, который отображается как запрос с типом WS.

После установки соединения:

  • появляется отдельная запись WebSocket-соединения;
  • внутри доступна вкладка Messages (или Frames);
  • фиксируются входящие и исходящие кадры.

Ключевой момент заключается в том, что STOMP не виден напрямую как отдельный протокол в Network — браузер показывает только WebSocket-уровень. Все STOMP-команды (CONNECT, SEND, SUBSCRIBE, MESSAGE, DISCONNECT) отображаются как текстовые frames внутри соединения.

Структура WebSocket frames в STOMP

STOMP-фрейм имеет текстовую структуру, которую удобно наблюдать в DevTools:

  • команда (например, CONNECT, SEND, SUBSCRIBE)
  • заголовки
  • пустая строка-разделитель
  • тело сообщения

Пример CONNECT-фрейма:

CONNECT
accept-version:1.2
host:localhost
heart-beat:10000,10000

Пример отправки сообщения:

SEND
destination:/app/chat
content-type:application/json

{"text":"hello"}

DevTools позволяет видеть эти данные в сыром виде, что делает возможным диагностику протокольных ошибок без дополнительного логирования в коде.

Использование вкладки Messages

Во вкладке Messages WebSocket-соединения отображаются все события в хронологическом порядке:

  • исходящие STOMP-команды (от клиента)
  • входящие сообщения от брокера
  • heartbeat-фреймы (если включены)

Полезные особенности:

  • фильтрация по направлению (sent / received)
  • просмотр payload без форматирования
  • сохранение истории сообщений при активном соединении

Heartbeat-фреймы часто выглядят как пустые сообщения или одиночные символы \n. Их наличие подтверждает корректную работу keep-alive механизма STOMP.

Отладка STOMP.js через console.debug

STOMP.js предоставляет встроенный механизм логирования через callback debug.

Включение логов:

const client = new StompJs.Client({
  brokerURL: 'ws://localhost:8080/ws',
  debug: function (str) {
    console.log(str);
  }
});

Логи содержат:

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

Типичный поток логов позволяет сопоставить действия приложения с WebSocket-трафиком в Network.

Сопоставление DevTools и STOMP логики

При диагностике важно соотносить три уровня:

  1. DevTools Network (WebSocket frames)
  2. STOMP debug логирование
  3. Логика подписок и отправки в приложении

Типичный сценарий анализа:

  • отправка SUBSCRIBE в коде
  • проверка появления SUBSCRIBE frame в Network
  • подтверждение доставки сообщений через MESSAGE
  • сверка destination топиков

Несовпадение между уровнями обычно указывает на ошибку маршрутизации или брокера.

Анализ подписок и destination

STOMP работает через модель подписок на destination. В DevTools нет прямой визуализации подписок, поэтому диагностика выполняется косвенно:

  • проверка отправленного SUBSCRIBE frame
  • наблюдение входящих MESSAGE frames
  • анализ заголовка destination в сообщении

Пример входящего сообщения:

MESSAGE
subscription:sub-0
destination:/topic/chat
message-id:12345

{"text":"hello"}

Если MESSAGE не приходит, но SUBSCRIBE присутствует, проблема находится вне клиента (брокер, маршрут, ACL, очередь).

Heartbeat и тайм-ауты соединения

В STOMP.js heartbeat задаётся как пара значений:

heart-beat:10000,10000

Первое значение — отправка клиентом, второе — ожидание от сервера.

В DevTools это проявляется как:

  • регулярные пустые WebSocket frames
  • отсутствие разрыва соединения при простое

Если heartbeat не работает:

  • соединение может выглядеть «живым» в UI
  • но фактически сервер уже разорвал сессию
  • сообщения перестают приходить без явной ошибки

Типовые ошибки, видимые через DevTools

Отсутствие CONNECTED

Если в Network виден CONNECT, но нет CONNECTED, значит:

  • брокер не принимает соединение
  • ошибка аутентификации
  • неверный endpoint WebSocket

Ошибка маршрутизации SEND

Симптом:

  • SEND присутствует в frames
  • ответа нет

Причины:

  • неправильный destination
  • отсутствие подписчиков на стороне сервера
  • отсутствие очереди/топика

Потеря подписки

Симптом:

  • SUBSCRIBE отправлен
  • некоторое время сообщения приходят
  • затем прекращаются без ошибок

Причины:

  • разрыв heartbeat
  • пересоздание WebSocket без восстановления подписок
  • некорректная логика reconnect

Инструменты консоли для ручной диагностики

В ряде случаев полезно вмешательство через console:

  • временное логирование client.onConnect / onDisconnect
  • вывод списка активных подписок
  • перехват отправки сообщений через обёртку publish/send

Пример перехвата:

const originalSend = client.publish;

client.publish = function (frame) {
  console.log('SEND', frame);
  return originalSend.call(this, frame);
};

Такой подход позволяет сопоставить вызовы приложения с фактическим WebSocket-трафиком.

Инспекция reconnect-поведения

STOMP.js может автоматически переподключаться после разрыва соединения. В DevTools это проявляется как:

  • повторный CONNECT
  • новая WebSocket-сессия
  • сброс подписок

Важно отслеживать:

  • частоту reconnect-циклов
  • наличие повторной отправки SUBSCRIBE
  • состояние очередей сообщений в момент реконнекта

Отсутствие восстановления подписок часто приводит к «тихим» ошибкам без видимых исключений.

Работа с несколькими соединениями

При наличии нескольких STOMP-клиентов:

  • DevTools показывает несколько WebSocket-сессий
  • важно различать их по URL и времени создания
  • сообщения могут распределяться между разными соединениями

Ошибка конфигурации часто выражается в том, что SEND выполняется в одном соединении, а SUBSCRIBE — в другом.

Практическая интерпретация сетевых данных

Корректный анализ STOMP в DevTools опирается на последовательность:

  • CONNECT отправлен
  • CONNECTED получен
  • SUBSCRIBE зарегистрирован
  • MESSAGE начинает поступать
  • heartbeat поддерживает соединение

Любое отклонение от этой цепочки фиксируется на уровне Network как первичный источник диагностики, а STOMP.js debug-лог используется для уточнения внутренней логики клиента.

Оглавление