Remote Console для мониторинга логов web-приложения

Дата публикации: 2024-02-24

Как разработчику прочитать логи web-приложения, работающего на мобильном телефоне? В desktop-браузере можно открыть DevTools и консоль, но на смартфоне это неудобно.

Самое простое решение — отправлять логи на сервер или агрегатор. В начале приложения достаточно заменить console.log:

const orig = console.log;
console.log = function () {
  orig.apply(console, arguments);
  navigator.sendBeacon(URL, arguments[0]);
};

Все сообщения console.log(...) будут отправляться по указанному URL. Я использую Beacon API, потому что браузер не ожидает ответа: сообщения идут только в одну сторону.

Остаётся собрать логи и показать их в читаемом виде. Для этого я написал небольшое приложение Remote Console. Оно принимает сообщения с любого адреса:

navigator.sendBeacon('https://console.wiredgeese.com/log/', 'any message');

и сразу передаёт их через WebSocket всем, кто сейчас смотрит консоль. Сервер ничего не хранит: всё полученное немедленно пересылается получателям. Если в логах есть конфиденциальные данные, Remote Console безопаснее разместить в локальной сети или на машине разработчика:

git clone https://github.com/flancer64/spa-remote-console.git
cd spa-remote-console/
npm install
npm start

Каналы

Для разделения наборов логов используются каналы. Логи, отправленные на https://console.wiredgeese.com/log/any-chars/, видны только по адресу https://console.wiredgeese.com/any-chars/. Добавив к адресу сервера канал вроде /49bce4eb9e135c3580278b/, можно не слишком беспокоиться, что логи увидит посторонний: их увидят только знающие имя канала. Число одновременных зрителей не ограничено.

Объединение логов

Чтобы сообщения из нескольких браузеров появились в одной консоли, достаточно отправлять их в один канал. Это удобно при взаимодействии двух браузеров или браузера и сервера: сервер тоже может отправлять логи в консоль.

Сортировка и количество записей

Для адреса https://console.wiredgeese.com/log/ сервер добавляет текущее время в формате mm/dd hh:mm:ss.mmm. Адрес /timed/ передаёт записи как есть. Браузер сортирует записи в обратном порядке, предполагая, что начало строки содержит время события. По умолчанию показываются 64 записи; каждый пользователь может независимо выбрать любое положительное число без верхнего предела.

Вывод

Remote Console задумывался как инструмент, позволяющий увидеть консоль мобильного браузера. Но ретрансляция одного источника нескольким браузерам, каналы и объединение разных источников оказались полезны в ежедневной разработке. Такой инструмент также может помогать поддержке: если приложение дублирует логи в удалённую консоль, сотрудник поддержки может наблюдать происходящее на смартфоне клиента.