Веб-приложение · метрики · оповещения
Мониторинг бота
Бот запущен — и дальше важно узнать о проблеме раньше клиентов. Если API заказов начал тормозить, бот отвечает по десять секунд, а клиенты уходят молча. Здесь видна неделя работы трёх ботов в Telegram и Max и живой поток запросов. Можно устроить учебный инцидент и посмотреть, как правило ловит сбой, что приходит дежурному и как всё восстанавливается.
Сценарий: Три демо-бота: поддержка коворкинга «Квадрат», приём заявок и магазин кофе — в Telegram и Max.
Открыть демо
Удобнее с компьютера: графики и журнал шире. На телефоне журнал показывается карточками.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Посмотрите обзор
Переключите неделю: три дня назад был сбой Max — на графике ошибок он виден пиком.
Найдите медленный запрос
Вкладка «Журнал», фильтр «Дольше 2 с» или итог «Ошибка». Нажмите на строку — откроется трасса, и видно, какой шаг занял время.
Устройте инцидент
Вкладка «Оповещения», «Устроить инцидент». Правило «API заказов тормозит» перейдёт в ожидание, затем в тревогу, а в чат дежурного придёт сообщение.
Почините
«Починить сейчас» — и правила вернутся в норму, когда значения опустятся ниже порога восстановления. Пороги можно поменять или выключить правило.
Без платных нейросетей
Телеметрия синтетическая: неделя истории трёх демо-ботов и живой поток генерируются в браузере, а правила устроены как в Alertmanager: порог, окно, задержка срабатывания и порог восстановления. В рабочем проекте боты пишут трассы в OpenTelemetry, метрики собирает Prometheus, правила живут в Alertmanager или Grafana, а сообщения дежурному уходят через Telegram Bot API.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- Трассы и метрики из кода бота: OpenTelemetry, Prometheus, логи в Loki или ClickHouse
- Дашборды в Grafana по ботам, каналам и внешним сервисам
- Оповещения в Telegram с кнопками: открыть трассу, заглушить, взять в работу
- Отдельные метрики качества: доля «не знаю», передачи оператору и жалобы — не только аптайм
Стек
- Все демо по стеку:
- React
- TypeScript
- React 19
- TypeScript
- TanStack Table
- TanStack Virtual
- Recharts
- Zustand
- Vite
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- О проблеме вы узнаёте раньше клиентов: правило замечает, что бот отвечает медленно, и пишет дежурному.
- Видно не только «работает или нет», но и качество: долю «не знаю» и передачи оператору.
- Разбор инцидента занимает минуты: трасса показывает, какой шаг тормозил.
Для разработчиков
- Журнал на 10 тысяч запросов — TanStack Table с виртуализацией: рисуются только видимые строки.
- Правила как в Alertmanager: порог, окно, задержка срабатывания и отдельный порог восстановления, чтобы тревога не мигала.
- Трасса — водопад шагов: проверка входа, поиск, модель, внешний API, отправка. В проде их пишет OpenTelemetry.
Советы
Совет 01
Следите за p95, а не за средним: средняя задержка прячет тех клиентов, которые ушли.
Совет 02
Порог восстановления делайте ниже порога тревоги, иначе на границе правило будет переключаться туда-обратно.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · OCR · проверка реквизитов
Распознавание документов
Загрузите счёт или акт — фото, скан или PDF. Приложение распознаёт текст, вытаскивает реквизиты и строки таблицы и проверяет их: контрольные суммы ИНН и счетов, итог и НДС.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · диалоги · сделки · аналитика
Панель оператора
Рабочее место оператора, которому бот передаёт сложные обращения: очередь с таймером, резюме диалога, черновик ответа, сделки на канбане и аналитика — на живом потоке клиентов.
- React
- TypeScript
- работает
Веб-приложение · Recharts · RBAC · аудит
SaaS-дашборд
Кабинет команды выручки SaaS: MRR по тарифам, движение выручки, отток, здоровье клиентов, выгрузка CSV для Excel и журнал действий. Все цифры считаются из одной истории за год — смена тарифа в карточке клиента сразу двигает MRR на графиках.
- React
- TypeScript
- работает
Веб-приложение · Laravel · PostgreSQL
Складской контур на Laravel
Учёт склада, где остаток — сумма проводок, а не «поле qty--»: заказы с резервом «всё или ничего», сборка по ячейкам, приёмка с импортом CSV, инвентаризация и журнал. Гонка двух настоящих процессов PHP в PostgreSQL показывает, зачем нужна блокировка строки.
- PHP
- работает
Парсер на Python · работает в браузере
Мониторинг цен конкурентов
Парсер на Python каждый день обходит сайты трёх конкурентов магазина электроники: HTML-каталог с пагинацией, sitemap с JSON-LD и SPA с API. Сопоставляет товары с каталогом, присылает уведомления об изменениях, рекомендует цену по правилам и выгружает отчёт в Excel. Python работает прямо в браузере.
- Python
- React
- TypeScript
- работает
Веб-приложение · PWA · нативный JS
Офлайн-приложение курьера
Рабочий день курьера: заказы, звонок клиенту, вручение с фото и подписью. Приложение открывается и работает без сети, а изменения уходят в диспетчерскую, когда связь вернётся. Если диспетчер за это время изменил тот же заказ — курьер выбирает, чья версия верная.
- Нативный JS