Налаштування алертів за метриками веб-додатку

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Налаштування алертів за метриками веб-додатку
Середній
~2-3 дні
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1362
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    958
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1190
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    931
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    949

Сповіщення без продуманої методології перетворюються на шум: 200 повідомлень за ніч, половина з яких «resolved» через 2 хвилини. Команда перестає реагувати — і саме тоді приходить реальна проблема. На одному з проектів ми отримали 150 сповіщень за годину через невірно налаштований поріг CPU. Після впровадження методології burn rate їх стало 5. Мета налаштування — сповіщення лише на ситуації, що вимагають дій людини. Правильно налаштоване сповіщення — це не просто нотифікація, а система, яка дозволяє виявити проблеми до того, як вони вплинуть на користувачів. Ми займаємося цим завданням більше 5 років і налаштували моніторинг для 50+ веб-додатків — від стартапів до enterprise. Нижче — інженерний підхід без води.

Які метрики потрібно моніторити в першу чергу?

Починайте з чотирьох золотих сигналів, описаних у Site Reliability Engineering: latency, traffic, errors, saturation. Для веб-додатку достатньо latency (P95), errors (5xx), traffic (RPS) та saturation (CPU, пам'ять). Додатково — черга завдань, SSL-сертифікат, бізнес-метрики (конверсія, реєстрації). SLO (Service Level Objective) — цільовий рівень доступності, наприклад 99.9% часу. SLI (Service Level Indicator) — фактична метрика, яку ми вимірюємо. Сповіщення з burn rate дозволяють швидко реагувати, коли відхилення від SLO загрожує бюджету.

Принципи ефективного сповіщення

Alerting on symptoms, not causes. Сповіщення на «сайт недоступний для користувачів» важливіше, ніж «CPU > 80%». Високий CPU — причина, яка може і не впливати на користувачів. Цей принцип описаний у Google SRE Book.

Правило чотирьох золотих сигналів: latency, traffic, errors, saturation. Починайте з перших трьох. Burn rate замість порогів: «Error rate > 5% протягом 5 хвилин» краще, ніж «1 помилка за 1 хвилину». Burn rate показує, як швидко ви спалюєте SLO-бюджет помилок, і дозволяє виявити аномалії на ранній стадії.

Чому burn rate кращий за порогові значення?

Порогові сповіщення дають багато хибних спрацьовувань. Приклад: помилка на одному з сотні запитів — 1%, але якщо це триває годину, бюджет помилок (SLO 99.9%) закінчиться за 4 дні. Burn rate = 10. Сповіщення з таким значенням спрацює за 5 хвилин, а не через годину. Це знижує шум у 10 разів.

Як уникнути шумних сповіщень?

Використовуйте burn rate, групування та дедуплікацію в Alertmanager. Налаштуйте group_wait (30s), group_interval (5m), repeat_interval (4h). Сповіщення мають бути на симптоми, а не на причини. Якщо CPU > 80% не впливає на користувачів — це не сповіщення.

Налаштування стеку: Prometheus + Alertmanager + Grafana

Приклад docker-compose.yml
services:
  prometheus:
    image: prom/prometheus:v2.51.0
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - ./rules:/etc/prometheus/rules
      - prometheus_data:/prometheus
    command:
      - '--config.file=/etc/prometheus/prometheus.yml'
      - '--storage.tsdb.retention.time=30d'
    ports:
      - "9090:9090"

  alertmanager:
    image: prom/alertmanager:v0.27.0
    volumes:
      - ./alertmanager.yml:/etc/alertmanager/alertmanager.yml
    ports:
      - "9093:9093"

  grafana:
    image: grafana/grafana:11.0.0
    environment:
      - GF_SECURITY_ADMIN_PASSWORD=admin
    volumes:
      - grafana_data:/var/lib/grafana
    ports:
      - "3000:3000"

volumes:
  prometheus_data:
  grafana_data:

Метрики з додатку (Laravel) та конфігурація

Для Laravel встановлюємо пакет spatie/laravel-prometheus та реєструємо кастомні метрики:

// app/Providers/AppServiceProvider.php
use Prometheus\CollectorRegistry;

public function boot(): void
{
    $registry = app(CollectorRegistry::class);

    // Counter — кількість HTTP-запитів
    $httpRequests = $registry->getOrRegisterCounter(
        'app', 'http_requests_total', 'Total HTTP requests', ['method', 'route', 'status']
    );

    // Histogram — час відповіді
    $httpDuration = $registry->getOrRegisterHistogram(
        'app', 'http_request_duration_seconds', 'HTTP request duration', ['method', 'route'],
        [0.05, 0.1, 0.25, 0.5, 1.0, 2.5, 5.0, 10.0]
    );

    // Gauge — черга завдань
    $queueSize = $registry->getOrRegisterGauge(
        'app', 'queue_size', 'Current queue size', ['queue']
    );
}

Конфігурація Prometheus:

# prometheus.yml
global:
  scrape_interval: 15s
  evaluation_interval: 15s

alerting:
  alertmanagers:
    - static_configs:
        - targets: ['alertmanager:9093']

rule_files:
  - 'rules/*.yml'

scrape_configs:
  - job_name: 'web-app'
    static_configs:
      - targets: ['app:9000']
    metrics_path: /metrics

Приклад правил сповіщення

# rules/web-app.yml
groups:
  - name: web-app
    rules:
      # Високий відсоток помилок (5xx)
      - alert: HighErrorRate
        expr: |
          sum(rate(app_http_requests_total{status=~"5.."}[5m]))
          /
          sum(rate(app_http_requests_total[5m])) > 0.05
        for: 2m
        labels:
          severity: critical
        annotations:
          summary: "Error rate {{ $value | humanizePercentage }}"
          description: "5xx rate exceeded 5% for 2 minutes"

      # Повільні відповіді (P95 > 2 секунди)
      - alert: HighLatencyP95
        expr: |
          histogram_quantile(0.95,
            sum by (le) (rate(app_http_request_duration_seconds_bucket[5m]))
          ) > 2
        for: 5m
        labels:
          severity: warning
        annotations:
          summary: "P95 latency {{ $value | humanizeDuration }}"

      # Відсутність трафіку (аномальне падіння)
      - alert: TrafficDrop
        expr: |
          sum(rate(app_http_requests_total[5m])) < 0.1
          and sum(rate(app_http_requests_total[1h] offset 1h)) > 1
        for: 5m
        labels:
          severity: critical
        annotations:
          summary: "Traffic almost zero — possible outage"

      # Велика черга завдань
      - alert: QueueBacklog
        expr: app_queue_size{queue="default"} > 1000
        for: 10m
        labels:
          severity: warning
        annotations:
          summary: "Queue backlog: {{ $value }} jobs"

      # SSL сертифікат закінчується
      - alert: SSLCertExpiringSoon
        expr: probe_ssl_earliest_cert_expiry - time() < 14 * 24 * 3600
        for: 1h
        labels:
          severity: warning
        annotations:
          summary: "SSL cert expires in {{ $value | humanizeDuration }}"

Маршрутизація та дедуплікація в Alertmanager

# alertmanager.yml
global:
  resolve_timeout: 5m

route:
  group_by: ['alertname', 'severity']
  group_wait: 30s
  group_interval: 5m
  repeat_interval: 4h
  receiver: 'telegram-critical'

  routes:
    - match:
        severity: critical
      receiver: 'telegram-critical'
      continue: false
    - match:
        severity: warning
      receiver: 'telegram-warning'
      group_interval: 15m
      repeat_interval: 12h

receivers:
  - name: 'telegram-critical'
    telegram_configs:
      - bot_token: 'your_bot_token'
        chat_id: -1001234567890
        message: |
          🔴 *{{ .CommonLabels.alertname }}*
          {{ range .Alerts }}
          {{ .Annotations.summary }}
          {{ if .Annotations.description }}{{ .Annotations.description }}{{ end }}
          {{ end }}

  - name: 'telegram-warning'
    telegram_configs:
      - bot_token: 'your_bot_token'
        chat_id: -1001234567890
        message: |
          ⚠️ *{{ .CommonLabels.alertname }}*
          {{ range .Alerts }}{{ .Annotations.summary }}{{ end }}

inhibit_rules:
  - source_match:
      severity: 'critical'
    target_match:
      severity: 'warning'
    equal: ['alertname']

Порівняння Prometheus та хмарних сервісів

Критерій Prometheus + Alertmanager Хмарні сервіси (CloudWatch, Stackdriver)
Гнучкість Повний контроль, будь-які метрики Обмежені можливості
Вартість Безкоштовно, тільки залізо Оплата за кожну метрику
Прив'язка до вендора Ні Повна

Prometheus + Alertmanager дає гнучкість та контроль. На відміну від CloudWatch чи Stackdriver, ви не прив'язані до вендора, і при масштабуванні вартість значно нижча. На одному з проектів ми знизили витрати на моніторинг в 3 рази, перейшовши з Datadog на самописний стек. Така конфігурація окупається за кілька місяців за рахунок зниження витрат на інфраструктуру.

Процес роботи та орієнтовні терміни

Етап Тривалість Результат
Аналітика 0.5–1 день Список золотих сигналів, SLO/SLI
Проектування 0.5 день Схема сповіщень, burn rate, маршрути
Реалізація 1–2 дні Prometheus, Alertmanager, Grafana
Тестування 0.5–1 день Симуляція, хаос-тести
Деплой 0.5 день Продакшен, навчання команди

Базове налаштування (8–12 правил) займає 1–2 робочих дні. Якщо потрібні кастомні метрики та складна маршрутизація — до 4 днів.

Що входить в роботу

  • Аудит поточних метрик додатку (APM, логи, інфраструктура)
  • Розгортання Prometheus + Alertmanager + Grafana
  • Написання 8–12 alert rules з burn rate
  • Інтеграція з Telegram, Slack або email
  • Базові дашборди Grafana (error rate, latency, RPS, queue)
  • Документація та навчання команди
  • Гарантія на результат та підтримка 1 місяць

Якщо у вас схожа задача — зв'яжіться з нами для консультації. Оцінимо обсяг робіт за 1 день. Замовте налаштування моніторингу, щоб позбутися шуму та спати спокійно. Отримайте консультацію з налаштування сповіщень — це безкоштовно.

Як налаштувати веб-аналітику: GA4, GTM, Яндекс.Метрика та Amplitude

Ми часто бачимо: конверсія 1.2 %, трафік зростає, а конверсія стоїть. Маркетолог дивиться в Google Analytics і каже: «користувачі йдуть з кроку 2 оформлення замовлення». Розробник відкриває той самий крок — помилок немає, в Sentry тиша. Значить, справа не в JS-базі, а в UX або в кривих даних, які показує аналітика. Аналітика ламається непомітно: подія перестала трекатися після редеплою — ніхто не помітив; GTM-тег стріляє двічі — дані задвоїлися; фільтр GA4 виключає бота, який насправді — реальний трафік з корпоративного проксі. Замовте аудит поточних тегів — ми знайдемо причину за тиждень. Ми маємо понад 5 років досвіду в налаштуванні веб-аналітики для 100+ проєктів — гарантуємо прозорість та достовірність даних.

Після правильного налаштування економія рекламного бюджету може досягати значної суми щомісяця — це реальний кейс інтернет-магазину з 50 000 сесій на день, де дедуплікація purchase повернула 20 % невірно приписаних конверсій.

Чому події GA4 дублюються і як це виправити?

Universal Analytics закрито, його місце зайняла подієва модель GA4. У ній немає фіксованих хітів сторінок і транзакцій — лише події з параметрами. Це гнучкіше, але вимагає правильного дизайну подій.

Автоматичні події GA4 збирає сам: page_view, scroll, click, session_start. Рекомендовані події потрібно реалізувати самостійно: purchase, add_to_cart, begin_checkout, view_item. Google очікує конкретну схему параметрів — якщо передати product_id замість item_id, дані потрапляють в GA4, але не в стандартні звіти e-commerce. Кастомні події для специфіки проєкту: filter_applied, video_progress, form_step_completed. Кастомні параметри необхідно зареєструвати в GA4 Admin → Custom definitions, інакше вони не будуть доступні у звітах.

Часта помилка — подія purchase з дублями. Причина: тег спрацьовує на сторінці /thank-you, користувач оновлює сторінку — другий purchase іде в GA4. Рішення: на бекенді генеруємо унікальний transaction_id і передаємо в подію. GA4 de-duplicates по ньому — перевіряйте через DebugView. Правильна атрибуція економить до 20 % рекламного бюджету, який раніше йшов на невірно приписані конверсії.

Як налаштувати data layer, щоб не втратити дані?

GTM — інструмент для керування тегами без деплою коду. Але «без коду» не означає «без архітектури». Data Layer — основа всього. Передаємо дані з застосунку в GTM через dataLayer.push(). Структура: event + контекстні дані. Для e-commerce: перед відкриттям сторінки продукту — push з даними товару. GTM-тег читає з dataLayer, не з DOM.

window.dataLayer = window.dataLayer || [];
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    items: [{
      item_id: 'SKU-12345',
      item_name: 'Назва товару',
      price: null,
      currency: null
    }]
  }
});

Погана практика: GTM-тег парсить DOM — шукає ціну в span.price, назву в h1. Це ламається при будь-якій зміні верстки. Хороша практика: завжди dataLayer. Використовуємо Preview Mode для налагодження та GTM Server-Side для чутливих даних — відправка з сервера, не з браузера, обходить блокувальники реклами, не втрачає дані. Server-side підхід у 2-3 рази надійніший за client-side за показником втрати подій через розширення браузера.

Як Яндекс.Метрика доповнює веб-аналітику?

Для російської аудиторії Метрика обов'язкова — особливо Вебвізор. Запис сесії користувача, який кинув кошик, часто дає відповідь швидше, ніж тиждень аналізу воронки. Цілі в Метриці: подієві (через ym(COUNTER_ID, 'reachGoal', 'GOAL_NAME')) або автоматичні (клік по кнопці, відвідування сторінки). Зв'язка з CRM через Метрика Плюс — передача офлайн-конверсій. Наш досвід: у 8 з 10 проєктів після налаштування Метрики знаходили приховані баги в UX, які не показували інші системи.

Що дає product analytics в Amplitude?

Amplitude — продуктовий інструмент, на відміну від маркетингових GA4 та Метрики. Він заточений під аналіз поведінки користувачів всередині продукту: воронки, ретеншн, user paths. Amplitude підходить для SaaS-продуктів, мобільних застосунків та будь-яких сервісів із зареєстрованими користувачами, де важливо зрозуміти, як проходять онбординг, на якому кроці йдуть, які фічі використовують частіше. Ключові концепції: identify (пов'язати анонімного користувача з userId після авторизації), group (акаунт у B2B SaaS), когорти для утримання. Amplitude Chart — воронка кроків за останні 30 днів з розбивкою за джерелом.

Моніторинг якості даних

Аналітика без моніторингу — чорна скринька. Налаштовуємо:

  • GA4 Realtime — перевіряємо після кожного деплою, що ключові події приходять
  • Alerting в GA4 — аномалія в кількості подій purchase (різке падіння = щось зламалося)
  • GTM Preview в staging-оточенні перед продакшеном
  • Ручні тести воронок раз на тиждень — просто пройти шлях покупця і перевірити, що все трекається

Якщо ви помітили розбіжності в даних — зв'яжіться, проведемо безкоштовний аудит коректності тегів.

Що перевіряємо після кожного деплою

  • Чи всі рекомендовані події присутні в DebugView
  • Чи немає задвоєнь (рахуємо кількість purchase на 100 сесій)
  • Чи не змінилася структура dataLayer після оновлення фронтенду

Що входить в роботу

Компонент Опис
Аудит поточних тегів Перевірка існуючих GTM-тегів, dataLayer, дублів та помилок
Дизайн подієвої схеми Документація: список подій, параметри, тригери
Налаштування GA4 + GTM Створення конфігурації, тегів, Custom definitions
Яндекс.Метрика Встановлення лічильника, створення цілей, налаштування Вебвізора
Amplitude (опціонально) Налаштування клієнтського та серверного SDK, когорти
QA та моніторинг Тестування в Preview Mode, Alerting
Навчання та передача Доступи, інструкція з додавання нових подій, консоль

Процес та терміни

  1. Аудит поточних тегів та даних (2 дні)
  2. Дизайн подієвої схеми (2 дні)
  3. Розробка Data Layer та налаштування тегів (3–5 днів)
  4. QA в Preview Mode та на staging (2 дні)
  5. Деплой та налаштування дашбордів (1 день)
Сценарій Термін
Базове налаштування GA4 + GTM 1 тиждень
Повний e-commerce tracking + Метрика 2–3 тижні
Server-side GTM + Amplitude 3–5 тижнів

Вартість розраховується індивідуально. Отримайте консультацію з налаштування веб-аналітики для вашого проєкту — ми оцінимо обсяг робіт за один день. Зв'яжіться з нами, щоб почати. Для точного розрахунку вартості залиште заявку — ми проаналізуємо ваш стек за 1 день.