Firebase Crashlytics Hata Mesajlarını Sourcemap ile Yorumlama

Bugün, benim gibi Firebase Crashlytics kullanıp "Bu hata ne anlatıyor?" diye kara kara düşünenler için bir çözüm paylaşacağım. Genelde Crashlytics bize şöyle bir mesaj bırakıyor:

main.jsbundle:750:4271 - Line 750

Bu noktada optimize edilmiş koda ait ve kaynak kodumuzdaki satırlarla hiçbir şekilde uyuşmuyor. İşte burada Sourcemap devreye giriyor! Hazır mısınız? O zaman başlayalım.

Sourcemap Nedir ve Neden Önemlidir?

Sourcemap, sıkıştırılmış (minified) JavaScript dosyalarını, kaynak kodunuzdaki satırlarla eşleştiren bir harita dosyasıdır. Bu dosya sayesinde, hatanın hangi dosyada, hangi satırda ve hangi fonksiyonda olduğunu öğrenebilirsiniz. Yani Sourcemap, Crashlytics raporlarındaki "anlamsız" hataları okunabilir hale getirir.

Peki, Sourcemap dosyasını nasıl oluşturacaksınız? İşte komutlar:

Android İçin Sourcemap Üretimi

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 İçin Sourcemap Üretimi

react-native bundle   --platform ios   --dev false   --entry-file index.js   --bundle-output ./ios/main.jsbundle   --sourcemap-output ./ios/main.jsbundle.map

Bu komutları çalıştırdıktan sonra Sourcemap dosyanız hazır olacak. Şimdi bu dosya ile Crashlytics'ten gelen hataları eşleştirelim.

source-map Modülü ile Hata Çözümleme

Bu noktada Node.js kullanarak Firebase Crashlytics raporlarındaki hataları çözümleyebiliriz. Bunun için source-map kütüphanesini kullanacağız. Hadi adım adım ilerleyelim.

1. source-map Modülünü Kurma

Projeye source-map modülünü ekleyin:

npm install source-map

2. Node.js Script'i Yazma

Şimdi bir script oluşturalım. Bu script, Firebase Crashlytics hata raporlarındaki satır ve sütun bilgilerini Sourcemap dosyası ile eşleştirerek kaynak kodunuzdaki hatalı satırları bulacak.

const fs = require("fs");
const { SourceMapConsumer } = require("source-map");

async function mapError(stackTrace, sourceMapPath) {
  const rawSourceMap = JSON.parse(fs.readFileSync(sourceMapPath, "utf8"));
  const consumer = await new SourceMapConsumer(rawSourceMap);

  const mappedLocations = stackTrace.map((frame) => {
    const { line, column } = frame;
    return consumer.originalPositionFor({ line, column });
  });

  consumer.destroy();
  return mappedLocations;
}

// Örnek Kullanım:
const stackTrace = [{ line: 750, column: 4271 }]; // Crashlytics'ten alınan değerler
mapError(
  stackTrace,
  "./android/app/src/main/assets/index.android.bundle.map"
).then(console.log);

3. Örnek Çıktı

Script'i çalıştırdığınızda, aşağıdaki gibi bir sonuç alabilirsiniz:

[
  {
    source: 'src/components/MyComponent.js',
    line: 45,
    column: 12,
    name: 'myFunction'
  }
]

İşte bu kadar! Artık hatanın kaynak kodunuzdaki tam yerini ve hangi fonksiyondan kaynaklandığını görebiliyorsunuz. Bu bilgi, hata çözümlemede inanılmaz bir zaman kazandırır.