Аналіз 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+ рази 

Різниця — у 3.2 рази. Якщо ваш середній чек 3000 ₴, втрати за тиждень становлять понад 1.2 млн ₴.

Порівняння інструментів моніторингу

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())

Що входить у послугу

• Налаштування перехоплення всіх JS-помилок (включаючи source maps)
• Інтеграція Sentry з Replay та Tracing
• Створення подій у GA4 для конверсійного аналізу
• Дашборди впливу помилок на CVR та виручку
• Пріоритезований список багів з рекомендаціями
• Документація по інтеграції та доступ до дашбордів
• Підтримка протягом місяця після впровадження

Процес роботи

1. Аудит поточного моніторингу: перевіряємо, які помилки вже перехоплюються.
2. Налаштування інструментів: встановлюємо Sentry, доопрацьовуємо GA4 events.
3. Збір даних: 7 днів накопичення статистики по Error Sessions.
4. Аналіз та пріоритезація: будуємо SQL-звіти, обчислюємо вплив на конверсію.
5. Звіт та виправлення: передаємо вам список багів із зазначенням критичності, допомагаємо з правками.
6. Контроль: після виправлень повторюємо аналіз, щоб переконатися в рості CVR.

Строки та результати

Перші результати — вже через 2 робочі дні: ви бачите дашборд з Error Sessions та їх впливом. Повний цикл аналізу та пріоритезації — від 5 до 7 днів. Конкретна вартість залежить від обсягу проекту (кількість сторінок, інтеграцій), тому ми розраховуємо її індивідуально. Зв'яжіться — оцінимо ваш проект безкоштовно.

Чому обирають нас

Наш досвід — понад 10 років у frontend-розробці та моніторингу. Ми працювали з проектами, де CVR зросла на 25% лише за рахунок усунення JS-помилок. Використовуємо лише перевірені інструменти: Sentry, GA4, Grafana. Даємо гарантію на коректну роботу інтеграцій. Замовте аудит — отримайте консультацію з детальним розбором ваших Error Sessions. Зв'яжіться з нами — ми підготуємо індивідуальну пропозицію.