Uzyskiwanie czytelnych raportów o awariach w panelu Crashlytics (internet)

Wybierz platformę: iOS+ Android Web Flutter Unity


Aplikacje internetowe kompilują, minifikują i szyfrują kryptonimy w środowisku produkcyjnym, aby zoptymalizować pakiety sieciowe. Bez map źródeł raporty o awariach w panelu Crashlytics zawierają zminifikowane i zaciemnione zrzuty stosu.

Aby usunąć zaciemnienie kodu ze zrzutów stosu i wyświetlać oryginalne nazwy plików oraz numery wierszy w raportach Error Reporting, użyj polecenia interfejsu wiersza poleceń Firebase, aby przesłać mapy źródłowe (pliki .js.map) do Firebase.

Wymagania wstępne

Zanim prześlesz mapy źródłowe, upewnij się, że masz zainstalowany interfejs wiersza poleceń Firebase w wersji 15.35.0 lub nowszej. Dowiedz się, jak zainstalować lub zaktualizować interfejs wiersza poleceń Firebase.

Krok 1. Włącz generowanie mapy źródłowej w kompilacji platformy

Skonfiguruj platformę lub pakiet frontendowy, aby generować produkcyjne pliki źródłowe (.js.map) podczas procesu kompilacji aplikacji:

Angular

W Angularze musisz skonfigurować opcję sourceMap w pliku obszaru roboczego angular.json lub przekazać flagę zastąpienia interfejsu wiersza poleceń --source-map:

Opcja 1 (zalecana): zmodyfikuj angular.json

Otwórz plik angular.json i znajdź konkretną konfigurację kompilacji, na którą chcesz kierować reklamy (np. development lub production). Ustaw parametr sourceMap w odpowiednim bloku options lub configurations:

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

Opcja 2. Zastąpienie wiersza poleceń

Jeśli mapy źródeł są Ci potrzebne tylko do jednorazowej kompilacji weryfikacyjnej lub sesji debugowania, dodaj flagę --source-map bezpośrednio do polecenia kompilacji interfejsu wiersza poleceń Angular:

ng build --configuration production --source-map

Next.js

Zaktualizuj plik next.config.ts (lub next.config.js), aby włączyć generowanie mapy źródłowej przeglądarki podczas kompilacji produkcyjnych, ustawiając productionBrowserSourceMaps na 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 przechowuje wygenerowane pakiety klienta i pliki mapy źródłowej .js.map w katalogu .next w głównym folderze projektu.

React / Vite

Jeśli aplikacja React używa Vite jako pakietu kompilacji, zaktualizuj plik vite.config.ts, aby emitować mapy źródłowe w opcjach kompilacji:

// 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 domyślnie przechowuje wygenerowane pakiety wyjściowe i pliki .js.map w katalogu dist.

Krok 2. Prześlij mapy źródłowe za pomocą interfejsu wiersza poleceń Firebase

Gdy platforma utworzy pakiety produkcyjne i wygeneruje pliki .js.map, prześlij mapy źródłowe za pomocą polecenia firebase crashlytics:sourcemap:upload:

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

To polecenie rekurencyjnie wyszukuje wszystkie pliki .js.map w podanej ścieżce DIRECTORY (dist lub .next) i przesyła je do Cloud Storage w celu mapowania symboli.

Krok 3. Przetwarzanie map źródeł

Generowanie map źródeł wraz z komponentami aplikacji internetowej może narazić je na publiczne żądania przeglądarki, co może spowodować wyciek oryginalnego kodu źródłowego. Możesz temu zapobiec bez utraty odczytelnych zrzutów stosu, konfigurując serwer WWW tak, aby odmawiał publicznego dostępu do plików .js.map, lub przekazując flagę --clean do firebase crashlytics:sourcemap:upload, aby automatycznie usuwać pliki .js.map z lokalnego katalogu kompilacji po przesłaniu ich do Firebase.

Automatyzacja w potoku kompilacji

Aby automatycznie przesyłać mapy źródłowe do Crashlytics i usuwać lokalne pliki .js.map przed wdrożeniem, zaktualizuj skrypt build w pliku package.json, aby przekazywać flagę --clean do 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"
}

Dalsze kroki

  • Dostosowywanie raportów o awariach – dowiedz się, jak zgłaszać obsługiwane wyjątki, dodawać klucze niestandardowe do odczytelnych zrzutów stosu i konfigurować próbkowanie.