Crashlytics kontrol panelinde (web) okunabilir kilitlenme raporları alma

Platform seçin: iOS+ Android Web Flutter Unity


Web uygulamaları, ağ paketlemeyi optimize etmek için üretimde kod adlarını derler, sadeleştirir ve karıştırır. Kaynak eşlemeleri olmadan, Crashlytics kontrol panelindeki kilitlenme raporları, sadeleştirilmiş ve gizlenmiş yığın izlemeleri gösterir.

Yığın izlemelerinizin kodunu çözmek ve Error Reporting raporlarınızda orijinal dosya adları ile satır numaralarını görüntülemek için Firebase KSA komutunu kullanarak kaynak haritalarınızı (.js.map dosyaları) Firebase'e yükleyin.

Ön koşullar

Kaynak haritaları yüklemeden önce Firebase CLI v15.35.0 veya sonraki bir sürümün yüklü olduğundan emin olun. Firebase CLI'yı nasıl yükleyeceğinizi veya güncelleyeceğinizi öğrenin.

1. adım: Çerçeve derlemenizde kaynak eşleme oluşturmayı etkinleştirin

Uygulama derleme süreciniz sırasında üretim kaynak (.js.map) dosyaları oluşturmak için ön uç çerçevenizi veya paketleyicinizi yapılandırın:

Angular

Angular'da, angular.json çalışma alanı dosyanızda sourceMap seçeneğini yapılandırmanız veya --source-map CLI geçersiz kılma işaretini iletmeniz gerekir:

1. seçenek (önerilen): angular.json öğesini değiştirin

angular.json dosyanızı açın ve hedeflemek istediğiniz derleme yapılandırmasını (ör. development veya production) bulun. sourceMap parametresini tam olarak options veya configurations bloğunun altında ayarlayın:

"projects": {
  "APP_NAME": {
    "architect": {
      "build": {
        "options": {
          "sourceMap": true
        },
        "configurations": {
          "production": {
            "sourceMap": {
              "scripts": true,
              "vendor": false
            }
          }
        }
      }
    }
  }
}

2. seçenek: Komut satırı geçersiz kılma

Kaynak eşlemelerine yalnızca tek seferlik bir doğrulama derlemesi veya hata ayıklama oturumu için ihtiyacınız varsa --source-map işaretini doğrudan Angular CLI derleme komutunuza ekleyin:

ng build --configuration production --source-map

Next.js

productionBrowserSourceMaps değerini true olarak ayarlayarak üretim derlemeleri sırasında tarayıcı kaynak haritası oluşturmayı etkinleştirmek için next.config.ts (veya next.config.js) dosyanızı güncelleyin:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Enable browser source map emission for Crashlytics stack trace de-obfuscation
  productionBrowserSourceMaps: true,
  // ... rest of your Next.js configuration
};

export default nextConfig;

Next.js, oluşturulan istemci paketlerini ve kaynak eşleme .js.map dosyalarını proje kök dizininizdeki .next dizininde depolar.

React / Vite

React uygulamanız derleme paketleyicisi olarak Vite kullanıyorsa derleme seçeneklerinde kaynak haritaları oluşturmak için vite.config.ts dosyanızı güncelleyin:

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    // Emit sourcemap files for Crashlytics upload
    sourcemap: true,
  },
});

Vite, oluşturulan çıkış paketlerini ve .js.map dosyalarını varsayılan olarak dist dizininde depolar.

2. adım: Firebase CLI'yı kullanarak kaynak eşlemeleri yükleyin

Çerçeveniz üretim paketlerinizi oluşturup .js.map dosyalarını oluşturduktan sonra firebase crashlytics:sourcemap:upload komutunu kullanarak kaynak haritaları yükleyin:

firebase crashlytics:sourcemap:upload \
  --project PROJECT_ID \
  --app FIREBASE_APP_ID \
  --debug DIRECTORY

Bu komut, sağlanan DIRECTORY yolundaki (dist veya .next) tüm .js.map dosyalarını yinelemeli olarak arar ve sembol eşleme için Cloud Storage konumuna yükler.

3. adım: Kaynak eşlemelerini işleme

Web uygulaması öğelerinizle birlikte kaynak haritaları oluşturmak, bunları herkese açık tarayıcı isteklerine maruz bırakabilir ve orijinal kaynak kodunuzun sızdırılmasına neden olabilir. Web sunucunuzu .js.map dosyalarına herkese açık erişimi reddedecek şekilde yapılandırarak veya --clean işaretini firebase crashlytics:sourcemap:upload'ye ileterek .js.map dosyalarını Firebase'e yükledikten sonra yerel derleme dizininizden otomatik olarak silebilirsiniz. Böylece, gizliliği kaldırılmış yığın izlemeleri kaybetmeden bu sorunu önleyebilirsiniz.

Derleme ardışık düzeninizde otomatikleştirme

Kaynak haritaları otomatik olarak Crashlytics hizmetine yüklemek ve dağıtımdan önce yerel .js.map dosyalarını silmek için package.json dosyanızdaki build komut dosyanızı güncelleyerek --clean işaretini firebase crashlytics:sourcemap:upload hizmetine iletin:

Angular

"scripts": {
  "build": "ng build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

Next.js

"scripts": {
  "build": "next build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug .next"
}

React / Vite

"scripts": {
  "build": "vite build && firebase crashlytics:sourcemap:upload --project PROJECT_ID --app FIREBASE_APP_ID --clean --debug dist"
}

Sonraki adımlar

  • Kilitlenme raporlarını özelleştirme - İşlenen istisnaları nasıl raporlayacağınızı, kod çözme işlemi uygulanmış yığın izlemelerinize eşlik edecek özel anahtarları nasıl ekleyeceğinizi ve örneklemeyi nasıl yapılandıracağınızı öğrenin.