Debugging

Flipper Sonrası React Native Debugging

DebuggingDevTools

Flipper sonrası modern RN DevTools, platform native araçları, network inspect, native modül triage ve production crash analitiği için pratik toolkit.

EG

Emre Gürbüz

1 Ağustos 2026 · 4 dk okuma

Flipper uzun süre React Native’in “her şey dahil” debug cebiydi: network, layout, crash plugin’leri — tek pencerede. Bakım maliyeti, New Architecture uyum zorluğu ve resmi yön değişikliği onu varsayılandan çıkardı.

Tek bir “Flipper 2” yok; best-of-breed birleşimi var. Senior debug: plugin aramaktan çok — JS mi native mi, dev mi release mi, Hermes source map var mı — sorularını hızlı cevaplamaktır.

Ne değişti ve neden?

  • New Architecture: Fabric, Turbo Modules ve JSI, Flipper’ın hook noktalarını değiştirdi
  • Hermes varsayılanı: Chrome Remote Debugging (eski JSC dönemi) kırılgan hale geldi
  • Bakım yükü: Plugin ekosistemi RN sürüm hızına yetişemedi
  • Resmi yön: React Native DevTools (CDP tabanlı), LogBox, platform profiler’ları

Chrome’da “Debug JS Remotely” New Arch projelerinde önerilmez — farklı motor, yanıltıcı stack. Hermes ile debug RN DevTools veya platform araçları üzerinden yapılmalı.

Eski Flipper plugin’lerinizi envanterleyin. Her RN minor’da uyumsuzluk riski birikir — geçiş planını backlog’a yazın.

Modern JavaScript debugging

RN DevTools, Chrome DevTools Protocol (CDP) üzerinden Hermes’e bağlanır. Breakpoint, call stack, console, scope — web’e yakın deneyim.

DevTools’u açmak için:

npx react-native start
# Cihazda Dev Menu → Open DevTools (sürüme göre menü metni değişir)

React DevTools ile component tree ve Profiler ayrı çalışır. JS logic hatası → RN DevTools; render patolojisi → React DevTools Profiler.

LogBox disiplini

Ignore list ile uyarıları “süslemeyin” — her ignore teknik borçtur. Haftalık review yapın. console.log spam’i JS thread’i yer; production’da verbose log kapalı olsun.

Network inspect: Flipper Network yerine

Alternatifler:

  • Proxyman / Charles / mitmproxy: sistem proxy, HTTPS decrypt (debug build’de cert pinning gevşetilmeli)
  • Backend correlation: request-id ile client ↔ server log
  • Thin fetch wrapper: kendi logger — PII redaction zorunlu

Production’da full body log yasak; breadcrumb + status + latency yeterli. Cert pinning’i yalnızca internal debug flavor’da kapatın.

Native crash, ANR ve JS error ayrımı

BelirtiKatmanAraç
Redbox, JS stackJavaScriptRN DevTools, LogBox
App kapanması, native stackNativeLogcat, Console.app, Crashlytics
Donma, “App not responding”ANR (Android)ANR trace, Perfetto
Sessiz crash (release)Native + obfuscationdSYM, mapping.txt, source map

JS redbox production’da yoktur. Source map + native symbol olmadan stack anlamsızdır.

Zincir: Metro bundle → Hermes bytecode → Sentry/Crashlytics upload. Her release’de üç artifact: JS source map, Android mapping.txt, iOS dSYM.

Native modül debug

Turbo Module / JSI hataları JS’te şöyle görünür:

  • TurboModuleRegistry.getEnforcing(...): 'X' could not be found
  • NativeModule X is null
  • Fabric “View config not found for component X”

JS stack’e bakıp bitirmeyin. Android Studio veya Xcode’da native breakpoint koyun. Generated kodu okuyun, init order’ı takip edin.

Fabric layout debug

React DevTools yetmez. Android Layout Inspector ve iOS View Hierarchy Debugger native view tree’yi gösterir. Overdraw GPU profiler ile; layout native hierarchy ile triage edin.

Önerilen toolkit (2026)

  1. RN DevTools + React DevTools — JS debug ve render
  2. Proxyman veya Charles — network (debug flavor)
  3. Sentry / Crashlytics — production crash
  4. Perfetto / Instruments — performans
  5. Maestro / Detox — repro otomasyonu
  6. Logcat / Console.app — native log
  7. (Opsiyonel) Flipper — yalnızca kritik plugin varsa, izole debug build’de

Toolkit’i ekip runbook’una yazın. Yeni gelen “Flipper nerede?” diye sormasın.

Triage ağacı: ilk 60 saniye

Crash/bug raporu geldi
├─ Repro dev build'de var mı?
│  ├─ Evet → RN DevTools / React DevTools
│  └─ Hayır → Release build + symbolicated stack
├─ Stack JS mi native mi?
│  ├─ JS → Source map doğru release'e mi bağlı?
│  └─ Native → dSYM / mapping.txt var mı?
├─ Network involved mi?
│  ├─ Evet → Proxyman + backend correlation
│  └─ Hayır → UI/perf trace
└─ Native modül involved mi?
   └─ Evet → Native breakpoint + codegen review

Production checklist

  • Ekip “Flipper yok” runbook’unu biliyor
  • Source map upload CI’da otomatik
  • dSYM + mapping.txt upload otomatik
  • Network inspect için debug-only cert stratejisi dokümante
  • Native vs JS triage ağacı wiki’de
  • LogBox ignore list review periyodu tanımlı
  • Low-end cihazda repro alışkanlığı
  • PII redaction debug logger’larda aktif

Özet

Flipper’ın geri çekilmesi tooling’in bitişi değil; dağınık ama daha doğru araçlara geçiştir. RN DevTools Hermes ile uyumlu JS debug sunar; network için proxy; crash için Sentry + symbol; native için platform IDE. Katmanı doğru tespit et, doğru build’de repro al, doğru symbol’le stack’i oku.

Diğer yazılar