חשיבות מפות המקור עבור React Native
ללא מפות מקור, קריסה ב-Firebase Crashlytics נראית כמו מחרוזת חסרת משמעות:
Fatal Exception: com.facebook.react.common.JavascriptException
[email protected]:1:92847
[email protected]:1:15234המספר Fatal Exception: com.facebook.react.common.JavascriptException [email protected]:1:92847 [email protected]:1:15234 — מיקום ב-bundle הממוזער. ראינו צוותים שמבזבזים שעות בניסיון לתקן באגים מעקבות מחסנית כאלה. מפת מקור הופכת זאת לנתיב קריא: 1:92847. בלעדיה, פרויקט ממוצע מבזבז 2-4 שעות לכל קריסה — עם 15-30 קריסות בחודש, זה 30-120 שעות של ניפוי באגים. התפקיד שלנו הוא להגדיר העלאה אוטומטית של מפות מקור לשירות הניטור, כך שכל קריסה תכיל מידע בר-פעולה. אנו עושים זאת במפתח מלא, עם אינטגרציה ל-CI שלך, תוך 4 שעות — יומיים. במשך 5 שנים, הקמנו מערכת זו עבור יותר מ-50 פרויקטים של React Native.
כיצד להעלות מפות מקור ל-Firebase Crashlytics
השתמש ב-Firebase CLI: onButtonPress @ src/screens/PaymentScreen.tsx:147:23. עבור פרויקטים עם Hermes, יש להרכיב תחילה את מפות המקור הדו-שכבתיות. Sentry פשוט יותר: הוא מרכיב מפות אוטומטית בעת ההעלאה, מה שהופך את ההתקנה למהירה פי 2. הנה מדריך שלב-אחר-שלב:
- התקן את Firebase CLI והתחבר:
firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID" /path/to/map. - בנה את ה-release bundle עם מפות מקור.
- אם אתה משתמש ב-Hermes, בצע הרכבה של מפת מקור.
- העלה את מפת המקור ל-Crashlytics:
firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID" android/app/build/generated/sourcemaps/react/release/index.android.bundle.map - עבור Sentry, השתמש ב-
npm install -g firebase-tools && firebase login:ci:
sentry-cli releases new "$RELEASE_VERSION"
sentry-cli sourcemaps upload --org "$SENTRY_ORG" --project "$SENTRY_PROJECT" --release "$RELEASE_VERSION" android/app/build/generated/sourcemaps/react/release/
- ודא שהגרסה ב-SDK תואמת לזו שהועברה ב-CLI.
דוגמה לאינטגרציה עם GitHub Actions – העלאת מפת מקור
---
- name: Upload Source Maps to Crashlytics
run: |
node node_modules/react-native/scripts/compose-source-maps.js \
android/app/build/generated/sourcemaps/react/release/index.android.bundle.packager.map \
android/app/build/generated/sourcemaps/react/release/index.android.bundle.compiler.map \
-o /tmp/composed.map
firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID_ANDROID" /tmp/composed.map
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
---
יצירת מפות מקור
React Native ממזער וממזג את כל קוד ה-JS לקובץ אחד (firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID" android/app/build/generated/sourcemaps/react/release/index.android.bundle.map / sentry-cli) ב-production bundle. במקביל, נוצרת מפת מקור (sentry-cli releases new "$RELEASE_VERSION" sentry-cli sourcemaps upload --org "$SENTRY_ORG" --project "$SENTRY_PROJECT" --release "$RELEASE_VERSION" android/app/build/generated/sourcemaps/react/release/ ) — טבלת מיפוי בין מיקומים ב-bundle לקוד המקור המקורי. Crashlytics ו-Sentry מקבלים מפות מקור אלה ומאחסנים אותן בשרתים שלהם. כאשר מתרחשת קריסה, הם מיישמים אוטומטית את המיפוי ומציגים את עקבות המחסנית המקורית. פקודות ליצירה:
# Android
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.bundle.map
# iOS
react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --sourcemap-output ios/main.jsbundle.map
ב-- name: Upload Source Maps to Crashlytics run: | node node_modules/react-native/scripts/compose-source-maps.js \ android/app/build/generated/sourcemaps/react/release/index.android.bundle.packager.map \ android/app/build/generated/sourcemaps/react/release/index.android.bundle.compiler.map \ -o /tmp/composed.map firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID_ANDROID" /tmp/composed.map env: FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }} הסטנדרטי, מפת מקור נוצרת אוטומטית ב-index.android.bundle. אבל יש בעיה: עם קומפילציה של Hermes, יש צורך במפת מקור מורכבת — Hermes יוצר שכבת מיפוי שנייה (bytecode → JS bundle) שיש להרכיב עם הראשונה (JS bundle → TypeScript).
מדוע Hermes מוסיף מורכבות למפות מקור
Hermes מהדר את ה-JS bundle ל-bytecode, ומכניס שכבת מיפוי נוספת. ללא הרכבה, שירותי הניטור מקבלים מיפוי רק ל-JS bundle, לא לקוד המקור המקורי. לדוגמה, המחסנית מצביעה על שורה ב-bundle, לא בקובץ main.jsbundle. הסקריפט index.android.bundle.map ממזג את שני המיפויים. עבור פרויקטים עם Hermes (מופעל כברירת מחדל מאז RN 0.70+), בצע:
node node_modules/react-native/scripts/compose-source-maps.js \
android/app/build/generated/sourcemaps/react/release/index.android.bundle.packager.map \
android/app/build/generated/sourcemaps/react/release/index.android.bundle.compiler.map \
-o android/app/build/generated/sourcemaps/react/release/index.android.bundle.mapללא שלב זה, Firebase Crashlytics יציג עקבות מחסנית המתייחסות לשורות ב-JS bundle, לא לקובץ TypeScript המקורי. Sentry, לעומת זאת, מרכיב מפות מקור אוטומטית בעת ההעלאה, מה שהופך את ההתקנה לפשוטה פי 2 עבור Hermes.
השוואת שירותי ניטור
| פרמטר | Firebase Crashlytics | Sentry |
|---|---|---|
| CLI | firebase-tools | @sentry/cli |
| הרכבת Hermes | נדרשת הרכבה ידנית | תמיכה אוטומטית |
| גרסאות | באמצעות # Android react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.bundle.map # iOS react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle --sourcemap-output ios/main.jsbundle.map ומיפוי |
./gradlew bundleRelease חובה ב-SDK וב-CLI |
| מורכבות אינטגרציה | גבוהה יותר עבור Hermes | נמוכה יותר – פחות שלבים |
ההתקנה של Sentry מהירה פי 2 מזו של Firebase עבור פרויקטים עם Hermes. Firebase פופולרי פי 3 בקרב צוותי Android בשל המערכת האקולוגית המובנית שלו. בחר בהתאם לסטack שלך.
טעויות נפוצות ב-deobfuscation
| טעות | סיבה | פתרון |
|---|---|---|
| מחסנית לא מפוענחת | אי-התאמת גרסאות | השתמש בפורמט אחיד app/build/generated/sourcemaps/react/release/ |
| מפת מקור לא נמצאה | לא הועלתה ב-CI | הוסף שלב העלאה לאחר הבנייה |
| מחסנית מתייחסת ל-bundle | Hermes ללא הרכבה | הרץ compose-source-maps.js |
מה כלול בעבודה
אנו לוקחים אחריות מלאה על ההתקנה, ומספקים את התוצרים הבאים:
- ניתוח תצורת הבנייה הנוכחית (Hermes, נוכחות bundle, CI)
- סקריפטים להרכבת מפות מקור עבור Hermes (במידת הצורך) עם תיעוד
- אינטגרציה ל-CI (GitHub Actions, GitLab CI, Bitrise – כל אחד) עם גישה לסקריפטים
- הסכמה על פורמט גרסה ויישום ב-SDK
- אימות של deobfuscation עם קריסת בדיקה
- הדרכה לצוות שלך (עד שעה)
- תמיכה לאחר ההתקנה למשך 30 יום
אנו מבטיחים שאחרי ההתקנה, תקבל עקבות מחסנית קריאות לכל קריסה. עשינו זאת עבור יותר מ-50 פרויקטים של React Native במשך 5 שנים. צור קשר להערכת הפרויקט שלך — הייעוץ זמין. קבל פתרון מוכן עם העלאה אוטומטית של מפות מקור שתפחית את זמן הניפוי ב-70%.
לוחות זמנים ועלות
לוח זמנים: 4 שעות — יומיים בהתאם לתצורת ה-CI הנוכחית ולנוכחות Hermes. טווח עלות: $500–$1500 בהתאם למורכבות. כתוב לנו — נבדוק את הפרויקט שלך. חיסכון שנתי משוער: $2,000–$5,000 בזמן מפתחים.