Ricevi report sugli arresti anomali leggibili nella dashboard di Crashlytics (web)

Seleziona la piattaforma: iOS+ Android Web Flutter Unity


Le app web compilano, minimizzano e criptano i nomi in codice in produzione per ottimizzare il raggruppamento di rete. Senza mappe di origine, i report sugli arresti anomali nella dashboard di Crashlytics mostrano analisi dello stack minimizzate e offuscate.

Per deoffuscare le analisi dello stack e visualizzare i nomi dei file e i numeri di riga originali nei report sugli errori, utilizza il comando dell'interfaccia a riga di comando Firebase per caricare i source map (file .js.map) su Firebase.

Prerequisiti

Prima di caricare i source map, assicurati di aver installato Firebase CLI v15.35.0 o versioni successive. Scopri come installare o aggiornare l'interfaccia a riga di comando Firebase.

Passaggio 1: attiva la generazione di mappe di origine nella build del framework

Configura il framework o il bundler del frontend in modo che generi i file di origine di produzione (.js.map) durante il processo di build dell'app:

Angular

In Angular, devi configurare l'opzione sourceMap all'interno del file dell'area di lavoro angular.json o passare il flag di override dell'interfaccia a riga di comando --source-map:

Opzione 1 (consigliata): modifica angular.json

Apri il file angular.json e individua la configurazione di compilazione specifica che vuoi scegliere come target (ad esempio development o production). Imposta il parametro sourceMap nel blocco options o configurations esatto:

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

Opzione 2: override da riga di comando

Se hai bisogno di mappe di origine solo per una build di verifica o una sessione di debug una tantum, aggiungi il flag --source-map direttamente al comando di build dell'interfaccia a riga di comando di Angular:

ng build --configuration production --source-map

Next.js

Aggiorna il file next.config.ts (o next.config.js) per attivare la generazione dei source map del browser durante le build di produzione impostando productionBrowserSourceMaps su 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 archivia i bundle client generati e i file di mappatura di origine .js.map all'interno della directory .next nella directory root del progetto.

React / Vite

Se la tua app React utilizza Vite come bundler di build, aggiorna il file vite.config.ts per generare mappe di origine all'interno delle opzioni di build:

// 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,
  },
});

Per impostazione predefinita, Vite archivia i bundle di output generati e i file .js.map nella directory dist.

Passaggio 2: carica i source map utilizzando l'interfaccia a riga di comando di Firebase

Dopo che il framework ha creato i bundle di produzione e generato i file .js.map, carica le mappe di origine utilizzando il comando firebase crashlytics:sourcemap:upload:

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

Questo comando cerca in modo ricorsivo tutti i file .js.map all'interno del percorso DIRECTORY fornito (dist o .next) e li carica su Cloud Storage per la mappatura dei simboli.

Passaggio 3: gestisci i source map

La generazione di mappe di origine insieme agli asset per app della tua app web può esporli a richieste pubbliche del browser, con il rischio di divulgare il codice sorgente originale. Puoi impedire che ciò accada senza perdere le analisi dello stack deoffuscate configurando il tuo server web in modo da negare l'accesso pubblico ai file .js.map o passando il flag --clean a firebase crashlytics:sourcemap:upload per eliminare automaticamente i file .js.map dalla directory di build locale dopo averli caricati su Firebase.

Automatizza nella pipeline di build

Per caricare automaticamente i source map su Crashlytics ed eliminare i file .js.map locali prima del deployment, aggiorna lo script build nel file package.json per passare il flag --clean a 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"
}

Passaggi successivi