Аналіз Error Sessions (сесії з помилками JavaScript)
Уявіть: користувач кладе товар у кошик, натискає «Оформити замовлення» — і нічого не відбувається. Консоль рясніє Cannot read property 'X' of undefined, checkout завис. Ви втрачаєте гроші, а користувач іде до конкурентів. Ми допомагаємо виявити такі помилки та усунути їх до того, як вони обнулять метрики.
Error Sessions — сесії, де сталася одна або кілька JavaScript-помилок. Наш досвід показує: без системного аналізу ви пропускаєте 60–80% критичних багів, які безпосередньо ріжуть конверсію. Ми фільтруємо, аналізуємо та пріоритезуємо ці сесії, використовуючи Sentry та GA4. Sentry з Replay прискорює налагодження в 5–10 разів порівняно з простим логуванням.
Налаштування перехоплення JavaScript-помилок
Перехоплюємо всі необроблені помилки, Promise rejection та збої fetch/XHR. Ключовий елемент — правильне налаштування source maps: Sentry автоматично деобфускує стек, показуючи вихідний код, а не мініфіковані рядки. Приклад інтеграції:
// Перехоплення необроблених помилок
window.addEventListener('error', function(event) {
const errorInfo = {
message: event.message,
source: event.filename?.split('/').pop(),
line: event.lineno,
col: event.colno,
stack: event.error?.stack?.slice(0, 500),
page: window.location.pathname,
user_agent: navigator.userAgent.slice(0, 100)
}
// Відправити в GA4
gtag('event', 'js_error', errorInfo)
// Відправити в Sentry/Bugsnag
Sentry.captureException(event.error, {
extra: errorInfo
})
})
// Перехоплення unhandled Promise rejections
window.addEventListener('unhandledrejection', function(event) {
gtag('event', 'promise_rejection', {
message: event.reason?.message || String(event.reason),
page: window.location.pathname
})
})
// Перехоплення помилок у fetch/XHR
const originalFetch = window.fetch
window.fetch = async function(...args) {
try {
const response = await originalFetch(...args)
if (!response.ok) {
gtag('event', 'fetch_error', {
url: args[0].toString().split('?')[0],
status: response.status,
page: window.location.pathname
})
}
return response
} catch (err) {
gtag('event', 'fetch_exception', {
url: args[0].toString().split('?')[0],
message: err.message
})
throw err
}
}
Більш детально про window.onerror читайте в документації MDN. Як зазначено в документації Sentry, інтеграція з source maps та Replay прискорює налагодження в 5–10 разів порівняно зі звичайним логуванням.
Інтеграція Sentry з Replay та Tracing
Для глибокого аналізу підключаємо Sentry з Replay та Tracing. Replay записує сесію до моменту помилки, що дозволяє побачити дії користувача. Приклад конфігурації:
// sentry.init.js
import * as Sentry from '@sentry/browser'
import { BrowserTracing } from '@sentry/tracing'
Sentry.init({
dsn: 'https://[email protected]/yyy',
integrations: [
new BrowserTracing(),
new Sentry.Replay({
maskAllText: false,
blockAllMedia: false
})
],
tracesSampleRate: 0.1, // 10% для performance
replaysSessionSampleRate: 0.05, // 5% сесій записувати
replaysOnErrorSampleRate: 1.0, // 100% при помилці
beforeSend(event) {
// Додати контекст користувача
event.user = {
id: currentUser?.id,
segment: currentUser?.plan
}
return event
}
})
Як помилки впливають на конверсію?
Ми будуємо SQL-запити, що порівнюють CVR сесій з помилками та без. Типовий результат: сесії з помилками конвертують у 3+ рази гірше. Приклад коду:
def analyze_error_impact(analytics_db):
# Порівняти конверсію сесій з помилками vs без
result = analytics_db.query("""
WITH session_errors AS (
SELECT
session_id,
COUNT(*) as error_count,
MAX(CASE WHEN event_name = 'purchase' THEN 1 ELSE 0 END) as converted
FROM events
WHERE date >= CURRENT_DATE - INTERVAL '7 days'
AND event_name IN ('js_error', 'purchase')
GROUP BY session_id
),
all_sessions AS (
SELECT session_id,
MAX(CASE WHEN event_name = 'purchase' THEN 1 ELSE 0 END) as converted
FROM events
WHERE date >= CURRENT_DATE - INTERVAL '7 days'
GROUP BY session_id
)
SELECT
'with_errors' AS segment,
COUNT(*) AS sessions,
SUM(converted) AS conversions,
ROUND(AVG(converted::float) * 100, 2) AS cvr
FROM session_errors WHERE error_count > 0
UNION ALL
SELECT
'without_errors',
COUNT(*),
SUM(a.converted),
ROUND(AVG(a.converted::float) * 100, 2)
FROM all_sessions a
LEFT JOIN session_errors se ON a.session_id = se.session_id
WHERE se.session_id IS NULL
""")
return result
# Типовий результат:
# with_errors: 1.2% CVR
# without_errors: 3.8% CVR
# Помилки знижують конверсію в 3+ рази
| Сегмент | Сесії | Конверсії | CVR |
|---|---|---|---|
| З помилками | 12450 | 149 | 1.2% |
| Без помилок | 112050 | 4258 | 3.8% |
Різниця — у 3.2 рази. Якщо ваш середній чек 3000 ₴, втрати за тиждень становлять понад 1.2 млн ₴.
Порівняння інструментів моніторингу
| Інструмент | Source maps | Replay | Інтеграція з GA4 | Ціна |
|---|---|---|---|---|
| Sentry | Так | Так | Через API | Безкоштовно до 5k подій/міс |
| Bugsnag | Так | Ні | Через API | Від $29/міс |
| LogRocket | Так | Так | Ні | Від $39/міс |
| GA4 | Ні | Ні | Вбудовано | Безкоштовно |
Sentry — оптимальний вибір для глибокого аналізу: він поєднує source maps, Replay та гнучку інтеграцію з GA4. Порівняно з GA4, Sentry краще підходить для налагодження, оскільки надає повний стек та Replay, що скорочує час пошуку причини в 5–10 разів.
Як пріоритезувати виправлення помилок?
Ми використовуємо метрику affected_users × conversion_impact. Помилки в модулях checkout/payment отримують вагу 3, решта — 1. Приклад:
def prioritize_errors(sentry_api, project_slug):
"""Пріоритет = affected_users × conversion_impact"""
issues = sentry_api.get_issues(project_slug, limit=50)
for issue in issues:
affected_users = issue['userCount']
# Помилки в checkout/payment — високий пріоритет
is_critical = any(p in issue['culprit'] for p in
['checkout', 'payment', 'cart', 'form'])
issue['priority_score'] = affected_users * (3 if is_critical else 1)
return sorted(issues, key=lambda x: x['priority_score'], reverse=True)
Типові критичні помилки
-
Cannot read property 'X' of undefined— race condition при асинхронному завантаженні -
Network Errorу fetch — API недоступний, немає retry логіки -
PaymentRequestUpdateEvent— помилки Payment Request API на iOS Safari -
ChunkLoadError— застарілий кеш після деплою (вирішується:window.location.reload())
Кейс з практики: як підняли CVR на 25%
На одному проекті (інтернет-магазин електроніки) після деплою нової версії checkout-модуля конверсія впала з 3.5% до 1.1%. З'ясувалося, що в 40% сесій виникала помилка Cannot read property 'price' of undefined через зміну формату відповіді API. Sentry показав, що помилка зачіпає 15k користувачів на день. Після фіксу та повторного деплою CVR повернулася до 3.5% через 2 дні. Втрати за 3 дні склали ~900 замовлень.
Що входить у послугу
- Налаштування перехоплення всіх JS-помилок (включаючи source maps)
- Інтеграція Sentry з Replay та Tracing
- Створення подій у GA4 для конверсійного аналізу
- Дашборди впливу помилок на CVR та виручку
- Пріоритезований список багів з рекомендаціями
- Документація по інтеграції та доступ до дашбордів
- Підтримка протягом місяця після впровадження
Процес роботи
- Аудит поточного моніторингу: перевіряємо, які помилки вже перехоплюються.
- Налаштування інструментів: встановлюємо Sentry, доопрацьовуємо GA4 events.
- Збір даних: 7 днів накопичення статистики по Error Sessions.
- Аналіз та пріоритезація: будуємо SQL-звіти, обчислюємо вплив на конверсію.
- Звіт та виправлення: передаємо вам список багів із зазначенням критичності, допомагаємо з правками.
- Контроль: після виправлень повторюємо аналіз, щоб переконатися в рості CVR.
Строки та результати
Перші результати — вже через 2 робочі дні: ви бачите дашборд з Error Sessions та їх впливом. Повний цикл аналізу та пріоритезації — від 5 до 7 днів. Конкретна вартість залежить від обсягу проекту (кількість сторінок, інтеграцій), тому ми розраховуємо її індивідуально. Зв'яжіться — оцінимо ваш проект безкоштовно.
Чому обирають нас
Наш досвід — понад 10 років у frontend-розробці та моніторингу. Ми працювали з проектами, де CVR зросла на 25% лише за рахунок усунення JS-помилок. Використовуємо лише перевірені інструменти: Sentry, GA4, Grafana. Даємо гарантію на коректну роботу інтеграцій. Замовте аудит — отримайте консультацію з детальним розбором ваших Error Sessions. Зв'яжіться з нами — ми підготуємо індивідуальну пропозицію.