ניטור שגיאות רשת באפליקציות מובייל: הגדרת Sentry

ניטור שגיאות רשת באפליקציות מובייל: הגדרת Sentry

תארו לעצמכם: 3:00 לפנות בוקר, השרת מחזיר 502. 8% מהמשתמשים רואים מסך ריק, חלקם מסירים את האפליקציה. אנחנו מתמודדים עם זה כל יום—ייצור ללא ניטור שגיאות רשת מאבד משתמשים. עם Sentry, אנחנו מיירטים תרחישים כאלה מוקדם, מקבצים שגיאות לפי fingerprint, ומגדירים התראות כדי שלעולם לא נפספס תקלה.

שגיאות רשת מגוונות: מאובדן חיבור ועד בעיות בפענוח תגובה. כל קטגוריה דורשת אסטרטגיית ניטור משלה. להלן סיווג מבוסס עדיפות שנגזר מניסיון עם עשרות פרויקטים.

למה Sentry על פני רישום מותאם אישית?

רישום מותאם אישית יוצר לעיתים קרובות אלפי קריאות כפולות. Sentry מקבץ אותן לפי fingerprint—ומקצר את זמן הניתוח פי 5–10. Sentry מספקת גם הקשר: מכשיר, גרסת מערכת הפעלה, עקבות בקשות. לפי תיעוד Sentry, קיבוץ נכון מפחית תקלות ב-70%. אנחנו משתמשים ב-Sentry כבר שנים—זה פתרון ייצור מוכח. במהלך השנים, הקמנו ניטור לעשרות פרויקטים, מפינטק ועד מסחר אלקטרוני.

איך ליירט בקשות רשת ב-React Native?

@sentry/react-native מתקן אוטומטית את fetch ו-XMLHttpRequest. כברירת מחדל, הוא כולל עקבות ביצועים אך לא מתעד שגיאות אוטומטית. הנה התצורה:

import * as Sentry from '@sentry/react-native';
Sentry.init({
  dsn: 'https://[email protected]/yyy',
  tracesSampleRate: 0.1, // 10% запросов трейсим для Performance
  integrations: [
    new Sentry.ReactNativeTracing({
      traceFetch: true,
      traceXHR: true, // Не включать sensitive endpoints в трейсы
      tracingOrigins: ['api.yourapp.com', 'cdn.yourapp.com'],
    }),
  ],
});

לרישום מפורש של שגיאות רשת, עטפו את import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'https://[email protected]/yyy', tracesSampleRate: 0.1, // 10% запросов трейсим для Performance integrations: [ new Sentry.ReactNativeTracing({ traceFetch: true, traceXHR: true, // Не включать sensitive endpoints в трейсы tracingOrigins: ['api.yourapp.com', 'cdn.yourapp.com'], }), ], }); :

export async function monitoredFetch(
  url: string,
  options?: RequestInit
): Promise<Response> {
  const startTime = Date.now();
  try {
    const response = await fetch(url, options);
    const duration = Date.now() - startTime;
    if (!response.ok) {
      Sentry.captureMessage(`HTTP ${response.status}: ${url}`, {
        level: response.status >= 500 ? 'error' : 'warning',
        extra: {
          status: response.status,
          duration,
          method: options?.method ?? 'GET',
          endpoint: new URL(url).pathname,
        },
        fingerprint: [`http-${response.status}`, new URL(url).pathname],
      });
    }
    return response;
  } catch (error) {
    Sentry.captureException(error, {
      extra: { url, duration: Date.now() - startTime },
      tags: { error_type: 'network_connectivity' },
    });
    throw error;
  }
}

fetch הוא קריטי. בלעדיו, Sentry יוצרת בעיה נפרדת לכל URL עם שגיאה. עם export async function monitoredFetch( url: string, options?: RequestInit ): Promise<Response> { const startTime = Date.now(); try { const response = await fetch(url, options); const duration = Date.now() - startTime; if (!response.ok) { Sentry.captureMessage(`HTTP ${response.status}: ${url}`, { level: response.status >= 500 ? 'error' : 'warning', extra: { status: response.status, duration, method: options?.method ?? 'GET', endpoint: new URL(url).pathname, }, fingerprint: [`http-${response.status}`, new URL(url).pathname], }); } return response; } catch (error) { Sentry.captureException(error, { extra: { url, duration: Date.now() - startTime }, tags: { error_type: 'network_connectivity' }, }); throw error; } } , כל שגיאות ה-500 ב-fingerprint מקובצות לבעיה אחת.

איך להגדיר טביעת אצבע לקיבוץ?

בקוד למעלה, אנו משתמשים בסטטוס התגובה ובנתיב ה-endpoint. כדי לקבץ לפי קריטריון אחר, שנו את המערך. לדוגמה, לשגיאות אימות: ['http-500', '/api/orders'].

Breadcrumbs: הקשר לפני השגיאה

Breadcrumbs מראים מה קרה לפני שגיאת הרשת: אילו מסכים המשתמש ביקר, אילו פעולות ביצע. כברירת מחדל, נשמרים 100 ה-breadcrumbs האחרונים—מספיק לסשנים ארוכים. הנה איך להוסיף breadcrumb בניווט:

// Добавляем breadcrumb при навигации
navigation.addListener('state', (e) => {
  Sentry.addBreadcrumb({
    category: 'navigation',
    message: `Navigate to ${e.data.state.routes[e.data.state.index].name}`,
    level: 'info',
  });
});

הודות ל-breadcrumbs, זמן איתור הבעיה יורד משעות לדקות: אתם רואים לא רק שגיאה, אלא את רצף פעולות המשתמש.

איך להפריד שגיאות אופליין משגיאות שרת?

יש להבחין בין שגיאות אופליין לשגיאות שרת. משתמש ברכבת התחתית אינו בעיית שרת:

import NetInfo from '@react-native-community/netinfo';
let isConnected = true;
NetInfo.addEventListener(state => {
  isConnected = state.isConnected ?? true;
});
// В monitoredFetch, при catch:
if (!isConnected) {
  // Не отправляем в Sentry — это ожидаемый offline
  throw new OfflineError('No network connection');
}
// Иначе — реальная ошибка, логируем
Sentry.captureException(error, {
  tags: {
    connectivity: 'online'
  }
});

השוואת גישות להתראות

איך להגדיר התראות ב-Sentry?

התראות Sentry מבוססות על תנאי: /api/orders עבור ['auth-4xx'] → Slack/PagerDuty. שיעור שגיאות מעל קו הבסיס → התראה. לייצור, זה צריך לפעול 24/7. הנה מדריך שלב אחר שלב:

1. פתחו Alerts → Create Alert.
2. בחרו סוג: Issues (מספר שגיאות).
3. הגדירו קריטריון: סינון לפי רמה (// Добавляем breadcrumb при навигации navigation.addListener('state', (e) => { Sentry.addBreadcrumb({ category: 'navigation', message: `Navigate to ${e.data.state.routes[e.data.state.index].name}`, level: 'info', }); }); ), תגיות (import NetInfo from '@react-native-community/netinfo'; let isConnected = true; NetInfo.addEventListener(state => { isConnected = state.isConnected ?? true; }); // В monitoredFetch, при catch: if (!isConnected) { // Не отправляем в Sentry — это ожидаемый offline throw new OfflineError('No network connection'); } // Иначе — реальная ошибка, логируем Sentry.captureException(error, { tags: { connectivity: 'online' } }); ).
4. ציינו סף: לדוגמה, 50 אירועים ב-5 דקות.
5. הגדירו ערוץ: Slack, PagerDuty, אימייל.
6. הגדירו מרווח שקט (כדי למנוע ספאם).

בוצע. ההתראות יודיעו אוטומטית לצוות על עליות בשגיאות.

מה כלול בהתקנה כוללת?

אנחנו מבטיחים הגדרת ניטור נכונה. ההיקף כולל:

• שילוב Sentry באפליקציה (כל טכנולוגיה: React Native, Flutter, native).
• הגדרת טביעת אצבע לכל ה-endpoints.
• זיהוי אופליין והוספת breadcrumbs.
• פיתוח כללי התראה ושילוב עם המסנג'ר שלכם.
• תיעוד למפתחים.
• הדרכת צוות (1–2 שיחות).
• תמיכה לחודש לאחר ההשקה.

אנחנו מגדירים ניטור לאפליקציות ייצור כבר שנים. בין לקוחותינו חברות פינטק, מסחר אלקטרוני ו-SaaS. נבחן את הפרויקט שלכם—צרו קשר. פנו לייעוץ או הזמינו את ההתקנה עכשיו.

הערכה

הגדרת Sentry עם ניטור בקשות רשת, טביעת אצבע, זיהוי אופליין והתראות: 1–2 שבועות. העלות מחושבת באופן אישי לפי מורכבות וטכנולוגיה. רוצים להגן על האפליקציה שלכם? מלאו את טופס המשוב—נחזור אליכם תוך יום.