ניתוח סשנים עם שגיאות (שגיאות JavaScript)

ניתוח הפעלות שגיאה (שגיאות JavaScript)

תארו לעצמכם: משתמש מוסיף מוצר לעגלה, לוחץ על "תשלום" — וכלום לא קורה. הקונסולה מלאה ב-Cannot read property 'X' of undefined, התשלום קופא. אתם מפסידים כסף, והמשתמש עובר למתחרה. אנחנו עוזרים לזהות שגיאות כאלה ולחסל אותן לפני שהן מאפסות את המדדים שלכם.

הפעלות שגיאה הן הפעלות שבהן התרחשה שגיאת JavaScript אחת או יותר. הניסיון שלנו מראה: ללא ניתוח שיטתי, אתם מפספסים 60–80% מהבאגים הקריטיים שפוגעים ישירות בהמרות. אנחנו מסננים, מנתחים ומתעדפים הפעלות אלה באמצעות Sentry ו-GA4. Sentry עם Replay מאיץ את תהליך האיתור פי 5–10 בהשוואה ללוגינג פשוט.

הגדרת יירוט שגיאות JavaScript

אנחנו מיירטים את כל השגיאות הלא מטופלות, דחיות Promise, ובקשות 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.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 } } , ראו תיעוד 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. אם ערך ההזמנה הממוצע שלכם הוא $100, ההפסדים השבועיים עולים על $12,000.

השוואת כלי ניטור

Sentry היא הבחירה האופטימלית לניתוח מעמיק: היא משלבת source maps, Replay ואינטגרציה גמישה עם GA4. בהשוואה ל-GA4, Sentry מתאימה יותר לאיתור באגים מכיוון שהיא מספקת מחסנית מלאה ו-Replay, מה שמקצר את זמן איתור שורש הבעיה פי 5–10.

כיצד לתעדף תיקון שגיאות?

אנחנו משתמשים במדד window.onerror. שגיאות במודולי תשלום/קופה מקבלות משקל 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)

שגיאות קריטיות אופייניות

• // 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 } }) — תנאי מרוץ במהלך טעינה אסינכרונית
• 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+ раза ב-fetch — API לא זמין, אין לוגיקת ניסיון חוזר
• affected_users × conversion_impact — שגיאות Payment Request API ב-iOS Safari
• 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)

מה כולל השירות

• הגדרת יירוט של כל שגיאות ה-JS (כולל source maps)
• אינטגרציה של Sentry עם Replay ו-Tracing
• יצירת אירועים ב-GA4 לניתוח המרות
• לוחות מחוונים להשפעת שגיאות על CVR והכנסות
• רשימה ממוינת של באגים עם המלצות
• תיעוד אינטגרציה וגישה ללוחות מחוונים
• חודש תמיכה לאחר היישום

תהליך העבודה

1. ביקורת ניטור נוכחי: בדיקה אילו שגיאות כבר מיורטות.
2. הגדרת כלים: התקנת Sentry, חידוד אירועי GA4.
3. איסוף נתונים: 7 ימים של צבירת סטטיסטיקת הפעלות שגיאה.
4. ניתוח ותיעדוף: בניית דוחות SQL, חישוב השפעת ההמרות.
5. דוח ותיקונים: מתן רשימת באגים עם רמת קריטיות, סיוע בתיקונים.
6. אימות: לאחר התיקונים, חזרה על הניתוח לוודא צמיחת CVR.

לוחות זמנים ותוצאות

תוצאות ראשונות תוך יומיים עסקיים: אתם רואים לוח מחוונים עם הפעלות שגיאה והשפעתן. מחזור ניתוח ותיעדוף מלא אורך 5 עד 7 ימים. העלות הספציפית תלויה בהיקף הפרויקט (מספר עמודים, אינטגרציות), ולכן אנחנו מחשבים אותה באופן אישי. צרו קשר — נבחן את הפרויקט שלכם.

למה לבחור בנו

הניסיון שלנו: למעלה מ-10 שנים בפיתוח פרונטאנד וניטור. עבדנו על פרויקטים שבהם ה-CVR גדל ב-25% רק בזכות חיסול שגיאות JS. אנחנו משתמשים רק בכלים מוכחים: Sentry, GA4, Grafana. אנחנו מבטיחים פעילות תקינה של האינטגרציה. הזמינו ביקורת — קבלו ייעוץ עם פירוט מלא של הפעלות השגיאה שלכם. צרו קשר — נכין הצעה מותאמת אישית.