Mendapatkan laporan error yang dapat dibaca di dasbor Crashlytics (Web)

Pilih platform: iOS+ Android Web Flutter Unity


Aplikasi web mengompilasi, meminifikasi, dan mengacak nama kode dalam produksi untuk mengoptimalkan penggabungan jaringan. Tanpa peta sumber, laporan error di dasbor Crashlytics akan menampilkan stack trace yang di-obfuscate dan diminifikasi.

Untuk melakukan de-obfuscate stack trace dan menampilkan nama file serta nomor baris asli dalam laporan error, gunakan perintah CLI Firebase untuk mengupload peta sumber (file .js.map) ke Firebase.

Prasyarat

Sebelum mengupload peta sumber, pastikan Anda telah menginstal Firebase CLI v15.35.0 atau yang lebih baru. Pelajari cara menginstal atau mengupdate Firebase CLI.

Langkah 1: Aktifkan pembuatan peta sumber di build framework Anda

Konfigurasikan framework atau pemaket frontend Anda untuk membuat file sumber produksi (.js.map) selama proses build aplikasi:

Angular

Di Angular, Anda harus mengonfigurasi opsi sourceMap di dalam file ruang kerja angular.json atau meneruskan flag penggantian CLI --source-map:

Opsi 1 (direkomendasikan): Ubah angular.json

Buka file angular.json dan temukan konfigurasi build tertentu yang ingin Anda targetkan (seperti development atau production). Tetapkan parameter sourceMap di blok options atau configurations yang tepat:

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

Opsi 2: Penggantian command line

Jika Anda hanya memerlukan peta sumber untuk build verifikasi atau sesi proses debug sekali, tambahkan flag --source-map langsung ke perintah build Angular CLI Anda:

ng build --configuration production --source-map

Next.js

Perbarui file next.config.ts (atau next.config.js) Anda untuk mengaktifkan pembuatan peta sumber browser selama build produksi dengan menetapkan productionBrowserSourceMaps ke true:

// 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 menyimpan paket klien yang dihasilkan dan file .js.map peta sumber di dalam direktori .next di root project Anda.

React / Vite

Jika aplikasi React Anda menggunakan Vite sebagai pemaket build-nya, perbarui file vite.config.ts Anda untuk memunculkan peta sumber di dalam opsi build-nya:

// 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 menyimpan paket output yang dihasilkan dan file .js.map di dalam direktori dist secara default.

Langkah 2: Upload peta sumber menggunakan Firebase CLI

Setelah framework Anda membangun paket produksi dan membuat file .js.map, upload peta sumber menggunakan perintah firebase crashlytics:sourcemap:upload:

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

Perintah ini menelusuri secara rekursif semua file .js.map dalam jalur DIRECTORY yang disediakan (dist atau .next) dan menguploadnya ke Cloud Storage untuk pemetaan simbol.

Langkah 3: Menangani peta sumber

Membuat peta sumber bersama aset aplikasi web Anda dapat mengeksposnya ke permintaan browser publik, yang berpotensi menyebabkan kode sumber asli Anda bocor. Anda dapat mencegah hal ini tanpa kehilangan stack trace yang telah di-deobfuscate dengan mengonfigurasi server web Anda untuk menolak akses publik ke file .js.map, atau dengan meneruskan flag --clean ke firebase crashlytics:sourcemap:upload untuk otomatis menghapus file .js.map dari direktori build lokal Anda setelah menguploadnya ke Firebase.

Mengotomatiskan di pipeline build Anda

Untuk otomatis mengupload peta sumber ke Crashlytics dan menghapus file .js.map lokal sebelum deployment, perbarui skrip build di file package.json untuk meneruskan flag --clean ke firebase crashlytics:sourcemap:upload:

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"
}

Langkah berikutnya

  • Menyesuaikan laporan error — Pelajari cara melaporkan pengecualian yang ditangani, menambahkan kunci kustom untuk menyertai stack trace yang telah di-deobfuscate, dan mengonfigurasi pengambilan sampel.