Lesbare Absturzberichte im Crashlytics-Dashboard (Web) abrufen

Plattform auswählen: iOS+ Android Web Flutter Unity


Webanwendungen kompilieren, minimieren und verschlüsseln Codenamen in der Produktion, um die Netzwerkbündelung zu optimieren. Ohne Quellzuordnungen werden in Absturzberichten im Crashlytics-Dashboard minimierte und verschleierte Stacktraces angezeigt.

Wenn Sie Ihre Stacktraces deobfuskieren und die ursprünglichen Dateinamen und Zeilennummern in Ihren Error Reporting-Berichten anzeigen möchten, verwenden Sie den Firebase-Befehlszeilenbefehl, um Ihre Quellzuordnungen (.js.map-Dateien) in Firebase hochzuladen.

Vorbereitung

Bevor Sie Quellzuordnungen hochladen, müssen Sie die Firebase-Befehlszeile ab Version 15.35.0 installiert haben. Firebase-Befehlszeile installieren oder aktualisieren

Schritt 1: Generierung von Quellzuordnungen im Framework-Build aktivieren

Konfigurieren Sie Ihr Frontend-Framework oder Ihren Bundler so, dass während des Build-Prozesses der Anwendung Produktionsquelldateien (.js.map) generiert werden:

Angular

In Angular müssen Sie die Option sourceMap in Ihrer Arbeitsbereichsdatei angular.json konfigurieren oder das CLI-Überschreibungs-Flag --source-map übergeben:

Option 1 (empfohlen): angular.json ändern

Öffnen Sie die Datei angular.json und suchen Sie die gewünschte Build-Konfiguration (z. B. development oder production). Legen Sie den Parameter sourceMap im genauen Block options oder configurations fest:

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

Option 2: Überschreiben über die Befehlszeile

Wenn Sie Quellzuordnungen nur für einen einmaligen Verifizierungs-Build oder eine Debugging-Sitzung benötigen, hängen Sie das Flag --source-map direkt an den Angular CLI-Build-Befehl an:

ng build --configuration production --source-map

Next.js

Aktualisieren Sie Ihre next.config.ts- (oder next.config.js-)Datei, um die Generierung von Browser-Quellzuordnungen während Produktions-Builds zu aktivieren. Setzen Sie dazu productionBrowserSourceMaps auf 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 speichert generierte Client-Bundles und Quellzuordnungsdateien (.js.map) im Verzeichnis .next im Stammverzeichnis Ihres Projekts.

React / Vite

Wenn Ihre React-Anwendung Vite als Build-Bundler verwendet, aktualisieren Sie die Datei vite.config.ts, damit Quellzuordnungen in den Build-Optionen ausgegeben werden:

// 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 speichert generierte Ausgabebundles und .js.map-Dateien standardmäßig im Verzeichnis dist.

Schritt 2: Quellzuordnungen mit der Firebase-Befehlszeile hochladen

Nachdem Ihr Framework die Produktions-Bundles erstellt und .js.map-Dateien generiert hat, laden Sie die Quellzuordnungen mit dem Befehl firebase crashlytics:sourcemap:upload hoch:

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

Mit diesem Befehl werden alle .js.map-Dateien im angegebenen DIRECTORY-Pfad (dist oder .next) rekursiv gesucht und zur Symbolzuordnung in Cloud Storage hochgeladen.

Schritt 3: Quellzuordnungen verarbeiten

Wenn Sie Quellzuordnungen zusammen mit Ihren Web-App-Assets generieren, können diese für öffentliche Browseranfragen zugänglich gemacht werden, was möglicherweise dazu führt, dass Ihr ursprünglicher Quellcode offengelegt wird. Sie können dies verhindern, ohne de-obfuskierte Stacktraces zu verlieren, indem Sie entweder Ihren Webserver so konfigurieren, dass der öffentliche Zugriff auf .js.map-Dateien verweigert wird, oder indem Sie das Flag --clean an firebase crashlytics:sourcemap:upload übergeben, um .js.map-Dateien nach dem Hochladen in Firebase automatisch aus Ihrem lokalen Build-Verzeichnis zu löschen.

In der Build-Pipeline automatisieren

Wenn Sie Quellzuordnungen automatisch in Crashlytics hochladen und die lokalen .js.map-Dateien vor der Bereitstellung löschen möchten, aktualisieren Sie das build-Skript in der package.json-Datei, um das Flag --clean an firebase crashlytics:sourcemap:upload zu übergeben:

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

Nächste Schritte

  • Absturzberichte anpassen: Hier erfahren Sie, wie Sie behandelte Ausnahmen melden, benutzerdefinierte Schlüssel für Ihre deobfuskierten Stacktraces hinzufügen und die Stichprobenerhebung konfigurieren.