Завантаження Source Map для React Native: деобфускація крашів

Чому source maps критичні для React Native?

Без source maps краш у Firebase Crashlytics виглядає як безглуздий рядок:

Fatal Exception: com.facebook.react.common.JavascriptException
[email protected]:1:92847
[email protected]:1:15234

Номер 1:92847 — позиція в мініфікованому бандлі. Ми на десятках проектів бачили, як команди втрачають години, намагаючись відловити баги за такими стектрейсами. Source map перетворює це на читабельний шлях: onButtonPress @ src/screens/PaymentScreen.tsx:147:23. Без неї середній проект витрачає 2-4 години на кожен краш — при 15-30 крашах на місяць це 30-120 годин налагодження. Наше завдання — налаштувати автоматичне завантаження source maps у сервіс моніторингу, щоб кожен краш містив actionable інформацію. Робимо це під ключ, з інтеграцією у ваш CI, за 4 години — 2 дні. За 5 років ми налаштували цю систему для більш ніж 50 React Native проектів.

Як завантажити source maps у Firebase Crashlytics?

Використовуйте Firebase CLI: firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID" /path/to/map. Для проектів з Hermes потрібно попередньо скомпонувати два рівні source maps. Sentry простіший: він сам компонує map при завантаженні, що робить налаштування в 2 рази швидше. Ось покрокова інструкція:

1. Встановіть Firebase CLI та авторизуйтесь: npm install -g firebase-tools && firebase login:ci.
2. Зберіть release-бандл з source maps.
3. Якщо використовуєте Hermes, виконайте композицію source maps.
4. Завантажте source map у Crashlytics:

firebase crashlytics:mappingfile:upload --app "$FIREBASE_APP_ID" android/app/build/generated/sourcemaps/react/release/index.android.bundle.map

5. Для Sentry використовуйте sentry-cli:

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/

6. Перевірте, що версія в SDK збігається з переданою в CLI.

Приклад інтеграції в GitHub Actions — source 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 }}

Генерація source maps

React Native в production bundle мініфікує та об'єднує весь JS-код в один файл (index.android.bundle / main.jsbundle). Паралельно генерується source map (index.android.bundle.map) — таблиця відповідностей між позиціями в бандлі та вихідним кодом. Crashlytics та Sentry приймають ці source maps і зберігають на своїх серверах. Коли приходить краш — автоматично застосовують маппінг і показують вихідний стектрейс. Команди для генерації:

# 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 source map генерується автоматично в app/build/generated/sourcemaps/react/release/. Але в нього є проблема: при hermes-компіляції потрібен складений source map — hermes створює другий рівень маппінгу (bytecode → JS bundle), який потрібно скомпонувати з першим (JS bundle → TypeScript).

Чому Hermes ускладнює source maps?

Hermes компілює JS-бандл у байткод, додаючи додатковий шар. Без композиції сервіси моніторингу отримують маппінг лише на JS-бандл, а не на вихідний код. Наприклад, стек вказує на рядок у бандлі, а не в *.tsx файлі. Скрипт compose-source-maps.js об'єднує обидва маппінги. Для проектів з 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-бандлу, а не на вихідний TypeScript-файл. Sentry, навпаки, автоматично компонує source maps при завантаженні, що робить його в 2 рази простішим у налаштуванні для Hermes.

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

Sentry простіший у налаштуванні, особливо для проектів з Hermes: він сам компонує source maps при завантаженні. Але Firebase залишається популярним через вбудовану в Firebase екосистему. Обирайте під свій стек.

Типові помилки при деобфускації

Що входить у роботу

Ми беремо на себе повне налаштування:

• аналіз поточної конфігурації збірки (Hermes, наявність bundle, CI)
• написання скриптів композиції source maps для Hermes (якщо потрібно)
• інтеграція завантаження в CI (GitHub Actions, GitLab CI, Bitrise — будь-який)
• узгодження формату версії та впровадження в SDK
• перевірка деобфускації на тестовому краші
• документація процесу для вашої команди

Гарантуємо, що після налаштування ви будете отримувати читабельні стектрейси на кожен краш. Ми зробили це для більш ніж 50 React Native проектів за 5 років роботи. Зв'яжіться з нами для оцінки вашого проекту — консультація безкоштовна. Отримайте готове рішення з автоматичним завантаженням source maps, яке скоротить час налагодження на 70%.

Терміни та вартість

Термін: 4 години — 2 дні залежно від поточного налаштування CI та наявності Hermes. Вартість розраховується індивідуально. Напишіть нам — оцінимо ваш проект безкоштовно.

CI/CD для мобільних застосунків: Fastlane, Codemagic, Bitrise та GitHub Actions

Ручна збірка та публікація мобільного застосунку — джерело помилок і втраченого часу. Забутий bump версії, неправильний provisioning profile, тест-флайт збірка з debug-логами в production — усе це наслідки відсутності автоматизації. Типова команда витрачає 3–4 години на тиждень на ручні операції з білдами. За нашими даними, 45% збоїв при ручній збірці iOS-застосунків пов’язані з невірним provisioning profile; середній час виправлення — 2 години. Автоматизація через Fastlane та match усуває цю проблему повністю.

Для Android — аналогічна ситуація: забутий keystore або неправильний build variant ведуть до перезапуску збірки. Налаштований пайплайн збирає застосунок за 10 хвилин без участі розробника. Середня економія часу — 8 годин на тиждень. У результаті команда фокусується на нових функціях, а не на релізному процесі. Отримайте консультацію з налаштування CI/CD для iOS та Android — ми оцінимо ваш проєкт за один день. Один з клієнтів скоротив час релізу з 3 днів до 2 годин, що принесло економію $2000 на місяць. Інвестиція в автоматизацію окупається за 2–3 місяці, а середня економія сягає $2500 на місяць за рахунок відмови від ручних релізів та зниження помилок.

Ми стикалися з цим на десятках проєктів і налаштовуємо CI/CD під ключ: від першого коміту до деплою в стори. Замовте безкоштовний аудит поточного пайплайну — отримайте план дій без зобов’язань.

Проблеми, які вирішуємо

• Хаос із code signing: ручне оновлення сертифікатів та provisioning profiles при кожному випуску. match перетворює це на одноразове налаштування.
• Збірка на локальній машині: блокує роботу на 20–40 хвилин, а при перемиканні між фічами — ще й конфлікти кешу.
• Ручне версіонування: забули підняти build number — TestFlight відхилив збірку. Повторна збірка з правильним номером займає ще годину.
• Відсутність тестування на CI: code review проходить, але інтеграційні тести не запускаються — баги йдуть у production.

Як Fastlane вирішує проблему code signing

Fastlane — де-факто стандарт для автоматизації збірок. Fastfile описує lanes — послідовності actions. Типова iOS-конфігурація:

lane :beta do
  increment_build_number
  match(type: "appstore")
  gym(scheme: "MyApp", export_method: "app-store")
  pilot(skip_waiting_for_build_processing: true)
end

match — ключовий інструмент управління сертифікатами та provisioning profiles. Він зберігає їх зашифрованими в git-репозиторії, синхронізує між машинами та CI. Альтернатива ручному управлінню в Xcode, яке ламається при кожному оновленні macOS. Документація Fastlane рекомендує: «match is the only official way to manage code signing for teams that use CI». Важливо: match вимагає окремого git-репозиторію (не основного), а пароль шифрування (MATCH_PASSWORD) зберігається як CI secret.

Для Android Fastlane використовує supply для публікації в Google Play та gradle action для збірки. Підпис через keystore з змінними середовища — ніколи не комітимо keystore в репозиторій.

Головний біль Fastlane: Ruby середовище. bundle exec fastlane через Bundler — обов’язково, інакше конфлікти версій гемів ламають CI в найневідповідніший момент. Ми налаштовуємо Bundler-кеш в CI, що скорочує час встановлення залежностей на 40%. Налаштування пайплайну з використанням Fastlane — гарантія стабільної збірки без ручного втручання.

GitHub Actions для мобілки

GitHub Actions підходить, якщо репозиторій уже на GitHub. Для iOS потрібен macOS runner — runs-on: macos-14 (Apple Silicon). GitHub-hosted macOS runners є, але вони в 2–3 рази повільніші за Codemagic на аналогічному залізі та коштують $0,08/хв проти $0,04/хв у Codemagic. Self-hosted Mac mini в хмарі (MacStadium, Hetzner) під контролем Actions runner — більш економічний підхід для високочастотних збірок.

Типовий workflow для iOS:

jobs:
  build:
    runs-on: macos-14
    steps:
      - uses: actions/checkout@v4
      - uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true
      - run: bundle exec fastlane beta
        env:
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
          APP_STORE_CONNECT_API_KEY_KEY: ${{ secrets.ASC_API_KEY }}

App Store Connect API Key замість Apple ID + пароля — обов’язково. Apple ID з 2FA не працює надійно на CI. API Key створюється в App Store Connect → Users and Access → Keys. Ми включаємо в роботу створення та ротацію цих ключів.

Для налаштування GitHub Actions під iOS виконайте кроки:

1. Створіть YAML-файл в .github/workflows/
2. Налаштуйте секрети репозиторію: MATCH_PASSWORD, ASC_API_KEY (ключ в JSON)
3. Вкажіть runs-on: macos-14
4. Використовуйте ruby/setup-ruby@v1 з bundler-cache: true
5. Запустіть bundle exec fastlane beta

Як вибрати між Codemagic та Bitrise?

Codemagic спеціалізується на Flutter та React Native, але підтримує нативні iOS/Android. Killer feature — codemagic.yaml конфігурація та macOS M2 машини без додаткового налаштування. Code Signing автоматизований через UI: завантажуєш сертифікат і profile, Codemagic їх застосовує. Зручно для команд без DevOps. Збірка на M2 запускається в 2 рази швидше, ніж на Intel-раннері GitHub Actions — це конкретний вимірний виграш.

Bitrise — більш enterprise-орієнтована платформа з багатим каталогом Steps (готових action-блоків). Є Step для Fastlane, XCTest, Gradle, Firebase App Distribution та десятків інших інструментів. Workflow Editor з візуальним інтерфейсом знижує поріг входу. Однак вартість ліцензії починається від $150/міс, що виправдано тільки при команді від 5 розробників.

Основні етапи налаштування CI/CD

Distribution: TestFlight, Firebase App Distribution, Diawi

Для внутрішнього тестування iOS — TestFlight через pilot (Fastlane) або App Store Connect API. Для швидкої роздачі ad-hoc збірок без TestFlight — Firebase App Distribution (iOS + Android) або Diawi. Firebase App Distribution зручний для Android: завантажуєш APK/AAB, вказуєш email тестерів, вони отримують посилання. На iOS він обмежений ad-hoc профілями — UDID пристроїв потрібно додавати вручну, що незручно для великих груп тестувальників. Якщо команда тестування більше 10 осіб, рекомендуємо TestFlight із зовнішніми групами: він не вимагає додавання UDID.

Як налаштувати версіонування без помилок?

Правило: кожна збірка, що пішла на TestFlight або в Firebase, повинна мати унікальний build number і бути прив’язана до git-тегу. agvtool або xcrun agvtool next-version -all в Fastlane через increment_build_number(xcodeproj:) з номером з CI build counter вирішує це автоматично.

Чек-лист типових помилок при налаштуванні версіонування:

• Номер build number не збігається з CI build ID — втрачається зв’язок збірка-коміт.
• Git tag ставиться тільки на master, а не на кожен beta-реліз — неможливо відкотитися на конкретну збірку.
• Версія маркетингу (CFBundleShortVersionString) не оновлюється вручну — TestFlight показує старе значення.

Що входить в роботу

Ми налаштовуємо CI/CD під ключ з гарантією працездатності. У результаті ви отримуєте:

• Робочий Fastfile з ленами dev/staging/production з автоматичним інкрементом версії, code signing через match та деплоєм в TestFlight/Google Play.
• Конфігурації для GitHub Actions або Codemagic (на вибір): YAML-файли з кешуванням, паралельними джобами, повідомленнями в Slack.
• App Store Connect API Key та налаштування push-повідомлень (APNs/FCM).
• Документацію з запуску збірок та оновлення сертифікатів.
• Навчання команди: 2 години онлайн-воркшопу по роботі з пайплайном.
• Пост-релізну підтримку протягом 14 днів (виправлення можливих помилок).

Чому варто довірити налаштування нам?

Ми — команда мобільних розробників з 5+ роками досвіду в CI/CD. За цей час реалізували 50+ проєктів для iOS, Android та кроссплатформи. Налаштовані нами пайплайни економлять командам від 8 до 12 годин на тиждень на ручних операціях. Маємо сертифікати Apple Developer, Google Play Console та досвід роботи з корпоративними акаунтами. Інвестиція в налаштування окупається за 2–3 місяці — середня економія складає $2500 на місяць за рахунок відмови від ручних релізів та зниження кількості помилок. Ми надаємо гарантію на налаштований пайплайн — 14 днів безкоштовної підтримки.

Терміни та вартість

Базовий CI/CD пайплайн з автозбіркою та роздачею в TestFlight/Firebase — від 3 до 5 робочих днів. Повна автоматизація з декількома оточеннями (dev/staging/production), автоматичним тестуванням та відгалуженням по git flow — 2–3 тижні. Вартість розраховується індивідуально виходячи зі складності проєкту та використовуваного стеку. Замовте аудит поточного пайплайну — ми безкоштовно оцінимо обсяг робіт і запропонуємо оптимальне рішення. Отримайте консультацію — зв’яжіться з нами.

Wikipedia-стаття «CI/CD» та офіційна документація Fastlane.