Визуальный мониторинг сайта: скриншоты и pixel-diff

Что такое визуальный мониторинг и зачем он нужен?

Обычный uptime-мониторинг проверяет HTTP-статус: пришёл 200 OK — значит, сайт работает. На практике этого недостаточно. Сервер может отвечать 200 OK, а пользователь увидит белый экран, антибот-заглушку Cloudflare, надпись «Платёжная форма временно недоступна» или съехавшую вёрстку из-за упавшего CDN.

Визуальный мониторинг — это регулярные скриншоты страницы и автоматическое сравнение с предыдущей версией. Если внешний вид изменился сильнее заданного порога — приходит уведомление. Это закрывает класс инцидентов, которые HTTP-чек не ловит: ошибки фронтенда, проблемы с ассетами, подмену контента, сломанный JS-бандл.

Если только начинаете — посмотрите как добавить сайт в мониторинг и как включить скриншоты для URL.

Как работает скриншот-мониторинг в Tracker.ru?

Скриншоты делает отдельный Go-воркер на базе headless Chrome (chromedp). Окно фиксированное — 1440×900, после navigation ждём около 2 секунд, чтобы прогрузились отложенные элементы. Высота кропится до 3000 px — так картинка корректно показывается в Telegram-уведомлениях.

Файлы хранятся в storage/app/public/screenshots/{url_id}/{token}_{timestamp}.png. Доступ — только владельцу URL.

Скриншот делается в двух случаях:

• По расписанию. Планировщик публикует задание с интервалом, заданным в настройках URL (от 5 минут до 1 часа).
• При падении сайта. Когда основной HTTP-чек фиксирует переход в down, автоматически снимается скриншот — чтобы в уведомлении сразу было видно, что именно сломалось.

Все настройки — частота, порог срабатывания, включение/отключение — задаются на странице URL в разделе «Скриншоты».

Что такое pixel diff и как мы его считаем?

Pixel-diff — попиксельное сравнение нового скриншота с предыдущим. Алгоритм простой и предсказуемый, без ML и эвристик:

1. Выравнивание канваса. Если размеры скриншотов разные, оба приводятся к канвасу max(W₁, W₂) × max(H₁, H₂). Недостающие области считаются пустыми.
2. Сравнение по RGBA с допуском. Каждый пиксел сверяется по четырём каналам (R, G, B, A). Допуск — 10 единиц на канал. Этого достаточно, чтобы отсечь антиалиасинг шрифтов и микроартефакты сжатия PNG/JPEG.
3. Кластеризация шума. Все различающиеся пикселы группируются по связности (BFS по соседям). Группы размером меньше 100 пикселей выбрасываются как шум — мерцание курсора, моргающий рекламный плейсхолдер, сдвиг на 1 px у тени.
4. Подсчёт процента. diff% = значимые_пикселы / общее_число_пикселей × 100, округление до 0.01%.
5. Diff-картинка. Для уведомления генерируется копия нового скриншота с красной подсветкой (#FF0000) изменившихся областей.

Если итоговый процент превысил порог, заданный в настройках URL, отправляется уведомление в Telegram (см. настройку Telegram).

В каких случаях это спасает?

• Антибот-заглушка. Cloudflare или внутренний WAF включил защиту, и пользователь вместо страницы видит CAPTCHA или «Checking your browser…». HTTP-статус — 200 OK.
• Упавший фронтенд. Ошибка в JS-бандле — <div id="app"> остался пустым. Сервер вернул HTML, но React/Vue не отрисовались.
• Ассеты 404. Деплой выкатил новые имена файлов, а старые ссылки в HTML остались. Вёрстка поплыла, шрифты пропали — но сервер 200.
• Истёк сертификат стороннего CDN. Шрифты, иконки, картинки с внешнего CDN перестали грузиться. Сайт визуально «обнажился».
• Несогласованные «технические работы». Кто-то из команды (или партнёр) выкатил баннер «Идут работы, сайт недоступен» — без согласования. HTTP-чек ничего не заметит.
• Подмена платёжной формы. Стороннее платёжное решение перешло в режим «временно недоступно» и отрисовало заглушку вместо полей карты. Конверсия упала, никто не понимает почему.
• Дефейс или подмена контента. На странице появился неожиданный текст, баннер, редирект через JS — это видно по diff'у моментально.

Сколько скриншотов в каких тарифах?

Тариф «Free» позволяет пользоваться обычным uptime-мониторингом, но скриншоты в нём не входят. Подробности и оплата — на странице /pricing.

Чем это отличается от Checkly, BrowserStack, Uptime Kuma + Playwright?

• Checkly. Сильный сервис synthetic-мониторинга. Минус для российских команд: тариф от $40/мес, оплата только в долларах, без российских платёжных методов.
• BrowserStack. Заточен под ручное и автоматизированное QA в разных браузерах. Это не uptime-инструмент — он не разбудит вас ночью, если страница перестала отрисовываться.
• Uptime Kuma + Playwright. Self-hosted связка. Pixel-diff из коробки нет — нужно собирать самому: сценарии, хранилище скриншотов, движок сравнения, уведомления. Плюс инфра, сертификаты, обновления.
• Tracker.ru. Скриншот-мониторинг встроен в обычный uptime — никакого отдельного раздела или настройки CI. Оплата в рублях, проверки идут из Москвы и Германии.

FAQ

Как часто делаются скриншоты?

Интервал задаётся в настройках URL и работает от 5 минут до 1 часа. Дополнительно скриншот снимается автоматически в момент падения сайта — чтобы в уведомлении сразу было видно, что именно отображалось пользователю.

Где хранятся скриншоты?

В директории storage/app/public/screenshots/. Доступ есть только у владельца URL — другие пользователи не могут открыть чужие файлы.

Что значит «порог 5%» в настройках?

Это минимальный процент значимо изменившихся пикселей, при котором приходит уведомление. Diff меньше порога считается шумом и игнорируется. По умолчанию для большинства сайтов подходит 5%, для динамичных главных страниц — 10–20%.

Считается ли изменение в шапке сайта или в виджете чата?

Да, любое визуальное изменение попадает в diff. Если шапка или виджет обновляются часто и шумят — повысьте порог срабатывания до 10–20% или отключите скриншоты для этого URL. Кадрировать конкретную область пока нельзя.

Скриншоты влияют на скорость основной проверки сайта?

Нет. Скриншоты делает отдельный воркер, он не блокирует HTTP-чеки. Если воркер скриншотов перегружен или Chrome падает — основной мониторинг работает в штатном режиме.

Можно ли отключить скриншоты для конкретного URL?

Да. На странице URL в разделе «Скриншоты» есть переключатель и поле «лимит». Поставьте лимит в 0 — скриншоты сниматься не будут, квота тарифа не расходуется.