---
title: "Remote Console для мониторинга логов web-приложения"
description: "Небольшое web-приложение для просмотра логов мобильного браузера в реальном времени."
date: 2024-02-24
---

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

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

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

Все сообщения `console.log(...)` будут отправляться по указанному URL. Я
использую [Beacon
API](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API),
потому что браузер не ожидает ответа: сообщения идут только в одну
сторону.

Остаётся собрать логи и показать их в читаемом виде. Для этого я написал
небольшое приложение [Remote
Console](https://github.com/flancer64/spa-remote-console). Оно принимает
сообщения с любого адреса:

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

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

``` bash
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 задумывался как инструмент, позволяющий увидеть консоль
мобильного браузера. Но ретрансляция одного источника нескольким
браузерам, каналы и объединение разных источников оказались полезны в
ежедневной разработке. Такой инструмент также может помогать поддержке:
если приложение дублирует логи в удалённую консоль, сотрудник поддержки
может наблюдать происходящее на смартфоне клиента.